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:
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!
I would like so much that extension also for firefox!
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:
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.
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.
@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.
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/
Installed as fast I can!
Seems that the extension is not available anymore 
Not sure what happened to it on AMO, but here’s the source with XPI links:
