12 ms·
CSS and JS code coverage in Chrome DevTools
- KevanM 9y agoA single page solution for a site wide issue.
- KevanM 9y agoNot 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 9y agoIf 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 9y agoDepending 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.
- amelius 9y ago> it may be more efficient In many cases it may not. Remember that you have to fetch data anyway when loading a new page. You could load the new parts of the CSS on the same connection.
- dddddaviddddd 9y agoEspecially over HTTP/2
- danhardman 9y agoAgreed. I often find the extra initial loading time is worth the improved user experience across the rest of the website once the bundles CSS file is cached.
- Swizec 9y agoYep, 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.
- eterm 9y ago> you might download some vendor libraries like 10 times That reminds me that I once found 3 versions of jquery (or perhaps jquery-ui, my memory fades) linked from the same page. One was linked in the master (yes, this was webforms), one was being injected through a user control and the last was written into the page. All three were all different versions so were all being downloaded. This came to light when a controls stopped working when one version was 'updated'.
- lucaspiller 9y agoWe 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.
- corobo 9y agoBecause now the entire thing is loaded into the browser cache and doesn't need loading at all across the entire site
- hinkley 9y agoAlso you don't have the combinatorial explosion of making sure that the CSS for the new sidebar/footer/reusable element is available every time it appears in a page. It also simplifies debugging specificity issues a little (but shuffles the problem around a bit).
- abraham 9y agoThe tool will record over multiple pages. As you navigate to additional pages the numbers will be updated to include code usage on the new page.
- paulirish 9y agoThis 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 https://zippy.gfycat.com/PopularWarmCoqui.mp4
- geuis 9y agohttps://github.com/geuis/helium-css https://github.com/geuis/helium-css
- i_live_ther3 9y agoWhat happened with shipping everything in a single file and letting cache magic happen?
- onion2k 9y agoYou can still do that. This tool is for finding things that aren't used anywhere.
- davideast 9y agoHTTP/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 9y agoCan't you do that already by reusing the 1.1 connection? Or is the 2.0 change that requests are now parallel?
- davideast 9y agoYep, more wording was bad. In HTTP/2 it's all parallel.
- swiley 9y ago>HTTP/2 allows you to send HTTP requests over a single TCP connection per domain. HTTP/1.x definitely has support for this. Not using it actually may get your IP temporarily blocked from many sites.
- davideast 9y agoSorry, wrote this before coffee. I was referring to H/2 eliminating head-of-line blocking. HTTP/2 gives you one TCP connection for multiple requests rather than the 7 connection limit browsers impose on HTTP 1.x
- ajohnclark 9y agoYesss!!
- orliesaurus 9y agoChrome 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!
- brandonwamboldt 9y agoIt's not up to par with Chrome Dev Tools, but something to keep an eye on is https://github.com/devtools-html/debugger.html https://github.com/devtools-html/debugger.html (a project run by Mozilla). This has the benefits of being open source and very accessible to developers (because of the technologies & being on GitHub). It may one day give Chrome a run for it's money.
- eterm 9y agoFor a long time I've used firefox dev edition because their developer tools have been easier, particularly for editing and re-sending HTTP requests. (Right click "edit and resend" in firefox vs ? in chrome). Also in firefox you can screenshot not just the whole page below the fold but screenshot any element by right-clicking the element in the elements pane.
- pluma 9y agoThere is no better alternative. Or at least there wasn't earlier this year. I tested several cross-platform browsers in Q1 this year and I always had to go back to Chrome because it's the smoothest dev experience.
- nailer 9y agoEdge 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 9y agowow, that sounds like the holy grail of javascript debugging
- deleted 9y ago[deleted]
- wmkthpn 9y agoCan this be useful when someone uses webpack?
- neilsimp1 9y agoWhy would it be any different if they weren't? Unused code is unused code.
- wmkthpn 9y agoWebpack 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 9y agoYou 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
- Matthias247 9y agoI think it would be interesting if this works with source-maps, that are created from things like webpack or compilers/transpilers. The unused code which ends-up in the browser might result from unused code in original files which looks slightly differently, and it's interesting where it comes from.
- phatbyte 9y agoWebpack already does this see: https://webpack.js.org/guides/tree-shaking/ https://webpack.js.org/guides/tree-shaking/
- laurencei 9y agoMy 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)?
- deleted 9y ago[deleted]
- rockostrich 9y agoIt should be able to record over a SPA if there are no hard reloads. I don't think it can record over multiple pages though.
- cshenoy 9y agoThere'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).
- eriknstr 9y agoMeanwhile someone on Reddit said that Firefox is able to record across pages.
- rypskar 9y agoExcellent 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 9y agoYou should look at https://github.com/joelgriffith/navalia https://github.com/joelgriffith/navalia which can automate this
- arthurwinter 9y agoIt'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 :)
- saintPirelli 9y agoI would like to extend my deepest gratitude to the person who will make this chrome extension in advance.
- bwag 9y agoAlso a "git blame" type view that shows which files use which lines of css/js.
- midgetjones 9y agoIt does do that, doesn't it?
- bwag 9y agoI meant, of the lines that are green, what line in what html file is causing that line to be green.
- paulirish 9y agoIt does this. Just click the file: http://imgur.com/g4jg6lu http://imgur.com/g4jg6lu
- foodie_ 9y agoHurray! 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 9y agoSheesh, you must have awfully tech-savvy users on your sites.
- samteeeee 9y agoHe didn't mean it literally.
- deleted 9y ago[deleted]
- TekMol 9y agoSo I recorded my site for a while. Then sorted by unused bytes. What was on top? Google's own analytics.js
- tedmiston 9y agouBlock blocking it perhaps?
- chinathrow 9y agoI feel your sentiment. Same with Google PageSpeed Insights. Cache time of analytics.js is the shit.
- SquareWheel 9y agoAre you blocking analytics using a browser addon?
- manigandham 9y agoAll 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 9y agoThey could at least gzip the damn thing or whatever their own pagespeed tool says is wrong with every asset loaded from Google
- singlow 9y agoIt complains about the cache expiration time being too short. But there are good reasons they can't cache it longer. The short cache has no significant effect on page performance, as long as it is loaded async, but there is no way the performance tool can determine that unless it white listed it which would not be fair to someone else's tracking script.
- manigandham 9y ago
- TekMol 9y agoIn 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 9y agoShouldn'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 9y agoWhy minimise it just to use a development tool?
- cjCamel 9y agoFrom 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 9y agoOn Firefox, it is shift-F2 "screenshot --fullpage"
- oblio 9y agoAnd as a Firefox fan I must say that Firefox has had this feature for more than a year.
- usaphp 9y agoThere are some chrome extension that do it for you: https://chrome.google.com/webstore/detail/full-page-screen-capture/fdpohaocaechififmbbbbbknoalclacl?hl=en-US https://chrome.google.com/webstore/detail/full-page-screen-c...
- cjCamel 9y agoI know. I've tried them in the past and for trust reasons I choose not to use them now.
- zuzun 9y agoI 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.
- devnetfx 9y agoGreat! I was having trouble taking full size screenshots using UI last time I tried (apart from adding a custom device for desktop). This time I found "Laptop with HiDPI screen" as well which I believe was not there earlier.
- _pmf_ 9y agoWhen your developer experience depends on how much free time Chrome developers have ...
- TekMol 9y agoWould 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 9y agoIn 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
- PetrolMan 9y agohttps://github.com/purifycss/purifycss https://github.com/purifycss/purifycss should give better results anyway
- indescions_2017 9y agoI 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 9y agoNot yet, but this will happen soon in Navalia: https://github.com/joelgriffith/navalia/issues/16 https://github.com/joelgriffith/navalia/issues/16
- err4nt 9y agoInteresting 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 9y agoThis 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)
- geniium 9y agoVery nice! The Coverage feature is something I have been waiting for since a long time!
- hacksonx 9y ago"{ 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 9y agoWhat good reason would a sysadmin have to disable web browser updates?
- james-skemp 9y agoIn the days of IE it was common because certain tools would only support certain versions of IE. Intranets and specialized web portals (like ticket systems) for example.
- hacksonx 9y agoMy sentiments exactly, especially since we as developers aren't in one team with system admin so they do not seem to understand our struggle.
- steven777400 9y agoIt'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.
- james-skemp 9y agoThis has been showing up on my work machine since our IT group started installing Chrome on all machines. If you do a search for that and 'Chrome' you'll find sites that tell you how to work around the issue. Chrome has long supported the ability to workaround non-admins the ability to install Chrome (local user directory I believe) so no surprise there's a workaround for this as well. Personally, I found that the registry key wasn't matching what those say, but Chrome still has that message but will update. Your mileage may vary.
- mrskitch 9y agoI 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-2b7594a9fe06?source=linkShare-e0eb0cdc0e08-1499868430 https://codeburst.io/capturing-unused-application-code-2b759...
- genieyclo 9y agoIs there an easy way to filter out extensions from the Coverage tab, besides opening it in incognito mode?
- paulirish 9y agoYes. 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_
- umaar 9y agoIf 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.
- e1g 9y agoTwo thumbs up for @umaar work - absolutely love the bits of knowledge and the GIF format. Thank you for discovering & sharing actually useful tips.
- umaar 9y agoThank you, means a lot!
- kemayo 9y agoMaybe add an RSS feed? I can consume it now because my RSS reader (NewsBlur) has an email gateway, but that's still kinda jumping through silly hoops.
- nreece 9y ago* shameless plug * Create a RSS feed with Feedity: https://feedity.com https://feedity.com
- Adam89 9y agoI was looking for a course like this, thank you!
- umaar 9y agoI guess you're talking about the Modern DevTools course which Dev Tips links to, thanks! I'm working on new course content every week or so. If you want to influence future content, check out: https://github.com/umaar/dev-tips/issues/27 https://github.com/umaar/dev-tips/issues/27
- 9y ago
- wiradikusuma 9y agoHow do I exclude "chrome-extension://" and "extensions::" from the list? I can't do anything with them anyway, so it's just clutter.
- paulirish 9y agoIt'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 9y agoFYI 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 9y agoPaul is one of the Chrome devs :)
- dethos 9y agoIs there anything similar for Firefox? On the developer tools or as an external extension?
- mgalka 9y agoThis is great, such a useful function. Thanks for posting.