DevTools Digest

Updates to the Developer tools in Chrome 33

HTML5 Rocks

Improve your code editing experience with edit locations & go-to column, discover registered event listeners with getEventListeners(), learn about some minor DevTools UI enhancements all in the latest edition of the DevTools digest.

Asynchronous call stacks

Stack traces can now be associated with the asynchronous source of an event. There is support for timers, animation frames, XHRs, event listeners and more. We'll soon be posting a full writeup of asynchronous call stacks to HTML5 Rocks. (Don't forget to check 'Enable support for async stack traces' in DevTools experiments.) [crbug.com/272416]

getEventListeners(window)

When viewing the DOM of a page, it's not always obvious what elements have JavaScript event listeners registered on them, if any. All registered event listeners on the window object (or any DOM node for that matter) can now be retrieved via getEventListeners in the Console panel as part of the Command Line API. [crbug.com/336472]

Sources panel introduces the concept of editing locations which are essentially cursor positions in the code editor. Alt- takes you to previous editing locations (the piece of code you were previously at) and Alt+ goes forward. [crbug.com/281507]

Box Shadow auto suggest values are updated

Auto suggest values for the CSS property box-shadow have been updated to include the keyword of none. [crbug.com/332355]

Go to a specific line number and a specific column

Go to a line number at a specific column using :line:column in the Sources panel ‘Search by filename’ (Ctrl + O or Cmd + O) dialogue box. [crbug.com/337909]

Easier resizing with the toolbar handle

Any empty space on the main DevTools toolbar now acts as a valid resize handle. [crbug.com/304730]

Retina friendly network bars

The network bars which were originally formed from images have now been created in CSS making them resolution independent and retina friendly. [crbug.com/330659]

Reducing noise in the console

Unknown arguments passed to the meta viewport tag are no longer displayed as errors in the console, but rather, warnings meaning less noise for you to sift through. [crbug.com/332794]

Remove color formatting cog

The Styles pane cog to cycle through color formats is now removed, though you can still change this preference in DevTools settings. [crbug.com/333840]

Sticky console tab

The console tab in the drawer now correctly remembers its state correctly after a reload. [crbug.com/328551]

Improved explanation on text autosizing

A link to the mobile emulation documentation has been added into DevTools to help explain more on emulation and Text autosizing, a tooltip also appears for the text autosizing checkbox. [crbug.com/319092]

Remote IP address

You can now view the IP address of a host in the Network panel resource view. [crbug.com/255602]


Thanks for reading. You can try these features out in Canary, alternatively many of the features mentioned in the December edition are now available in Chrome stable!

Comments

0