Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

CSS and JS code coverage in Chrome DevTools

developers.google.com

Post reply on HN
Print view View original

121–130 of 130 posts

Re: CSS and JS code coverage in Chrome DevTools

#121

Post by devnetfx »

cjCamel wrote: 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…

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

Re: CSS and JS code coverage in Chrome DevTools

#123

Post by reificator »

reledi wrote: post #118
umaar wrote: 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.

Service Workers can receive push notifications for a site, after the user confirms permissions.

https://developers.google.com/web/fundamentals/getting-start...

Re: CSS and JS code coverage in Chrome DevTools

#124

Post by lucaspiller »

Swizec wrote: post #44
lucaspiller wrote: post #15

Earlier quoted context omitted.

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.

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

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

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

Re: CSS and JS code coverage in Chrome DevTools

#125

Post by err4nt »

paulirish wrote: post #96
err4nt wrote: post #45

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…

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

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?

Re: CSS and JS code coverage in Chrome DevTools

#126

Post by fiza11 »

cjCamel wrote: 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…

cronvideo.com

Re: CSS and JS code coverage in Chrome DevTools

#127

Post by fiza11 »

cjCamel wrote: 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…

cronvideo.com

Re: CSS and JS code coverage in Chrome DevTools

#128

Post by fiza11 »

cjCamel wrote: 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…

https://videoud.com/

Re: CSS and JS code coverage in Chrome DevTools

#129

Post by fiza11 »

cjCamel wrote: 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…

http://cronvideo.com/

Re: CSS and JS code coverage in Chrome DevTools

#130

Post by niutech »

umaar wrote: 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.

Nice, but why don't you convert all those huge GIFs to HTML5 videos using e.g. Gfycat? Animated GIFs are loading very slowly and wasting my precious data plan.
Post reply on HN