Live data from Hacker News

CSS and JS code coverage in Chrome DevTools

developers.google.com

71–80 of 130 posts

Re: CSS and JS code coverage in Chrome DevTools

#71
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

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.

Re: CSS and JS code coverage in Chrome DevTools

#72
post #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 a…

There are some chrome extension that do it for you: https://chrome.google.com/webstore/detail/full-page-screen-c...

Re: CSS and JS code coverage in Chrome DevTools

#73
post #64

Earlier quoted context omitted.

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

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 pr…

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.

Re: CSS and JS code coverage in Chrome DevTools

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

Re: CSS and JS code coverage in Chrome DevTools

#75
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 was looking for a course like this, thank you!

Re: CSS and JS code coverage in Chrome DevTools

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

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?

Re: CSS and JS code coverage in Chrome DevTools

#77
post #75
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 was looking for a course like this, thank you!

I 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

Re: CSS and JS code coverage in Chrome DevTools

#78
post #72
post #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 a…

There are some chrome extension that do it for you: https://chrome.google.com/webstore/detail/full-page-screen-c...

I know. I've tried them in the past and for trust reasons I choose not to use them now.

Re: CSS and JS code coverage in Chrome DevTools

#79
post #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 a…

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

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

Re: CSS and JS code coverage in Chrome DevTools

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

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?

I use ScreenFlow for screen recording and they added export as animated gif recently. It's so easy - highly recommend it.

https://www.telestream.net/screenflow/overview.htm

Post reply on HN