DevTools Digest - Chrome 35

Umar Hansa
Umar Hansa

Hi all, in the last edition of the DevTools Digest we got to check out the powerful Asynchronous call stacks and a few others. In this edition, we’ll see an improved Network Panel filtering (with autocomplete), edit abilities with Shadow DOM content, CodeMirror 4 updates and more.

Network panel filtering

You can now filter resources by certain fields such as Domain. One filter format is this: Domain:website.com. In addition to filtering, you also get autocomplete suggestions for valid filter values which update in realtime as you type your query. You may find this useful when you need to find all resources served by a particular domain. [crbubg.com/258421]

Network panel filtering.

Edit Shadow DOM content

DevTools has always been able to edit regular HTML in the Elements panel, these capabilities now extend to elements part of a Shadow DOM. [crbug.com/348991]

Edit Shadow DOM content.

Upgrade to CodeMirror 4.0

CodeMirror, the JavaScript based text editor being used as part of the Sources Panel has been upgraded to version 4. A bunch of new functionality has been added as a result of this. crbug.com/356878]

Quick search for a CSS-property

You can now search property names, values, or rule selectors from the new search box in the Styles pane. Results are highlighted in real-time as you type your query. [crbug.com/278852]

Quick search for a CSS-property.

Timestamps next to console messages

When logging messages in a quick succession, it may be useful to see the exact time a message is logged. You can enable this via DevTools Experiments. [crbug.com/131714]

Timestamps next to console messages.

Memory Statistics breakdown for heap snapshots

When viewing a recorded heap snapshot, notice the stastics pie chart which gives a visual, color-coded overview as to what aspect of JavaScript is consuming the most memory. Currently an experimental feature, enable “Heap snapshot statistics” to try it out. [crbug.com/346335]

Memory Statistics breakdown for heap snapshots.

View the original source of a console.log, not the wrapped version

You probably have a console.log wrapper function, but unfortunately in console all your messages come from something like util.js:46. Now you can have DevTools resolve your original locations. Enter the file which wraps console log messages into the “Skip stepping through sources with particular names” input box to have DevTools blackbox it and then show the true source of a log statement. [crbug.com/231007]

A few more small, but powerful additions

  • Refresh the Event Listeners pane in the Elements Panel, after dynamically adding or removing JavaScript event listeners. [crbug.com/341044]

  • You can use Ctrl+ to gain focus on the Console input, you may find this useful for a keyboard only workflow in the DevTools. [crbug.com/144943]

  • border-style autocomplete suggestions for values (dotted, dashed, double, groove) have been updated to match the spec. [crbug.com/349998]

  • Restore defaults and reload button **has been added to the Settings panel which does exactly what it says on the tin. [crbug.com/135451]

  • Currently an experimental feature, you can try out dock to left to discover its suitability for your workflow. The other layout modes are dock to main window (right or bottom) and undock into a separate window. [crbug.com/134282]

  • "wheel" is now offered as an event listener breakpoint, this is in addition to the usual click, mousemove, mousedown etc. events. [crbug.com/347562]

That’s all for now, thanks for reading!