If you want to be at the top of your game as a Salesforce developer, then you will want to become experienced with Lightning components. Building scalable solutions that are both powerful and user friendly has never been easier now that we, as developers, have the Lightning Component framework available to us.
So, what tools are available for developing Lightning components? We are going to unpack 6 helpful tools and resources to help you become more familiar and become a better Lightning component developer.
Lightning Component Library
When you first get started with Lightning components you will want to head over to the Lightning Component Library. This is a great place to find examples of Lightning web components, aura components, documentation and specifications on each of the components available in your Lightning component development.
This reference library shows you how to use the Lightning components and also gives you a preview of the components in action. It’s a very powerful tool for developers to try out these components before ever placing them in your code.
One of the great things about the Lightning component library is that you can view this library through your org’s instance at Lightning Web Components Playground. This is a space where you can try out your components, testing and tinkering and get instant results.
NOTE: At the time of writing, there is a warning that states that the Playground will be retired on February 1, 2021. The warning advises to try a 3rd party solution such as webcomponents.dev which also allows you to edit and preview your components in a browser.
Visual Studio Code
When you get started you will want to set up a code editor. You can use your favorite code editor or use Visual Studio Code. I recommend VS Code because of it’s Salesforce Extension Pack that provides powerful features for working with the Salesforce CLI, the Lightning Component framework, Apex and more.
If you do use VS Code, make sure to install the Salesforce Extension Pack.
Looking for an introduction to VS Code? Check out this guide.
There is a Local Development Server which is a Salesforce CLI plug-in that you can setup and configure to run, test and preview Lightning Web Components locally on your computer. You can see and develop these components and see live changes without having to publish them to your org. Local development supports Lightning Web Components only and does not support Aura components. At the time of writing this article this is currently a beta feature.
NOTE: You can’t develop Lightning web components in the Salesforce Developer Console
Lightning Debug Mode
Steps to enable debug mode:
- In Salesforce, from Setup, enter Debug Mode in the Quick Find box, then select Debug Mode.
- In the user list, locate any users that need debug mode enabled. If necessary, use the standard list view controls to filter your org’s users.
- Enable the selection checkbox next to users for whom you want to enable debug mode.
- Click Enable.
Google Chrome Developer Tools
You can open DevTools in Chrome by pressing Command+Option+I (Mac) or Control+Shift+I (Windows, Linux). This is a shortcut that opens the Console panel.
You can then STEP through your code one line at a time and figure out exactly where it’s executing differently than what you expected. You step through your code using the “Step Into Next Function Call” .
Additional Tools and Resources:
You will usually develop your Lightning components to be used in the Lightning App Builder. There are a few steps to take before you can use your custom Lightning web components on a Lightning page in the App Builder.
You will need to deploy My Domain in your org, Define Component Metadata in the Configuration file, and Add an SVG Resources to Your Component Bundle.
What other development tools or resources are you using for Lightning Web Components? Have I missed any that that should be added to this list?