
CSS and JS code coverage in Chrome DevTools - HearMeRoar
https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage
======
umaar
If you're interested in staying up to date with Chrome DevTools, I run this
project called Dev Tips: [https://umaar.com/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.

~~~
HoyaSaxa
Could you share some best practices you've learned in generating animated
product gifs? For instance, what software you use, what settings have you
tuned, etc?

~~~
leeoniya
[http://blog.bahraniapps.com/gifcam/](http://blog.bahraniapps.com/gifcam/)

[https://www.cockos.com/licecap/](https://www.cockos.com/licecap/)

i don't mean to be snaky, but c'mon:
[https://www.google.com/search?q=gif+recorder](https://www.google.com/search?q=gif+recorder)

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

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

~~~
untog
"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?

------
cjCamel
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 and paste a
screen together like a total mug.

~~~
edgarvaldes
On Firefox, it is shift-F2 "screenshot --fullpage"

~~~
oblio
And as a Firefox fan I must say that Firefox has had this feature for more
than a year.

------
TekMol
So I recorded my site for a while. Then sorted by unused bytes. What was on
top?

Google's own analytics.js

~~~
manigandham
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.

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

~~~
manigandham
Pagespeed is a subpar tool that really shouldn't be used much. Follow the best
practices and don't try to fix every possible little complaint.

As far as Google serving files though, its about as optimized as it gets. The
JS file is gzip'd, served by Google's cloud network and on chrome it even uses
their own QUIC protocol which is faster. It's also likely cached by the sheer
amount of usage across the web so it'll probably be the fastest loading thing
on your entire site.

~~~
corobo
But I want the number to be green :(

Fair point, I think I've been accidentally gamified when it comes to the
pagespeed test. Good call.

------
err4nt
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 the opening
and closing `style` tags are DEFINITELY being used, so until these false
results get weeded out it will be noisey to try to use this to track down real
unused lines.

~~~
paulirish
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](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)

~~~
err4nt
So the line breaks and stuff are fine on the right? I could argue that _any_
line break in CSS is extraneous whitespace, so why are some line breaks OK but
others not?

------
orliesaurus
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!

~~~
nailer
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.

~~~
grahamperich
wow, that sounds like the holy grail of javascript debugging

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

------
laurencei
My vague recollection of the Google event where this was first announced (was
it late 2016 or early 2017?) - was it was going to "record" your site usage
for as long as you were "recording" \- and give the report at the end.

But this now sounds like a coverage tool for a single page?

Does anyone know if it can record over multiple pages and/or application usage
(such as an SPA)?

~~~
cshenoy
There's a record button in the Coverage tab - the solid filled circle. Allows
you to record over multiple pages (either a SPA or normal site).

~~~
TekMol
It looks like it does that. But the results are only for the last page.

I tried it by triggering function A on page 1 and function B on page 2.

The report showed function A as not used.

~~~
laurencei
I wonder if it is a bug perhaps?

------
KevanM
A single page solution for a site wide issue.

~~~
KevanM
Not that I don't appreciate the efforts that they put in to helping developers
--and I'm sure this is for the single-page PWA crowd--but CSS and JS is far
more complicated than looking at a single page (especially for big
organisations).

~~~
Swizec
If it's not for this page, then why are you loading it? Load it when the user
goes to that other page.

That's the idea behind bundle splitting and whatnot. Don't send users code
they don't need yet. Most of them are never going to get to the part of the
page that does need that code.

~~~
lucaspiller
Depending on what you are loading it may be more efficient to bundle
everything in one file. If you are only loading a few kb per page, the
overhead and extra time required for the network requests mean it's probably
not worth splitting code.

~~~
Swizec
Yep, I agree. Optimization is about tradeoffs :)

At my day job we use app splitting rather than page splitting. Instead of
breaking our codebase into individual pages and loading only those files, it's
broken into apps. So you might load too much stuff for what you're currently
doing, but you're never loading code that's completely unrelated.

A downside to that is that if you hit all our apps in one browsing session,
you might download some vendor libraries like 10 times. But it's unlikely that
a real user would ever do that.

~~~
lucaspiller
We do something similar, but common code is shared. Webpack has a feature
called chunking which we use to put everything from node_modules into it's own
bundle which is loaded across multiple apps. Then the app specific code is
loaded on each page.

[https://webpack.js.org/plugins/commons-chunk-
plugin](https://webpack.js.org/plugins/commons-chunk-plugin)

It does result in code being loaded when it isn't always needed, but in our
case most libraries are used in every app.

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

~~~
paulirish
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](http://imgur.com/zSfShm1)

~~~
kaycebasques
FYI Canary is the bleeding-edge version of Chrome:
[https://www.google.com/chrome/browser/canary.html](https://www.google.com/chrome/browser/canary.html)

Mac and Windows only

~~~
skeoh
Paul is one of the Chrome devs :)

------
TekMol
In the CSS file view, isn't it unpractical, that it marks whitespace as
unused? That makes it much harder to find rules that are unused.

~~~
cmg
Shouldn't you be minimizing your CSS (and JavaScript) as part of a deployment
script, anyway? This tool supports sourcemaps, so it will show you the
original CSS.

My major issue with it is that it doesn't seem to take media queries into
consideration. It marked as unused a number of styles wrapped in a min-width
that happened to be larger than my browser window. Without automation, it's
going to be time-consuming to click through every page of a site and resize
the browser window from very small to very large.

~~~
jazoom
Why minimise it just to use a development tool?

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

~~~
paulirish
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](http://imgur.com/zSfShm1)

_Edited_

------
hacksonx
"{ 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.

~~~
symlinkk
What good reason would a sysadmin have to disable web browser updates?

~~~
steven777400
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.

------
indescions_2017
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 engine via emscripten to build tappy
dodo may result in 80%+ unused code, but near native runtime worth is a
healthy tradeoff.

Try, for example: [http://webassembly.org/demo/](http://webassembly.org/demo/)

~~~
mrskitch
Not yet, but this will happen soon in Navalia:
[https://github.com/joelgriffith/navalia/issues/16](https://github.com/joelgriffith/navalia/issues/16)

------
i_live_ther3
What happened with shipping everything in a single file and letting cache
magic happen?

~~~
davideast
HTTP/2 happened. HTTP/2 allows you to send HTTP requests over a single TCP
connection per domain. Headers are compressed. The request overhead is minimal
compared to HTTP/1.x.

Caching one big file has the draw back of busting the cache each time the file
is updated for any small change.

Caching multiple small files allows you to have a finer grain cache. Only bust
the things that updated. And, since it's all the same TCP connection it's now
performant to load this way.

~~~
koolba
Can't you do that already by reusing the 1.1 connection? Or is the 2.0 change
that requests are now parallel?

~~~
davideast
Yep, more wording was bad. In HTTP/2 it's all parallel.

------
mrskitch
I wrote a tool to automate this (right now it's just JavaScript coverage)
here:
[https://github.com/joelgriffith/navalia](https://github.com/joelgriffith/navalia).
Here's a walk through on the doing so: [https://codeburst.io/capturing-unused-
application-code-2b759...](https://codeburst.io/capturing-unused-application-
code-2b7594a9fe06?source=linkShare-e0eb0cdc0e08-1499868430)

------
arthurwinter
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 :)

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

~~~
midgetjones
It does do that, doesn't it?

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

------
rypskar
Excellent timing, I had given up finding a good tool for coverage on JS and
CSS and where right now using audits in Chrome trying to find unused CSS and
searching through the code to find unused JS on our landing page. Even if it
is hard for at tool to find everything that is unused on a page it will show
what is used so we know what we don't have to check in the code

~~~
mrskitch
You should look at
[https://github.com/joelgriffith/navalia](https://github.com/joelgriffith/navalia)
which can automate this

------
foodie_
Hurray! Now they just need to make it part of an analytics program so we can
let the users tell us what code is never running!

~~~
saintPirelli
Sheesh, you must have awfully tech-savvy users on your sites.

~~~
samteeeee
He didn't mean it literally.

------
dethos
Is there anything similar for Firefox? On the developer tools or as an
external extension?

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

~~~
paulirish
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](https://zippy.gfycat.com/PopularWarmCoqui.mp4)

------
geniium
Very nice! The Coverage feature is something I have been waiting for since a
long time!

------
mgalka
This is great, such a useful function. Thanks for posting.

------
wmkthpn
Can this be useful when someone uses webpack?

~~~
neilsimp1
Why would it be any different if they weren't? Unused code is unused code.

~~~
wmkthpn
Webpack bundles everything up into one huge .js file, I gotta try how it works
with that.

Plus in my current environment (ReactJS + TypeScript + MobX + Webpack) tslint
generates errors when I have unused variables and that breaks TeamCity build.

No matter what, this tool is super useful!

~~~
shroom
You can do code splitting with Webpack it's a matter of config and how your
code is organized. [https://webpack.github.io/docs/code-
splitting.html](https://webpack.github.io/docs/code-splitting.html)

------
_pmf_
When your developer experience depends on how much free time Chrome developers
have ...

------
ajohnclark
Yesss!!

