Tool Suite for Aura Components Development

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.

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

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.