Live data from Hacker News

CSS and JS code coverage in Chrome DevTools

developers.google.com

21–30 of 130 posts

Re: CSS and JS code coverage in Chrome DevTools

#22

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

I would like to extend my deepest gratitude to the person who will make this chrome extension in advance.

Re: CSS and JS code coverage in Chrome DevTools

#23

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

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…

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

Re: CSS and JS code coverage in Chrome DevTools

#25
post #9

Earlier quoted context omitted.

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.

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.

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

Re: CSS and JS code coverage in Chrome DevTools

#27
post #9

Earlier quoted context omitted.

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.

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.

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

Re: CSS and JS code coverage in Chrome DevTools

#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 and paste a screen together like a total mug.
Post reply on HN