DevTools in Chrome 59

Posted on July 07, 2017

With the release of Google Chrome 59 comes some big updates to the beloved DevTools feature. Developers everywhere should take notice of this as yet again the engineers at Google are helping us be better coders.

Find unused CSS and JavaScript

This feature is for you if you have ever felt like your styles or scripts have kind of snowballed on you and you don’t know what is what. This is useful for refactoring and reducing your code base so you are shipping the most performant code possible.

To begin finding unused code simply open the Command Menu ( CMD + SHIFT + P on a Mac ) and type in “Show Coverage”. Once you refresh and record some code into the coverage pane you can see the results. Red bars mean the code didn’t execute. Green bars means the code was fully executed. Green and red bars means only some of the code executed.

Full Page Screenshots

This feature in particular is a big deal to a lot of people. Project managers, designs and developers alike will be able to get some use of this. Before if you wanted to screenshot a web page you only were able to select what was in the initial viewport or use a third party browser extension. Now you’re able to do it right from DevTools.

To do so all you need to do is open DevTools and open the device toolbar (CMD + SHIFT + M on a Mac). Select “Responsive” mode and then set your dimensions. Next open the settings pane ( the three vertical dots to the right of the device toolbar ) and select  “Capture full size screenshot”. Here is Google’s video for it:

Blocking Requests

You can now block requested scripts or styles from executing. This is very helpful to see if you’re getting conflicts. Just go to the Network tab, right click a resource and select “Block Request URL”.

The future is bright!

Google is doing some very exciting things with DevTools. It will be interesting to see in the coming months and years what they do to help us do our jobs better.