Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ


Choose your language

InfoQ Homepage News Updates to Google Chrome DevTools

Updates to Google Chrome DevTools

This item in japanese

Lire ce contenu en français

At Google I/O 2017, Paul Irish presented "DevTools State of the Union 2017" where he featured a number of new features that should help developers streamline their code and deal with modern JavaScript demands.

In 2017, web developers are looking for new ways to boost performance, and optimizing the page performance the user actually experiences is now seen as the biggest opportunity for improvements. According to Irish:

The fastest code in the browser is the code that never even runs. Better yet, the fastest code is the code that isn't even downloaded. What if we could provide you with a better view of what is actually being used in the page?

To that end, DevTools now offers a new Coverage profiler that will display what percentage of JavaScript and CSS code is actually used by the browser.

Screenshot of the DevTools coverage profiler showing what percentage of the code file is actually used.

Clicking on a line will jump to that file and show inline what parts of the files are actually being used.

Screenshot of the DevTools coverage profiler showing inline tips on what portions of the actual code are in use or not.

CSS is particularly interesting because the browser knows what's being applied at all times and can provide unique insight into what parts of the page's CSS is actually used.

Also new is full-page screenshots. Previously, developers could take a screenshot of the page, but it only captured what was visible on the screen. With this new feature, the entirety of the page is captured, not just the current view port.

The Audits panel has been replaced with an integrated version of the Lighthouse tool. This tool can perform audits on a page's Performance, Best Practices, Accessibility, and Progressive Web App standards. Previously, the tool was available as an extension or as a node command-line tool. Lighthouse will run the page through a series of tests such as different device sizes and network speeds. It will also check for conformance to accessibility guidelines such as color contrast and ARIA best practices.

The tool then outputs an easy to read report with actionable suggestions.

Sample report from the Lighthouse audit tool

Beyond this small selection, there are many other features available such as inline object previews and significant improvements in the ability to debug asynchronous code.

The full video of Irish's session is available on YouTube. Many of these new features will be available in Chrome 59, and are available now in Chrome Canary.

Rate this Article