Chrome 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:
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:
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.