Gather Essential Tools

Learning Objectives

After completing this unit, you’ll be able to:

  • Install and use browser-based debugging tools essential for creating Aura components.
  • Install and run the best IDE for creating Aura 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 Aura Components Development

The first thing we’re going to do is kit you out. The tools you need for Aura components development might very well be the same ones you’re using already. But there are a couple of unique aspects to Aura 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 Aura 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 Aura 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, Aura Components 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: Visual Studio (VS) Code with Salesforce Extension Pack

Salesforce offers two editors with dedicated tooling for Aura components. While 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 VS Code. Once you’ve installed VS Code, add Salesforce CLI and the Salesforce Extensions for VS Code, which adds dedicated navigation, syntax highlighting, and other Aura components-specific features to VS Code. The combination gives you a world-class development environment for Aura components work.

If you don’t have it, or have an older version, take this very moment to install the current release. The Quick Start: Visual Studio Code project walks you through the process.

Beyond the Basics

There are two reasons why we recommend you eschew the Developer Console for working with Aura components.

First, you’ll write more code than you do with Visualforce. The “next level” of abstraction isn’t available yet with Aura 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. VS Code has amazing built-in features for editing code. VS Code 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 VS Code are fantastic.

One other note. You don’t have to use VS Code. There are other terrific third-party tools with add-ins that support Aura components, such as SublimeText. 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.


Keep learning for
Sign up for an account to continue.
What’s in it for you?
  • Get personalized recommendations for your career goals
  • Practice your skills with hands-on challenges and quizzes
  • Track and share your progress with employers
  • Connect to mentorship and career opportunities