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.

element_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.

selectors

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!

colors

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.

dom_storage

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!
sorting

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.

nodelist

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!

Cookies

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.

cookies

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.

event_listeners

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.

css_syntax_highlight

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.

both_highlight


 

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!

search