BT

Your opinion matters! Please fill in the InfoQ Survey!

Updates to Google Chrome DevTools

| by David Iffland Follow 3 Followers on May 24, 2017. Estimated reading time: 1 minute |

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

Adoption Stage
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread
Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Discuss

Login to InfoQ to interact with what matters most to you.


Recover your password...

Follow

Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.

Like

More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.

Notifications

Stay up-to-date

Set up your notifications and don't miss out on content that matters to you

BT