Improving the Web Inspector

There is a better article on the WebKit blog, showing even more features! I really recommend that you check it out and provide feedback!

I haven’t been blogging recently… Instead, for the past 3 months I’ve been “doing” something! I’ve been working on WebKit, the Open Source Rendering Engine behind browsers like Safari and Chrome. More specifically I’ve been working on the Web Inspector. Its been a blast!

In a matter of weeks of working on the Inspector I was able to knock out some simple features that I’ve always wanted. Soon after I introduced some features that required some serious learning and development. I really shouldn’t say “I”, because in actuality the WebKit team has been a tremendous help in teaching me and collaborating with me on the new features. To name a few that have been especially helpful (via their IRC handle because I didn’t ask their permission) xenon, Rik`, pfeldman, bweinstein, bdash, and pmuellr.

So what were the features? Here they are, roughly in the order in which they were added:

Element Attributes (Create + Tab)

Making new element attributes was difficult, sometimes impossible, and undiscoverable. My goal was to get rid of all three of these obstacles. Here goes. Discoverability first. With the new changes, when you hover over an element in the Element’s Tree Outline an ellipsis, or some indicator, appears in the element’s opening tag in the position that the next attribute would go. Double clicking that ellipsis starts editing as though it were a normal attribute. To make things easier, you can tab through attributes and backwards using “shift-tab”. When starting to edit an attribute, when you tab over the end it will start making a new attribute. This way you can quickly make multiple attributes.


CSS Properties (Create + Tab)

The same problem existed for CSS Properties. I added tabbing through CSS properties inside a selector section. Tabbing forward from the last property (or double clicking the empty space if there are no properties) will start creating a new property.

CSS Selectors (Create + Modify)

Yes, you now have the ability to actually add and modify selectors! This is a feature that many designers have been interested in. It is really powerful and quite useful. This will make it easy for designers to hack around inside the Inspector to get the styles just right. Also, as a side note, the way this is handled in the background leaves room for some new features such as exporting CSS for the changes you’ve made. Its certainly an idea being floated around.


CSS Color Representations (Hex + More)

One complaint that showed up time and time again in Twitter was that the Inspector only showed rgb color representations. Many designers wanted the hex representation and had to resort to using Firebug to get that information. Well, we went one step further. You can now represent colors any way you’d like: hex, shorthex, rgb, hsl, or even by its nickname if it has one! For alpha colors you get rgba and hsla. Designers, have at it!


Clicking on the color swatch allows you to cycle through the different representations for just that color. Allowing you to get the different representations that I got in the picture. However, you can set a preference in the gear menu to display all the colors in a particular format.

DOM Storage Updates

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.


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!

Keyboard Shortcuts

Probably not so well known but you can now switch between the different panels of the Inspector with keyboard shortcuts! On the Mac its ⌘[ and ⌘].

Better NodeList Displays

As a developer myself I find the issues that annoy me, and are likely going to annoy other developers, and set out to solve them. One classic problem I had was doing a getElementsByTagName or similar and having the console respond blandly with “NodeList”. Not good enough! NodeLists now display the actual HTML elements in a list just like an Array. Its one of those small details that developers won’t really notice unless its gone, because we expect it.


Resources Interactivity

There were some old feature requests sitting in WebKit’s Bugzilla. They requested opening resources on double click, and adding the ability to drag a resource around like it were a link. I thought they were great ideas!


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.


Another developer, bweinstein, just recently landed some really great improvements! He added support for Windows, separated cookies out per domain, and enabled resizable grid columns. Really great work.

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.


A few filters will let you customize the list to focus on the entire event flow or just the selected node. This is still a very new feature, one that Firebug doesn’t even have yet. So we are looking for UI improvements and idea on how to improve the feature, but its certainly a cool feature!

JSON Syntax Highlighting

JSON is merely a subset of JavaScript but it wasn’t getting highlighted! A few lines later, the inspector now syntax highlights JSON just like JavaScript.

CSS Syntax Highlighting

The JavaScript syntax highlighter has helped me hundreds of times. Now, hopefully the CSS syntax highlighter will do the same! The colors are very close to Dashcode, they look great, and there is even support for some of the rather complex @import, @media, @font-face, and @variables CSS syntaxes.


Hey, as a birthday gift to myself what could be better then adding some serious styling to those black and white stylesheets? I know what you’re thinking… nothing could be better. Well you’re almost right! With some of the refactoring I did bweinstein was able to apply syntax highlighting to the Elements Tree Hierarchy and got some seriously awesome results. Now the inline scripts and styles are syntax highlighted! These are some really awesome improvements that make working with the Inspector ever more friendly.



To start using any of these features you will need to download the WebKit nightly. Most people think that the nightly overrides their current Safari app. This is not true. The nightly binary is a separate application from Safari, named WebKit. If you just want to try out some of these features you can download the Nightly, and then move it to your trash when you’re done playing with it. No harm, no foul.

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.

If you want to contribute feel free to stop by #webkit on Freenode. My handle is JoePeck and I’d be glad to help you out!

63 Responses


Tweets that mention BogoJoker » Improving the Web Inspector — on October 8, 2009 at 2:37 pm  #

[…] This post was mentioned on Twitter by Timothy Hatcher. Timothy Hatcher said: What JoePeck has been adding to Web Inspector: — good stuff! (via @pmuellr) […]


John Wright on October 8, 2009 at 2:54 pm  #

Wow, thanks Joe. These are so awesome and useful, especially the EventListeners enumeration.


Adam Singer on October 8, 2009 at 3:12 pm  #

Just what the doctor ordered! Another nail in the coffin for Firebug. I can’t wait to try this out!


Jon Shea on October 8, 2009 at 6:32 pm  #

Amazing work! I think you nailed everything I’ve secretly wanted in Safari Developer mod and more. Thanks a ton.


Phil Dokas on October 9, 2009 at 10:43 am  #

Great stuff! I’ve long used Safari as my personal browser and Firebug … er, Firefox, as my development browser, but since 4.0 landed I’ve been using Safari more and more. These changes really scratch most of the itches I’ve had with the web inspector.

My one humble suggestion: regarding discoverability, I think that pressing the return key should behave like double-clicking in that the selected thing should enter edit-mode. Making the inspector more keyboard accessible would go a long ways towards matching the input style of a lot of programmers (“The mouse? You mean the thing that’s slower than my keyboard?”)


Michael Kozakewich on October 9, 2009 at 7:31 pm  #


How much of that is in the coding of the inspector itself, and how much relies on Webkit?
I once copied the Inspector folder from Safari to Chrome (I think Chrome doesn’t support a few of the features, yet), and I could see a couple new things.
Would copying that folder work for many of the improvements listed above?


Joseph Pecoraro on October 11, 2009 at 1:54 pm  #

@Michael: I have made sure that all of the features that I have added work with both Safari’s JavaScript interpreter (JavaScriptCore) and Chrome’s (v8). Most of the features here are just in the JavaScript and thus will inherently work. The few that required recompilation are Cookie and Event Listeners.


Dylan on October 28, 2009 at 10:11 pm  #

Awesome work, thanks!


Greg Hemphill on October 29, 2009 at 12:16 am  #

These are awesome improvements… though I find myself going back to FireBug for the line numbering in CSS. It might not seem important, but being able to drill down to the exact line a CSS rule is declared on is a nice efficiency.

Extra props go to adding syntax coloring to CSS and color swatches to the styles.


Rick Harding on October 29, 2009 at 12:20 am  #

Wow, I think the only thing missing is support for header style debugging like firephp/firepython. I can’t wait to play with this stuff.


tcdent on October 29, 2009 at 12:33 am  #

Just wanted to thank you for the work you’re doing. I’ve been pleasantly surprised each time one of these features has shown up in the nightlies. Keep up the good work!


Sam Soffes on October 29, 2009 at 12:58 am  #

Wow. This is a very awesome update to the inspector. Thank you so much for you work on this!


Stephen Bush on October 29, 2009 at 1:09 am  #

Thank you much, Joe. You nailed it! Can’t wait to start playing with the improved Web Inspector.


Aaron H. on October 29, 2009 at 3:52 am  #

Wow. These are terrific updates. I was surprised when I first saw all that Safari 4 could do, but this is even better. I can’t wait to try these improvements.



Henrik N on October 29, 2009 at 4:53 am  #

Nice! One step closer to ditching Firefox.

One thing I miss from Firebug is how the JS console can be a multi-line buffer. There is opt+return in the Web Inspector, but that’s not quite as handy.


thomas on October 29, 2009 at 5:35 am  #

this is great … Would someone tell me how I would go about integrating this with my current Safari version (instead of launching the webkit app).

thanks for all this :)


Martin on October 29, 2009 at 7:38 am  #

Oh boy, this looks pretty cool. Might be able to ditch Firebug now.


Matthew on October 29, 2009 at 7:40 am  #

Great work, I’ve also been wishing for some of these things, so I can switch from ff + firebug (slow and leaky) to webkit and its inspector (blazingly fast)

The event listener view in particular is awesome.

What would be really really awesome would be some way to track memory usage in the javascript heap. eg counts of objects in the heap grouped by their prototype, which reference is stopping an object being garbage collected, etc.

Would probably take some pretty deep work but would be incredibly useful for those of us developing browser-based applications.


BogoJoker » Improving the Web Inspector « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit on October 29, 2009 at 8:10 am  #

[…] BogoJoker » Improving the Web […]


Jakob Stoeck on October 29, 2009 at 9:22 am  #

Great update! I especially like Apple-[ and -]

One thing that bugs me: Often I select a DOM Element with the magnifying glass in the “Elements” view. Afaik there is no shortcut for that is there?

Again, great job!


Alan Pinstein on October 29, 2009 at 9:56 am  #

All I can say is wow, awesome. You were doing what all of us were thinking plus a whole lot more. Great job.

Time to get the webkit nightly!



emehrkay on October 29, 2009 at 10:16 am  #

Can we possibly get a big[ger] area to write JS (like in firebug)?

Good work, thanks


Ron on October 29, 2009 at 10:33 am  #

Very Cool. Windowed or docked. Is there a way to doc it along the right instead of vertically? Most of us have large wide screens and I think I would find it easy to use that way.


Dustin Hoffman on October 29, 2009 at 12:08 pm  #

This is great stuff :) Thank you so much for your work.
I was wondering though, is auto-completion of CSS properties being considered? So you can hit down arrow and cycle through potential matches to what you have typed in. Not a big deal, but it is something I noticed could be improved.


Thomas Aylott on October 29, 2009 at 12:26 pm  #

Too too awesome!

Pity Firebug is on its way down. They used to be THE standard for client-side development. Now it’s WebKit, no question.


John Ankarström on October 29, 2009 at 12:55 pm  #

Awesome work! :-D


Ben D on October 29, 2009 at 2:37 pm  #

FANTASTIC!!! Thank you so much for all your hard work.

As someone mentioned above, the only thing that I would add a “yes, please!” to would be line numbering in CSS. I use it constantly in Firebug and for a front-end designer/developer it’s invaluable.

But really, thank you thank you thank you. Very exciting. :)



Manuel on October 29, 2009 at 3:02 pm  #

Awesome work, well done!
I’m about ready to say bye to Firebug/Firefox.


Scott McMillin on October 29, 2009 at 3:08 pm  #

Fantastic job. Event listeners may be my favorite, but they’re all great!

I echo @emehrkay’s request for a bigger console area to type javascript.


Joseph McLaughlin on October 29, 2009 at 3:09 pm  #

Looks amazing! Definitely just changed my default browser from Safari to the WebKit nightly!


Nic Johnson on October 29, 2009 at 5:15 pm  #

Awesome. I’ve switched to Safari for development.

One little request: I like to use cmd+opt+i to open the inspector. Can you make the same shortcut close it too? It’s annoying to have to use the mouse to close it.



Mark Eagleton on October 29, 2009 at 5:19 pm  #

Indeed, these are very welcome improvements. I do, however have to agree with Greg Hemphill. Line numbers of the rules effecting a given element in the CSS side of the Elements panel make Firebug indispensable. This is the only reason I continue to use Firebug over the Webkit Web Inspector.


Mark Eagleton on October 29, 2009 at 5:23 pm  #

Wait, clicking the link to the CSS file takes you to the respective line in the style sheet! You sir, have changed my life. Thank you!


Andrew Vit on October 29, 2009 at 5:34 pm  #

Very nice! One other thing that bugs me about Safari’s inspector is that it collapses the DOM tree when reloading the page. Is there any way to have it remember the selected element between reloads?


Mike on October 29, 2009 at 6:26 pm  #

Thanks for the heads up that the WebKit nighties don’t overwrite Safari…I’ve been using Firefox since I wasn’t super happy with the dev tools in Safari 4.03!

Time to move over to WebKit.


Mark Dodwell on October 29, 2009 at 9:56 pm  #

This is totally awesome, thanks! I love the Web Inspector already, and now it’s 2x better. These improvements, especially the smaller UI ones will help make the user experience much better.


Jakub Pawlowicz on October 30, 2009 at 3:40 am  #

So it was you!! :-) Many thanks for the improvements. I use latest builds of WebKit as my development browser and the changes you made makes my work a lot easier.


The next version of Webkit’s Web Inspector by Colin Devroe on October 30, 2009 at 6:48 am  #

[…] developers to “inspect” an already-loaded Web page for debugging, testing, etc., that has some really great new features thanks in part to Joseph […]


Joost on October 30, 2009 at 7:28 am  #

Awesome. Great work! Safari is my browser of choice, and I’ve always been a bit jealous of some of Firebug’s features…


Brad Kemper on October 30, 2009 at 12:39 pm  #

This is fantastic work! Thank you so much.

Of course, now that I see these changes, I want even more. Such as:

• For the color preference in the gear menu, how about “as authored”? So that if the style sheet says “red”, then “red” will be displayed in the style inspector.

• How about a color picker for changing colors?

• I’d love to be able to save changes to styles. What would be nice is if the changes made in the style inspector were shown in the CSS file in “Resources” (with strikeouts and underlines and background colors to indicate deletions and additions), with the ability to “Save As” (with or without changes via a checkbox) from there. A “Save All” button would be nice to, to save all the listed resources into a folder structure matching that of the site. If there was something to indicate my site root folder, it could even automatically save things to the existing locations on my drive, asking to replace older files there.

• The cookie table is very nice. Now if only it was sortable by clicking on the headings. To be able to edit the cookies (including value, domain, path, expires, etc.) in place with tabbing between fields would also be great.


Paul Barry on October 30, 2009 at 3:53 pm  #

Is there a way to get the complete source for the event listener? I can see the beginning of it, but it’s cut off with an ellipse…


Michael Aufreiter on October 30, 2009 at 4:59 pm  #

Just downloaded the nightly (for Mac).

Pretty cool so far! Just one thing…

If I enter some text in form fields, no matter which key I press, the browser scrolls down. That’s quite annoying. It happens only when the inspector is docked to the main window. Am I the only one experiencing that?


Around the web | on November 1, 2009 at 9:44 pm  #

[…] BogoJoker – Improving the Web Inspector – This thing looks almost useable now. […]


Robby Russell on November 2, 2009 at 10:31 am  #

Last week, our team was recording episode 2 of the Planet Argon Podcast and my colleague, Carlos Rodriguez, mentioned this post and some of the upcoming improvements. I’m quite fond of the HEX additions as I don’t speak RGB. ;-)

In Episode 2 of our podcast, we discussed the pros and cons of Web Inspector, Firebug, and DebugBar for debugging HTML, CSS, and JavaScript. You can listen to that here:



Michael Kozakewich on November 2, 2009 at 3:17 pm  #

I did a whole bunch file-moving between the new Webkit inspector and Chrome’s inspector. Copying the new inspector over just gives me a white screen, and it seems every file that holds the new functionality just ruins the Chrome inspector. It’s impossible to get it working without diving into the code and finding what Chrome does differently than Webkit.

So… I guess Chrome users are stuck waiting for Google to catch up.


Dion on November 2, 2009 at 3:56 pm  #

Joseph, Excellent work on the improvements.

I have a request which has been bothering me ever since I started using the web inspector (I don’t understand it’s not implemented yet):

The web inspector can be fired up using the keyboard shortcut alt-command-I. Unfortunately it cannot be turned of with the same keyboard shortcut alt-command-I. It can get quite tedious sometimes having to move the mouse to the close button and remove the inspector in a window while developing.

Hopefully you can implement the on/off toggle just like there is an on/off toggle for the ‘view->show statusbar command-/’.

Thanks and thanks for the improvements.


Ajaxian » Web Inspector gets major improvements on November 3, 2009 at 6:22 am  #

[…] Joseph Pecoraro has made some major improvements to Web Inspector. […]


Web Inspector gets major improvements | Buddy's Blog on November 3, 2009 at 6:30 am  #

[…] Joseph Pecoraro has made some major improvements to Web Inspector. […]

Add a Comment