Tuesday, November 3rd, 2009
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:
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.
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!
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.