Live data from Hacker News

CSS and JS code coverage in Chrome DevTools

developers.google.com

111–120 of 130 posts

Re: CSS and JS code coverage in Chrome DevTools

#111
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 sick

Re: CSS and JS code coverage in Chrome DevTools

#112
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 sick

Re: CSS and JS code coverage in Chrome DevTools

#113

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

FYI Canary is the bleeding-edge version of Chrome: https://www.google.com/chrome/browser/canary.html

Mac and Windows only

Re: CSS and JS code coverage in Chrome DevTools

#114
post #66
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.

Because now the entire thing is loaded into the browser cache and doesn't need loading at all across the entire site

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

Re: CSS and JS code coverage in Chrome DevTools

#115
post #12

Can this be useful when someone uses webpack?

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

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

Re: CSS and JS code coverage in Chrome DevTools

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

Thanks for sharing, and for creating it! Great work. The tip on how to capture full sized screenshots without a browser extension[1] was already worth the visit.

[1] https://umaar.com/dev-tips/151-screenshot-capture/

Re: CSS and JS code coverage in Chrome DevTools

#117
post #86
post #28

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.

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…

Why minimise it just to use a development tool?

Re: CSS and JS code coverage in Chrome DevTools

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

I wish I could subscribe to mobile push notifications (without having to keep the site open or download an app) instead of subscribing to a mailing list. Does anything like this exist?

I've found over the years that emails as notifications get ignored by me, no matter how interested I was at the time of subscription.

Re: CSS and JS code coverage in Chrome DevTools

#119
post #74
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.

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

* shameless plug * Create a RSS feed with Feedity: https://feedity.com

Re: CSS and JS code coverage in Chrome DevTools

#120

Earlier quoted context omitted.

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

FYI Canary is the bleeding-edge version of Chrome: https://www.google.com/chrome/browser/canary.html Mac and Windows only

Paul is one of the Chrome devs :)
Post reply on HN