forcedotcom / lightning-inspector Goto Github PK

View Code? Open in Web Editor NEW

18.0 23.0 22.0 133.62 MB

Salesforce Lightning Inspector

Home Page: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/inspector_intro.htm

License: BSD 3-Clause "New" or "Revised" License

Python 0.07% JavaScript 77.98% HTML 0.44% Shell 0.04% CSS 18.65% TypeScript 0.25% SCSS 2.30% Less 0.27%

lightning-inspector's Introduction

Table of Contents generated with DocToc

The Lightning Inspector

The Lightning Inspector

What is the Inspector?

The Lightning Inspector allows users to view and navigate the component tree, inspect attributes of components, and investigate the performance of component life cycles.

The Lightning Inspector lives in the aura public open source repo so it must be Aura specific; no Salesforce-specific entries. To allow you to also debug Salesforce-specific features we've added the Sfdc Inspector extension to the Lightning Inspector. It adds panels for Salesforce-specific features such as Aura Data Service (ADS and RLB tabs). You do not need to install the Sfdc Inspector but it's suggested.

Installs and Set-up

Download or clone the Lightning Inspector code from Github and unzip the file.
Set up the Environment

  1. nvm install --lts
  2. npm install yarn -g

Set up

  yarn install
  yarn build

Development

  yarn watch

Running the Inspector

Open up a browser like Google Chrome and type in chrome://extensions/
Click the Developer Mode checkbox in the top right
Click the "Load unpacked Extensions" button on the left
Select the directory for the aura-inspector
On a website you wish to use the inspector, right click on page and click on 'inspect' (ctrl/cmd + option + i).
From there, navigate on the top bar with tabs to access the Lightning Inspector tool

How to Use

The google sites page and public documentation are still great resources.

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/inspector_use.htm

PR Requirements and Testing Specifics

When making changes to the Lightning Inspector code, there are a set of requirements that must pass before sending a PR.
First, fork the repository on Github.
If you wrote a unit test for the changes, your test and the current unit tests in the code base should all pass. You can do this by running yarn test on the terminal.
The inspector should build without any errors. You can do this by running ‘yarn build’ on the terminal.
The inspector should also pass with manual testing.
1. Go to the chrome extension page, chrome://extensions/, and press the reload button for the Lightning Inspector extension.
2. The inspector should work with a complex application like the Lightning Experience, Lightning Out, and non aura pages should still show a message. Go through all the tabs under the Lightning Inspector, and if you see an error, verify against master. If there is still an error, file an issue to the repo and you may proceed with your PR.
3. Test the inspection panel on the elements detail section and make sure there are no errors that occur.
Lastly, when all the previous steps pass, make sure the code passes with Circle CI when you push to Github. If the build fails, you should debug the error, and push the code again to see if it builds successfully.
Code coverage must be increased or stay the same.
Please add Kris Gray as the reviewer for the PR

lightning-inspector's People

Contributors

Stargazers

Watchers

lightning-inspector's Issues

Lightning Inspector - error in Performance tab

Hello
I just installed Lightning Inspector
The problem is that I see nothing in the performance tab.
When I click on the start button, there is a popup with this message : "Error clearing marks on inspected window"
I saw in the forum of the Chrome Webstore that other people had this problem, and I did not see any explication or resolution.
Would appreciate any help because I see in the Lightning Usage application that my Home page has bad response times and this is curious because it is mainly the standard home page.

Component Tree not Displaying on Winter '20 orgs

The Component Tree is blank when attempting to view the Component tree in Winter '20 orgs.

This error is showing in the Chrome Console.

AuraInspector: Failed to communicate to inspector. DOMException: Failed to execute 'postMessage' on 'Window': function(t){return"Sent: "+this.txTotalCount+" requests (i= "+this.txInstrCount+"); Size total= "+this.txTotalS...<omitted>...)} could not be cloned. at e (chrome-extension://pcpmcffcomlcjgpcheokdfcjipanjdpc/dist/LightningInspectorInjectedScript.js:1:20395)

It does not work with the Local Dev Server

Could you help me to make it work when using the local dev server?

Doesn't seem to work on site.com community pages

I'm working with a client who recently created a new sandbox. Their experience builder sites in the new sandbox are on the site.com domain. Previously, they were on force.com. The lightning inspector works fine on the force.com sites but not on the site.com ones. On those, it comes up blank.

Announcement: Lightning Inspector for Community Site Pages Issue with Winter '23

With the Winter '23 release you may run into issues using the Salesforce Lightning Inspector. Enhanced Domains have been turned on across all orgs as of the Winter '23 release, which causes the Lightning Inspector to break on Communities' Site Pages - a Known Issue has been created with some background as well.

As you may have noticed, this repository has not been very actively maintained over the past few years. We've had some internal changes, so please bear with us as we determine next steps with this product. A branch with the fix has been created, but this change has not been merged or deployed yet. In the meantime, you can build the Lightning Inspector locally with the fix by forking this repository, cloning this branch, and following the local setup steps here.

More detailed instructions below:

Fork this repository by clicking the Fork button in the top right corner
In the following screen, you can enter in a custom name for your repository or leave it the same
De-select the Copy the 'main' branch only checkbox at the bottom of the screen and click Create Fork

Clone the app locally through the CLI or by downloading the zip file
Open up your terminal and navigate to the directory containing your project ie. cd ~/aj/lightning-inspector-fork
Follow the local setup steps here to set up your environment
Check out the branch containing the fix: git checkout pr/80. You should see a message like:

Branch 'pr/80' set up to track remote branch 'pr/80' from 'origin'.
Switched to a new branch 'pr/80'

Open up a browser like Google Chrome and type in chrome://extensions/
Click the Developer Mode checkbox in the top right corner
Click the Load Unpacked Extensions button in the left corner
Select the directory containing your fork ie. ~/aj/lightning-inspector-fork
You're ready to go!

We recognize this is a workaround and thank you all for the patience - enjoy inspecting!

Lightning Inspector - Chrome v80 Actions Tab Visibility

Since the v80 release the action tab is no longer showing the running methods. However I inspect the panel I can see that the data exists. Its just not being rendered on the screen for some reason: