Inspector: Pulling all relevant CSS for a node

I’d like to see a DevTools extension that allows you to select an HTML node, and then
gives you only the CSS styles that you need to render the full
component. Optionally, for copying wrapper-style components it would also
allow you to specify the level of inner HTML content that can be thrown
away (to further reduce the number of needed CSS styles).

I have started building it as a Chrome DevTools extension to prove the concept:

2 Likes

I’ve wanted something like this for a long time. Very useful for reducing test cases when investigating a layout/css issue or something.

Did you know that Firefox now had support for devtools WebExtensions API too, like Chrome?
For instance chrome.devtools.panels.create will work fine in Firefox (nightly for now I think).

You can see your extension running in Firefox here:

I think the $0 API is also be implemented, so you should in theory also be able to get the currently selected element in Firefox, but I didn’t manage to get that working in Firefox. Something might be missing still.

@rpl might be able to help getting that working.

For information @Honza has also created a set of devtools extension examples here: https://github.com/devtools-html/extension-examples

Thanks for working on this extension, I think this will be very useful. Excited if this can also work in Firefox!

1 Like

I would like so much that extension also for firefox!

1 Like

There used to be an extension (now long dead) that would grab the HTML, CSS, JS, Images etc. specific to a “widget” and deliver them all to you in a zip file.

The most impressive thing was that it would only include the HTML, CSS, JS, Images etc. that you would need to use the widget… I mean, in JS that would mean only the classes and methods that the widget actually makes use of.

The process worked like this:

  1. Select a node.
  2. Click a button to start.
  3. Manually trigger all the CSS changes and JS that the widget uses.
  4. Click a button to stop.
  5. A “Save As…” dialog would appear allowing you to save the ZIP.

Making a similar “widget focus” tool that made all these things available in a single panel would be unbelievably useful.

I’ve just released it for Chrome: https://chrome.google.com/webstore/detail/web-design-pirate/pdplijceapgnjafgenmlijejmjgplbhm

For Firefox, the APIs should be fine in Firefox 54 and above, but I haven’t figured out how to get the ‘last inspected element’ ($0) or set up any sort of interaction with the devtools’ inspector.

bug 1300590 is being worked on and implements support for accessing the $0 element. When that lands there shouldn’t be any difference from Chrome for your code.

1 Like

1300590 - Implement support for $0 and inspect bindings in devtools.inspectedWindow.eval just landed so in theory Web-Design-Pirate should work with the next Nightly update.

2 Likes

@dalimil Would you mind publishing your addon on AMO? I found a css layout bug in Nightly which is about web.whatsapp.com (which is a huge SPA) and your addon would be really handy to create a minimal working test case.

@nachtigall I just tried it in FFox 55, but I’m getting some security errors due to the JS evals I’m running (strange that the Chrome version doesn’t complain). This will need a bit more work I think. I’ll probably need to use content scripts instead.

1 Like

So now all the APIs should work in Firefox stable, so I released it here: https://addons.mozilla.org/en-US/firefox/addon/web-design-pirate-for-devtools/

2 Likes

Installed as fast I can!

Seems that the extension is not available anymore :frowning:

Not sure what happened to it on AMO, but here’s the source with XPI links: