DevTools news, as fresh as it gets
The first news item in this post is a little meta – it's this update itself! Every now and then but at least once a month, I'll summarize what's happening in the world of Chrome DevTools, fresh off the press.
And when I say fresh, I mean it: I'll talk about new features that have just arrived in Chrome Canary, so if you'd rather stay in stable land, that's cool too. But if you're adventurous and want to stay on top, these posts are for you. In addition to the latest features and bugfixes, you will find a Community Heartbeat section at the end of each post, highlighting the greatest you, our beloved users, have contributed.
Without further ado, let's dive into actual news.
New in DevTools
Film strip-like screenshots in Network and Timeline
Just a week ago, we've moved a significant new feature out of experimentation: The ability of capturing screenshots of the page in both Network and Timeline tab.
In the Network panel, click on the little camera icon to enable the capturing of frames, then reload the page to trigger the capture. Other than screenshots captured with other tools like WebPageTest, we currently only show frames that actually came from a paint.
While double-clicking on one of the frames shows a zoomed view (then use left/right arrows to navigate), hovering over them shows lines across the panel and timeline to visualize exactly when the frame was captured, allowing you to correlate to the load sequence. This makes debugging common load issues such as render-blocking web fonts much simpler.
In the Timeline panel, you can enable screenshot capturing by toggling the "Screenshots" checkbox in the top toolbar. Things work a little differently here, compared to the Network panel: In this case, we try to capture as often as we can – regardless of actual paints – to be able to drop said screenshots on a linear timescale that correlates with the other rows in Timeline. Instead of needing to double-click to show a preview, zoomed in frames appear on hover.
As the two are a little out of sync in terms of functionality and UX, we'd like to encourage you to try out the feature(s) and provide any feedback you have through tickets on crbug.com/new or via tweet to @ChromeDevTools.
Network Throttling in the Network panel
Network throttling, a feature we've added when introducing our Device Mode, found its second home in the Network panel toolbar so you can focus on network optimizations in a single place.
This new home is just a mirror though: It's still available out of Device Mode, as simulating bad connectivity is still highly important when working on making your site responsive.
Finally, are you one of these poor souls that have wondered why your internet connection is broken after a long day at work, only to discover that you forgot to disable network throttling? The Network panel tab now shows a warning icon when network throttling is enabled.
Various tidbits
- Hated those weird circles on the network timeline? So did we. These are the points in time when a frame (in the new film strip) was captured. Now they appear as lines when you hover.
- Device Mode now preserves orientation when you switch between devices
Community Heartbeat
Down and dirty with Chrome DevTools
Bret Little released this nice little walkthrough course that acquaints you with basic DevTools functionality but also offers a lot of in-depth tips and tricks. Definitely useful info in there, and more DevTools docs never hurt!
A DevTools IDE…?!
Kenneth Auchenberg, web developer and DevTools aficionado, developed a proof-of-concept standalone DevTools app few months ago, and somehow his blog post made (hacker) news again this week.
Turning DevTools into a full blown IDE is a fun idea, one that many of our team members have dreamed about before, but it would also be a project of epic proportions.
What do you think? Is the DevTools IDE a pipe-dream or could you see it work out? How should it looks like? Let us know in the comments!
See you soon!
Paul Bakaus & the DevTools team