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!

63 Responses

1

Web Inspector gets major improvements | Programming Blog on November 3, 2009 at 7:09 am  #

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

2

Mario on November 3, 2009 at 11:45 am  #

Thank you very much!! If you add the abilities of saving the modified or updated DOM, JS and CSS you just have changed and improved many developers workflow by far!!

Regards

3

Web Inspector gets major improvements on November 4, 2009 at 9:23 am  #

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

4

Rowan on November 4, 2009 at 9:29 am  #

Joseph,

Great work! There always was a cumbersome ability to add more styles, by editing an existing style – if one existed! – and adding more after a semicolon, but the new toggle is much nicer. I’d love to still be able to edit a class or other selector more easily though – any chance of getting something like your nifty mouse-over editable new attributes within a selector as well?

Two other glitches which irritate me no end:
1) Links in the inspector aren’t functional. Fine if I can’t click them, as that makes sense in the “editor” type behaviour, but if I right click on a link in the Elements or Styles views and get a proper submenu – which I do! – I’d hope “Open Link” and “Open Link in New Window” could be made to work.
2) If the inspector is open in docked mode, interaction within the webkit content window – typing text into an input, using a menu, selecting text – causes it to frantically scroll downwards.

Excellent work on the listeners and cookies – that’s superb. And that gives the nice sideeffect that we can empty sessions now! Looking forward to safe 4.1 now :)

5

sangpire on November 4, 2009 at 9:53 am  #

Wow! It’s awesome. Thanke you!

6

Web Inspector gets major improvements | Guilda Blog on November 5, 2009 at 10:06 am  #

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

7

Max’ Lesestoff zum Wochenende | PHP hates me – Der PHP Blog on November 7, 2009 at 1:00 am  #

[…] reduce. It also acts as a 2-minute CouchDB tutorial. No documents were harmed in this process. BogoJoker ยป Improving the Web Inspector seehr, seehr coole erweiterungen des webinspectors vom Webkit. SlickMap CSS โ€” A Visual […]

8

Web Inspector gets major improvements – Wasif Hafeez on November 14, 2009 at 5:40 am  #

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

9

Joseph Pecoraro on November 18, 2009 at 1:36 am  #

Thanks everyone for all of the comments. I have replied directly to many of you with links to bug reports that you can follow if you mentioned you desired certain features or ran into certain problems. I really appreciate the feedback and enthusiasm.

Thank You!

10

Chadwick Wood on March 23, 2010 at 7:29 pm  #

Has any progress been made with regard to being able to export the CSS changes made via the Inspector? That would really help it be a more effective in-page design tool!

11

anonymouse on September 28, 2011 at 5:09 am  #

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

12

Improving the Web Inspector | Web Team on October 17, 2012 at 1:46 pm  #

[…] Bogojoker: Webkit developer adds new features to Safari’s Inspector: […]

Add a Comment

search