What’s new in Chrome DevTools 2016

May 24, 2016

I just finished watching this awesome video from Google I/O in which Paul Irish and Sam Saccone profiled a few websites and talked about some great new Chrome DevTools features that are available now on Chrome Canary. If you want to watch the whole video, check it out below! Otherwise, here are the bullet points.

Chrome DevTools Video

1. Network view within the Timeline tab

Screen Shot 2016-05-23 at 3.52.53 PM

This great new addition allows you to get a better idea of what’s happening with your website. By allowing you to view network requests alongside your JS Profile and screen paint you can get a full picture of what is taking up time on your website!

2. Command Menu

Screen Shot 2016-05-23 at 3.02.05 PM

This might be my favorite addition! cmd+shift+p or ctrl+shift+p on Linux/Windows will open up the new command menu! This lets you fuzzy search for all the cool things that can be done with the Chrome DevTools. Never click again!

3. Mobile Interactions

Screen Shot 2016-05-23 at 3.10.19 PM

Also on the Timeline tab, now while using mobile emulation you can get an idea of what interactions (Fling, Scroll, Click) caused certain spikes in Paint or JS Profile!

4. CPU Throttling

Screen Shot 2016-05-23 at 3.25.53 PM

Similar to Network Throttling, this experiment allows you to simulate lower end devices which you should definitely be doing!