I used this addon just yesterday to help minimize a testcase for a layout issue I was investigating, and it was super helpful.
Thanks for writing & sharing this tool, twisniewski! On Thu, Mar 14, 2019 at 11:47 AM Thomas Wisniewski <twisniew...@mozilla.com> wrote: > 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 > dev-tech-layout@lists.mozilla.org > https://lists.mozilla.org/listinfo/dev-tech-layout > _______________________________________________ dev-tech-layout mailing list dev-tech-layout@lists.mozilla.org https://lists.mozilla.org/listinfo/dev-tech-layout
