Handy frontend tools in Chrome

google Chrome coverage taGChrome 60 will be released to the public very soon but there are two handy frontend tools worth noting, which were introduced in Chrome 59: identify unused CSS and JS on a particular page and take a full page screenshot.

Both tools can be accessed through the new unified command menu in Chrome’s DevTools panel via Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows, Linux).

Find unused CSS and JS code

Got to the “Sources” tab in DevTools, open the command menu and type “Coverage”. Select “Show coverage”. A new tab appears that gives you two options:

Google Chrome start coverage

Click on the reload button, wait until the page has finished loading and then click on the red Stop Recording button. In the results window you can see how much of the code of the loaded external files is actually being used on this particular page. When you select a specific file you can scroll through the code – the unused part of the code is highlighted by a red bar on the left side:

Google Chrome unused code

Full page screenshots

In the command menu type “Screenshot” and select “Capture full size screenshot”. Chrome takes a screenshot of the entire page (not only the viewport) and saves it to the Downloads folder.

Google Chrome full-page screenshot

About Uwe Kristen

After graduating in Scottish Literature at University of Glasgow in 1996 Uwe put down his empty glass and left the pub. He took the next airplane to New York City and started coding websites. He still codes. He still reads.