Home

Tons of updates to Webkit's Web Inspector

October 28, 2009 • programming • 326 words • about a 1 minute read

Joseph Pecoraro is a god amongst men! He’s spent the past three months adding nearly every missing feature I’ve ever wanted in the Web Inpsector you get in Safari and Webkit. In some instances he’s gone above and beyond. Here’s a sampling of what he’s added and fixed:

  • Dynamically add and edit attributes on nodes in the Elements section
  • Create and tab through CSS properties in the same way
  • Create and modify CSS selectors in the “Styles” pane. ( huge! )
  • CSS Color Representations. No longer must you be saddled with RGB representation. Set a default representation (hex, color names) or cycle through them all.
  • DOM Storage now updates in real-time
  • Natural sorting of object properties (instead of 1,10,11,12…19,2,20…)
  • Keyboard shortcuts for cycling through inspector sections ⌘[and ⌘]
  • Better node list displays (no more “NodeList…”)
  • Viewing all information on and deleting cookies ( !!! )
  • Event listeners in sidebar. This is just above and beyond:

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.

  • JSON syntax highlighting. Jeez.
  • CSS syntax highlighting. It also works on inline style declarations.

This stuff is amazing! I’d been using Web Inspector for a while now as I dumped Firefox and Firebug (mostly I dumped Firefox). There were a few times I found myself wishing for a few features from FB (creating CSS Selectors and adding attributes directly to elements), but all of this is… wow!

Thank you so much Joseph, where can I send the check (or beer)?

Thanks to Sam for tipping me off on this news.