Live data from Hacker News

CSS and JS code coverage in Chrome DevTools

developers.google.com

101–110 of 130 posts

Re: CSS and JS code coverage in Chrome DevTools

#101
post #31

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.

In Chrome 59, indeed it only reports the last viewed page. In Chrome 60 (Beta) and later (including canary), it does what you expect.

Demo: https://zippy.gfycat.com/PopularWarmCoqui.mp4

Re: CSS and JS code coverage in Chrome DevTools

#102
post #43

It'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.

It does this. Just click the file: http://imgur.com/g4jg6lu

Re: CSS and JS code coverage in Chrome DevTools

#103
post #60

If 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.

Wow nice. I feel like a real noob I didn't even know about the command palette. It's too bad my friends on facebook aren't sharing these instead of all the damn recipe gifs.

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?

My sentiments exactly, especially since we as developers aren't in one team with system admin so they do not seem to understand our struggle.

Re: CSS and JS code coverage in Chrome DevTools

#105
post #90

Earlier 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

Yep. It's already in Chakra (MS's JS engine), they just need to do the Edge DevTools support.

Re: CSS and JS code coverage in Chrome DevTools

#106
post #45

Interesting 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…

Why measure bytes and not selectors used in the first place?

Re: CSS and JS code coverage in Chrome DevTools

#107
post #29

From 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…

I was stoked when I found out about it. Sadly, the fullsize screenshot makes my stylesheet switch into portrait mode and then I get the mobile look with the bottom half of the page completely missing.

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?

It's possible that a new version could have a breaking policy change. For example, all our intranet apps are served over HTTP. At some point, that's going to become untenable due to the changes for browser security requirements.

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

#109
post #43

Earlier quoted context omitted.

Also a "git blame" type view that shows which files use which lines of css/js.

It does do that, doesn't it?

I meant, of the lines that are green, what line in what html file is causing that line to be green.

Re: CSS and JS code coverage in Chrome DevTools

#110
post #60

If 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.

This is incredibly awesome. thanks for sharing!
Post reply on HN