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.
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:
Select a node.
Click a button to start.
Manually trigger all the CSS changes and JS that the widget uses.
Click a button to stop.
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.
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.
@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.