Gather Essential Tools
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
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
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 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.)
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.
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.
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.