This is the code for a browser DevTools extension that works in Firefox and Chrome.
This extension adds a new panel to the toolbox. The panel allows users to search for nodes in the current page.
There are 2 ways to search within the panel:
This is the main feature of this extension. It is very useful for finding elements on a page that have certain CSS computed styles.
For example, say you want to list all of the CSS grids on a page. You can use this query to do this display:grid.
The extension will simply loop through all elements on the page and only display the ones that do have their CSS computed display value set to grid.
You can also use a couple of operators to make searching more useful:
display:!block will find all elements that have a display value other than block.display:~flex will find all elements that have a display value that includes the substring flex. So it will match elements that have it set to inline-flex and flex.The extension also supports descendant queries. That means you can find elements that have a given style and that are descendant of elements that have another given style.
For instance display:flex align-self:start will find all elements with align-self set to start and that are descendants of a display:flex element.
This is a more traditional way to search for elements in the page but can be useful too.
With this feature, you can simply type any CSS selector that would work with document.querySelectorAll and the matching elements will be listed and highlighted.
Once a search has returned results, they are displayed in the panel and they are all highlighted in the page too.
Hovering over a single result will highlight only the corresponding element.
It is also possible to scroll elements into view or select them in the inspector panel by clicking on corresponding links.
The code for this extension has been made compatible with Firefox and Chrome (it uses WebExtension APIs so should, in theory, work with any browser that has support for them). However, the extension has only been made available for installation via the Mozilla Add-On website (so for only Firefox only).
So you want to help? Awesome!
Here are a few ways you can do that:
This extension is written in JavaScript, with little bits of HTML and CSS, so you will need to be comfortable with those languages before starting.
There is absolutely no other pre-requisites or any other software to install. The only thing you will need is the Firefox web browser, and at least version 57.
We don't yet have documentation for working on the extension in the Google Chrome browser.
That's it! You have the code now.
about:debugging.Add-ons tab.Load Temporary Add-on button.src/manifest.json file and open.That's it! Now if you open a new tab on any site, and open DevTools, you should see the extension in the toolbox.
Now that you are set up with the development environment, you can start making changes to the code. To see those changes appear in Firefox, you will need to do the following:
about:debugging.devtools-highlighter you will see 3 links. Click on the link that says Reload.That's it! You should now see your changes.
chrome://extensions.Load unpacked extension button.src/manifest.json file and open.That's it! Now if you open a new tab on any site, and open DevTools, you should see the extension in the toolbox.
Same as with Firefox, if you make changes to the code and want to reload the extension, do the following:
chrome://extensions tab.devtools-highlighter click on the little circular arrows button to reload the extension.That's it!
Simply open a pull request and I'll try to review it quickly.
This isn't necessary for working on the extension locally. This is needed only for deploying the extension to AMO.
npm installnpm run buildVery much needed. In particular explaining what each scope is responsible for would be nice.
The best place to chat about this extension is on the DevTools Slack, in the #addons channel. Ping @pbro.