Surfin' Safari

Web Inspector Update

Posted by Adam Roben on Thursday, December 6th, 2007 at 12:55 pm

Inspect Element context menuAs Maciej said, web developer tools are a big new feature of WebKit 3. Since we first introduced the new Web Inspector back in June, Tim Hatcher (xenon in #webkit) has been spearheading the effort to make the Web Inspector an even better tool for web developers, and I wanted to give an update on the progress we’ve made so far. If you’ve never used the Inspector before, you should follow the instructions to enable the Web Inspector on the WebKit wiki.

New Features

Inline CSS Editing
Web Inspector Inline CSS EditingThis is the biggest new feature of the Inspector. You can now edit CSS styles simply by double-clicking them in the Inspector’s Styles sidebar. This is really handy for tweaking the look of your site live in the browser.
Support for Downloadable Fonts
When you visit a site that uses downloadable fonts via @font-face rules, the Inspector will show you all the fonts downloaded by WebKit in the Resources sidebar. Each font has a small icon preview in the sidebar and a more complete preview when you select it.
Web Inspector Downloadable Fonts Support
Database Browser
WebKit now supports the HTML5 SQL storage API, and the Inspector has full support for this new feature. You can execute SQL queries right in the Inspector and see the results live, or browse through all the databases and tables a website uses.
Web Inspector's Database Browser
Support for New CSS Properties
The Inspector shows the new CSS transform and animation properties in its Styles sidebar. You can even trigger animations on the fly by using the Inspector’s inline CSS editing!
Multi-Platform Support
The Inspector was designed from the beginning to be easily implementable on many platforms, and has worked on both Mac OS X and Microsoft Windows from the very beginning. Recently, Holger Freyther has stepped up and implemented the Web Inspector on Qt.
Usability Improvements
In addition to all these big features, we’ve spent some time fixing some of the little things that make the Inspector that much easier to use. The list of usability improvements includes resizable sidebars, resizable search area, size-to-fit DOM breadcrumbs, and better selection and copying behavior. One of my favorite features in this area is that when you Copy while a node is selected in the DOM view, the serialized source for that node and its children are put on the clipboard. This makes it incredibly easy to take a portion of a live website (complete with any modifications that have been made to the DOM) and modify it in a text editor.

You can try out all these new features today by running a nightly WebKit build.

Future Work

There’s still a lot of work to be done on the Inspector, and we’d love to have your help. Most of the Web Inspector is written in HTML, JavaScript, and CSS, so it’s easy to get started making changes and improvements. There are some really interesting tasks in the list of Web Inspector bugs and enhancements, and the WebKit contributors in the #webkit chat room are pretty much always available to provide help and advice.

16 Responses to “Web Inspector Update”

  1. Oliver Says:

    Woo!!! CSS Editing FTW!!!

  2. squareman Says:

    Nice. Very nice.

    By the way, not exactly intuitive, but it is possible to add new style properties by adding them after the semi-colon!

  3. MySchizoBuddy Says:

    How do you install the new web inspector in safari 3 instead of webkit 3

  4. Adam Roben Says:

    @MySchizoBuddy:

    The Web Inspector is included with Safari 3. Instructions to enable the Web Inspector are linked in the first paragraph of the blog post.

  5. MySchizoBuddy Says:

    yes i have enabled it in safari 3 but i cannot do inline css edits, Do i have to download and install the new webkit to get these new features. and will these new features work in safari 3 as well.

  6. Mark Rowe Says:

    As mentioned in the blog post:

    You can try out all these new features today by running a nightly WebKit build.

  7. 0xced Says:

    The Web Inspector is great. I would like to see an Xpath field performing an Xpath query and selecting the results, that would be very useful.

  8. Mark Rowe Says:

    Feature requests should be filed in Bugzilla at http://bugs.webkit.org/.

  9. Roberto Says:

    Are those features Leopard only?
    I have the lastest WebKit nightly, and they aren’t working

  10. Adam Roben Says:

    @0xced:

    You can already type XPath queries right into the Inspector’s search field!

  11. Adam Roben Says:

    @Roberto:

    The features should work on Tiger, Leopard, Windows, and Qt. Please file bugs at http://bugs.webkit.org/ for any issues you see. Thanks!

  12. mac_ Says:

    Inline CSS editing sounds great, but like others have posted, it doesn’t appear to work. I’m using r28505 on Tiger and Leopard.

  13. Adam Roben Says:

    @mac_:

    Please file a bug at http://bugs.webkit.org/

  14. mac_ Says:

    @Adam Roben:

    sure, filed here:

    http://bugs.webkit.org/show_bug.cgi?id=16350

    Sorry for the lack of information there, it just doesn’t appear to be implemented. I would have filed a bug sooner if I had more precise information (i.e., it works in this case, but not this other case), but all that I can guess is that I’m doing something wrong because it just doesn’t appear to work at all. Has anyone else gotten this working? If so, what build were you using?

  15. dpouliot Says:

    I have finally gotten this to work. I’ll walk through what I did. 1st, downloaded Jan 3 build. Didn’t work. Went to web inspector wiki, noticed a bit about double clicking DOM nodes to drill in. I’ve never tried that, so I decided to try it. Then I tried editing a style sheet and it worked. So I thought that was it. Tried to reproduce my success. Didn’t work. Bag the DOM issue. Then tried inspecting the text of the previous post on this page. Most styles wouldn’t edit, but some would. look for “.commentlist p”, then try to edit font-weight:normal. Clicked 3 times slowly on “normal”. Eventually gave me an edit box! Even allowed me to change to font-family: zapfino; On second attempt (third?) it looks like you can’t edit anything in the “Computed Style” box, which I suppose makes sense. Yep, that appears to be it! Sweet.

  16. dpouliot Says:

    looks like I got too cocky. Tried doing this trick on another page… didn’t work. Come back to this page to reproduce my success, doesn’t work. Grrrr. So this feature is definitely flaky. Will be awesome when it is fully baked.