Tuesday, November 3rd, 2009

Web Inspector gets major improvements

Category: Debugging, Utility, WebKit

Joseph Pecoraro has made some major improvements to Web Inspector.

It is now much easier to create and much around with the content. Create new CSS selectors with ease; Add content in-line with elements; see color representations of any value.

And, there is more:

DOM Storage
The DOM Storage DataGrids now displays live updates. You don’t need to manually refresh every time something changes. Also you can create, edit, and tab through the keys/values. Double click any open space to start creating a new value. Catching on to a theme with my updates? Overall this makes working with DOM Storage just a little more developer friendly.

This was the first feature that required me really digging into WebKit’s source, including touching all platforms. With the help of WebKit developers I eventually added support for viewing all cookie information (secure, httpOnly, etc) and deleting cookies for the Mac. All other platforms were able to display basic cookie information available through document.cookie.

Event Listeners
Not having the ability to enumerate the Event Listeners via JavaScript has plagued me, and most likely plenty of other developers, for a very long time. This made viewing Event Listeners an excellent candidate for an Inspector feature.

The implementation as it stands now has some great functionality. There is a new sidebar pane when you inspect an element in the Elements Tree Hierarchy. If the current Node has registered event listeners there is a separate section for each type of event registered (click, mouseover, etc). Within each of these lists is a display of all of the event listeners in the entire event flow for that type. That means you see all the Capturing Event Listeners followed by the Bubbling Event Listeners in the exact order that they execute and on which nodes they are registered.

Natural Sorting of Properties
Who counts “1?, “11?, “12?, “2?, “3?, etc. Certainly nobody I know! So, I implemented a variant of the alphanumerical sorting algorithm for properties when they are displayed in the console. Now you get a much more natural ordering!

Syntax Highlighting

JSON and CSS syntax highlighting is now there.

These are not nearly all of the new features in the Web Inspector. These are just the ones that I worked on and contributed to. To name some other features there are Scope Bars for the Console and Resources Panel, the ability to view Request and Response HTTP Parameters for Resources (great for debugging AJAX), Resource Status Code indicators, complete Serialization between the inspected page and the inspector, and more.

Thanks Joe!

Posted by Dion Almaer at 6:21 am

2.6 rating from 59 votes


Comments feed TrackBack URI

These are some great noew features.
Especially the event listener viewer.

Thanks Joseph.

Comment by Jaaap — November 3, 2009

It’s great to see the Web Inspector continue to get some love. It’s nice to know that they aren’t resting on their “almost good enough Firebug equivalent” laurels. I am continually impressed with the WebKit team no matter what they are up to.

Comment by eyelidlessness — November 3, 2009

Leave a comment

You must be logged in to post a comment.