Gather Essential Tools
- Install and use browser-based debugging tools essential for creating Lightning components.
- Install and run the best IDE for creating Lightning components.
If the preceding unit was kind of a lecture, or sounded like homework, let’s start over.
The hardest thing, when you get started with a brand new technology, is knowing where to start. How do I get set up? What do I write code with? Where do I put it? How do I see it, and test it? Little questions like these can be a real barrier to taking the first step.
So, let’s do something useful, right now. Let’s start here.
The first thing we’re going to do is kit you out. The tools you need for Lightning components development might very well be the same ones you’re using already. But there are a couple of unique aspects to Lightning components tools, so let’s make sure.
Browser: Google Chrome
Many web app developers use Google Chrome because of its excellent developer tools. If that describes you, you’re done. Next item.
If not, plan to switch to Chrome for Lightning components development. We’ll cover why in the next two items.
Browser Debugger: Chrome DevTools
If you’re not already confident using Chrome DevTools, we highly, highly recommend the outstanding docs available. Start with Getting Started, and then move to the training, beginning with DevTools Overview. Every minute you spend learning to use DevTools is 10 minutes you’ll save later. (The payoff is more like 50-to-1, but we’ll be conservative.)
Yes, Firefox and Safari also have pretty good developer tools. But you’re switching anyway, because of the next item.
DevTools Extension: Salesforce Lightning Inspector
Developing for Lightning components without the Salesforce Lightning Inspector is like starting a fire by rubbing sticks together. You can do it, but it’s exercise, and who wants that?
What’s special about the Lightning Inspector? With this plug-in for DevTools, you can navigate the component tree, inspect component attributes, and profile component performance. You can observe and inspect calls to server-side actions and their responses. And it helps you understand the sequence of event firing and handling. (We explain all these terms in the next module on this trail, Lightning Component Core Concepts.)
Editor: Force.com IDE
Salesforce offers two editors with dedicated tooling for Lightning components. While the Developer Console is fine for quick edits and small scale learning projects, including this module, it’s not the best tool for developing real components and apps.
The best tool is the Force.com IDE, which adds dedicated navigation, syntax highlighting, and other Lightning components-specific features to the Eclipse IDE. The combination gives you a world-class development environment for Lightning components work.
If you don’t have it, or have an older version, take this very moment to install the current release. See the Resources section for links to details on installing or upgrading.
Beyond the Basics
There are two reasons why we recommend you eschew the Developer Console for working with Lightning components.
And second, you’re going to have a lot of different code resources open at once, especially at the beginning. You’ll flip around between them to compare, copy-and-paste, and so on. The tab and window management features in the Force.com IDE are fantastic.
One other note. You don’t have to use Eclipse. There are other terrific third-party tools with add-ins that support Lightning components, such as SublimeText and Visual Studio Code. They also work very well, and are likewise a big step up from the Developer Console. If one of these tools is your jam, by all means use it! See the Resources for some pointers.