Live data from Hacker News

CSS and JS code coverage in Chrome DevTools

developers.google.com

91–100 of 130 posts

Re: CSS and JS code coverage in Chrome DevTools

#91

Earlier quoted context omitted.

http://blog.bahraniapps.com/gifcam/ https://www.cockos.com/licecap/ i don't mean to be snaky, but c'mon: https://www.google.com/search?q=gif+recorder

I think the spirit of the question was "how best to do it from the gazillion options that are out there"

there aren't a gazillion options, though; it's more like 5.

Re: CSS and JS code coverage in Chrome DevTools

#92

Earlier quoted context omitted.

http://blog.bahraniapps.com/gifcam/ https://www.cockos.com/licecap/ i don't mean to be snaky, but c'mon: https://www.google.com/search?q=gif+recorder

I think the spirit of the question was "how best to do it from the gazillion options that are out there"

Plus more of the idea of "I think you make good stuff, would you be willing to share how you did it?"

Re: CSS and JS code coverage in Chrome DevTools

#93

Earlier quoted context omitted.

I think the spirit of the question was "how best to do it from the gazillion options that are out there"

there aren't a gazillion options, though; it's more like 5.

"Which of the five options for GIF recording do you recommend" is still a valid question though, no? Why not save everyone the time of trying all five themselves?

Re: CSS and JS code coverage in Chrome DevTools

#94
post #64

Earlier quoted context omitted.

All 3rd party vendors have to include code for many features, websites, browsers and devices. They will always contain unused code. GA does a lot and it's doubtful you're using much of it.

They could at least gzip the damn thing or whatever their own pagespeed tool says is wrong with every asset loaded from Google

If you're very concerned about it, you can implement your own solution sending HTTP calls to GA: https://developers.google.com/analytics/devguides/collection...

Re: CSS and JS code coverage in Chrome DevTools

#95

I like this, and it's addictive ;) Any way to automatically generate output that consists of the 100% essential code subset? As suspected: a typical medium.com page contains approx 75% extra code. Most egregious offenders seem to be content loader scripts like embedly, fonts, unity, youtube, etc. On the other hand, besides net load performance, I'm not really worrying about the "coverage" metric. Compiling unreal eng…

Not yet, but this will happen soon in Navalia: https://github.com/joelgriffith/navalia/issues/16

Re: CSS and JS code coverage in Chrome DevTools

#96
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 are used: http://imgur.com/ZtfNFmo On the left, we have typical whitespace; On the right: no extra whitespace between style tags and rules. You can see we went from 15 unused bytes to 0.

To be extra clear about this we could somehow indicate these bytes are "unused whitespace" bytes. The implication is a little different in that case, mostly just to use a minifier.

(I work on these tools)

Re: CSS and JS code coverage in Chrome DevTools

#97

How do I exclude "chrome-extension://" and "extensions::" from the list? I can't do anything with them anyway, so it's just clutter.

It's done for you, but you'll have to wait for the next Chrome version. (Or use beta/Canary). Screenshot: http://imgur.com/zSfShm1

Re: CSS and JS code coverage in Chrome DevTools

#98

Is there an easy way to filter out extensions from the Coverage tab, besides opening it in incognito mode?

Yes. We actually implemented this later. Chrome Beta (or dev/Canary) filters them out by default, with a checkbox to opt-in. Screenshot: http://imgur.com/zSfShm1

_Edited_

Re: CSS and JS code coverage in Chrome DevTools

#99
post #2

A single page solution for a site wide issue.

This is now fixed. ;)

The Coverage panel in Chrome 59 is the debut, but it's gotten a lot of improvements since then. In Chrome Beta (or you can always look in Canary), the data is reported live as things happen, and indeed results do aggregate across different page navigations. Which is what you would expect.

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

Re: CSS and JS code coverage in Chrome DevTools

#100
post #90

Chrome Dev tools, the first reason why I started using Chrome. I wonder if HN has any better alternatives to suggest? I'm curious to see what I could be missing on!

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
Post reply on HN