Gather Essential Tools

Learning Objectives

After completing this unit, you’ll be able to:
  • 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.

Tool Suite for Lightning Components Development

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

Ladder! 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

Ladder! 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

Ladder! 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.)

These are critical tasks when you’re developing anything more complicated than hello world. Yes, you can do it manually with any decent JavaScript developer tool, but it’s not simple. The Lightning Inspector makes it easy, which is the difference between a painful developer experience and a pleasurable one.

Editor: 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.

Ladder! The best tool is the 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.

First, you’ll write more code than you do with Visualforce. The “next level” of abstraction isn’t available yet with Lightning components, so you write code to do things that with Visualforce were easy, or automatic. You’re going to want an editor that makes it easy to edit, move things around, refactor, and so on. The IDE (via Eclipse) has amazing built-in features for editing code. Eclipse handles JavaScript better than the Developer Console. Did we mention you’d be writing a lot of JavaScript?

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 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.