Hello all, I've written a helper addon to make it a bit easier to reduce test-cases from live pages. It's available on AMO at: https://addons.mozilla.org/en-US/firefox/addon/testcase-reducer/
The addon essentially just pulls out the minimal HTML and CSS that might apply to the node you are currently inspecting in the devtools. This includes any CSS rules which could theoretically apply (including :active, :-webkit-scrollbar, etc). It can also include styles for webfonts, a few key meta tags like meta-viewport, and all @media rules even if they do not currently apply. The addon just adds a simple devtools panel along with the inspector, console, etc. Typical usage is: - inspect a node in the devtools inspector - click "reduce" in the addon's devtools panel - fine-tune or further reduce the resulting markup while referencing the live preview - copy-and-paste the markup, or click to send it to Codepen, JSBin, or JSFiddle. Note that this addon does not work on Firefox for Android, which has no support for devtools panels at this time. However it does work fine with the Responsive Design Mode, which has proven helpful in many cases for me lately. Also note that the content in third-party subframes will not be captured, though it should still be possible to inspect a node within the iframe to reduce (though it will only consider the iframe itself, not what's outside of it). A Github page is up here for bug reports: https://github.com/webcompat/testcase-reducer Of course if you do file an issue then please let me know the URL of the page where the addon is having a problem. Happy bug-hunting! _______________________________________________ dev-tech-layout mailing list [email protected] https://lists.mozilla.org/listinfo/dev-tech-layout
