Salesforce Lightning Inspector provides the excellent ability to inspect the Component Tree, component DOM markup, and events, as well as display actions, override actions, and profile performance. This tool can be great for inspecting issues, especially related to events firing and data coming from the Apex method.
You can add the Salesforce Lightning Inspector from the Chrome web store. Here is the link to add the inspector to the Chrome browser: https://chrome.google.com/webstore/detail/Salesforce-Lightning-insp/pcpmcffcomlcjgpcheokdfcjipanjdpc?hl=en
Once you add the Lightning inspector to Chrome, if a Salesforce page has Lightning Components, you will see a Lightning subtab in the developer Console of Chrome, as shown in the following screenshot:
For this chapter, we will use the code from Chapter 3, Lightning Component Building Blocks. You can access the code from the Git repository here: https://github.com/PacktPublishing/Learning-Salesforce-Lightning-Application-Development/tree/master/chapter3.
Recall the YouTube search application searches videos from YouTube using search terms entered by users. Check out the following screenshot to recall how the application looks:
To create a scratch Org with all the components from the Chapter 3, Lightning Component Building Blocks repository, execute the following commands in your command line:
- Log in to DevHub using the CLI command:
sfdx force:auth:web:login -d -a DevHub
- Set your DevHub as the default hub using this command:
sfdx force:config:set defaultdevhubusername=DevHub
- cd into the chapter3 folder and create a scratch Org using this command:
sfdx force:org:create -s -f config/project-scratch-def.json -a testorg
- Set your scratch Org as the default Org using this command:
sfdx force:config:set -u=testorg
- Push the source code to the scratch Org using this command:
sfdx force:source:push
- Optionally, you can open the Org directly from the CLI using this:
sfdx force:org:open