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

81–90 of 130 posts

Re: CSS and JS code coverage in Chrome DevTools

#81

Post by leeoniya »

HoyaSaxa wrote: post #76
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.

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?

http://blog.bahraniapps.com/gifcam/

https://www.cockos.com/licecap/

i don't mean to be snaky, but c'mon: https://www.google.com/search?q=gif+recorder

Re: CSS and JS code coverage in Chrome DevTools

#83

Post by jflowers45 »

leeoniya wrote: post #81
HoyaSaxa wrote: post #76

Earlier quoted context omitted.

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?

http://blog.bahraniapps.com/gifcam/ https://www.cockos.com/licecap/ i don't mean to be snaky, but c'mon: https://www.google.com/search?q=gif+recorder

I think the spirit of the question was "how best to do it from the gazillion options that are out there"

Re: CSS and JS code coverage in Chrome DevTools

#84

Post by umaar »

HoyaSaxa wrote: post #76
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.

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?

Generally, I'd say: keep it short and digestible. Also watch out for extra noise on the screen, otherwise it'll distract the viewer. And having an ending transition can be useful for understanding when the gif is done, since their looping nature can make this aspect confusing.

Software: Typically Screenflow. It has a built in Gif preset which I'll sometimes use, or if better compression is needed: https://gist.github.com/dergachev/4627207

Re: CSS and JS code coverage in Chrome DevTools

#86

Post by cmg »

TekMol wrote: 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 click through every page of a site and resize the browser window from very small to very large.

Re: CSS and JS code coverage in Chrome DevTools

#87

Post by eriknstr »

laurencei wrote: post #14

My 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)?

Meanwhile someone on Reddit said that Firefox is able to record across pages.

Re: CSS and JS code coverage in Chrome DevTools

#88

Post by james-skemp »

symlinkk wrote: post #68
hacksonx wrote: post #54

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

What good reason would a sysadmin have to disable web browser updates?

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

Re: CSS and JS code coverage in Chrome DevTools

#89

Post by james-skemp »

hacksonx wrote: post #54

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

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

Re: CSS and JS code coverage in Chrome DevTools

#90

Post by nailer »

orliesaurus wrote: post #6

Chrome 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!

Edge 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.
Post reply on HN