Would be super useful if it recorded over multiple pageviews. To find unused CSS+JS and to measure the coverage of tests. But it seems to silently forget what happened on the first page as soon as you go to the second page.
CSS and JS code coverage in Chrome DevTools
101–110 of 130 posts
Re: CSS and JS code coverage in Chrome DevTools
#102It'd be awesome if there was a button to download a file with the code that's used, and the code that's unused, instead of just having a diff. Hint hint :)
Also a "git blame" type view that shows which files use which lines of css/js.
Re: CSS and JS code coverage in Chrome DevTools
#103If you're interested in staying up to date with Chrome DevTools, I run this project called Dev Tips: https://umaar.com/dev-tips/ It contains around 150 tips which I display as short, animated gifs, so you don't have to read much text to learn how a particular feature works.
Re: CSS and JS code coverage in Chrome DevTools
#104"{ Version 57.0.2987.98 (64-bit) Updates are disabled by your administrator "} Guess I will only be able to comment on these when I get home. The full screen screenshot feature is going to be a welcomed addition. I will especially have to teach it to the BA's since they always want to take screenshots to show to business when design is finished but test is still acting up.
What good reason would a sysadmin have to disable web browser updates?
Re: CSS and JS code coverage in Chrome DevTools
#105Earlier quoted context omitted.
Edge will probably get time travel debugging first, allowing you to rewind and inspect after something happens. Way better than adding debugger or console.log() everywhere.
wow, that sounds like the holy grail of javascript debugging
Re: CSS and JS code coverage in Chrome DevTools
#106Interesting tool, but even more interesting results. I just tried it on a simple, one-page website I built recently and there is not a single line of _code_ that's unused, yet it's still showing me 182 lines unused. Things it seems to consider unused: `style` tags, if your CSS rule is on more than one line - the lines for the selector and closing tag. There should be 0 unused lines since there are 0 unused rules, and…
This is a fair point. The underlying instrumentation here is based on the matching of CSS rules to the DOM via selectors. We then map those rules back into source locations (including external style sheets, @sourceURL, and style tags). We do also have to account for all the other bytes in the block of CSS. I believe in your case, these bytes are all whitespace. Here's a basic comparison of two pages where all rules a…
Re: CSS and JS code coverage in Chrome DevTools
#107From the same link, being able to take a full page screenshot (as in, below the fold) is also very excellent. I notice from the YouTube page description there is a further shortcut: 1. Open the Command Menu with Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux, Chrome OS). 2. Start typing "Screenshots" and select "Capture full size screenshots". I needed this literally yesterday, when I used MS Paint to cut a…
Re: CSS and JS code coverage in Chrome DevTools
#108"{ Version 57.0.2987.98 (64-bit) Updates are disabled by your administrator "} Guess I will only be able to comment on these when I get home. The full screen screenshot feature is going to be a welcomed addition. I will especially have to teach it to the BA's since they always want to take screenshots to show to business when design is finished but test is still acting up.
What good reason would a sysadmin have to disable web browser updates?
In general, there's no momentum to make a change that the agency doesn't "have" to make, and when the browser finally refuses to transmit forms over HTTP then we want to know about it before the change is deployed to all the users.
Re: CSS and JS code coverage in Chrome DevTools
#109Re: CSS and JS code coverage in Chrome DevTools
#110If you're interested in staying up to date with Chrome DevTools, I run this project called Dev Tips: https://umaar.com/dev-tips/ It contains around 150 tips which I display as short, animated gifs, so you don't have to read much text to learn how a particular feature works.