Safari Web Inspector

I use Safari as my main browser, but I always keep Firefox running as well because of the superior web development tools that are available for it. Safari is a bit lacking in that respect, though there are some options. However, the WebKit team are about to change that by Introducing the Web Inspector:

The Web Inspector lets you browse the live DOM hierarchy in a compact HUD style window, catering to the needs of web developers and WebKit hackers alike.

The Web Inspector highlights the node on the page as it is selected in the hierarchy. You can also search for nodes by node name, id and CSS class name.

To try the Web Inspector out you can download a WebKit Nightly Build, load a page you want to inspect, right click on the element to inspect, and select “Inspect Element”. This brings up the Web Inspector window (which in my opinion should be completely opaque, so I would like to be able to adjust the transparency). You can then browse the DOM tree and select any element you want more info about. The selected element will also be outlined on the page, complete with a very Web 2.0 fade-out effect for those of you like that stuff. Very nice, and very useful for debugging purposes.

There is more to do before this matches the fantastic tools available for Firefox, but this looks really promising.

Posted on January 18, 2006 in Browsers, Quicklinks

Comments

  1. Just in case that some of the readers haven’t heard yet, there’s a nice toolbar available for Internet Explorer as well (not that I advise to run it as a default browser):

    Internet Explorer Developer Toolbar

  2. January 18, 2006 by Christopher Pastore

    I just use the Safari WebDev Addition, does everything I need.

  3. It is a pretty cool tool.. love the pro-look. But while on the topic of Safari you have an add to backbase: http://www.backbase.com/go/ and guess what? They don’t support Safari… how silly is that?

  4. January 18, 2006 by Roger Johansson (Author comment)

    Christopher: I gave that a try but didn’t really like it. But it was a couple of months or so ago, so I’ll take another look at it.

    Jesse: Yeah I’ve noticed that. Pretty silly for a company like that to not support Safari. Guess they didn’t read Safari matters - support it or lose credibility.

  5. January 18, 2006 by Ingo Chao

    which in my opinion should be completely opaque, so I would like to be able to adjust the transparency

    You can adjust it by setting the background-color: rgba() value in the “inspector.css” file.

  6. Jesse: A bug report is in the WebKit bug system about Backbase not supporting Safari. It has been marked as HitList, which means:

    This bug is in the Top 10 Safari Compatibility Bugs Hitlist

  7. Mark: Thanks for that… there are a couple of potentially annoying Safari bugs in there. I just haven’t done enough AJAX to find them.

    I still think the backbase site should at least work in Safari and not spit out errors. Just because a browser may not support your style of JS doesn’t mean you give it a broken page.

  8. I downloaded the webkit and it seems to do a great job. I think i would use Safari all the time over FireFox if it had a tabbed interface. Is anyone aware of such a plugin? let me know.

  9. January 20, 2006 by Roger Johansson (Author comment)

    Dennis: Safari has tabs. Go to Preferences > Tabs and check “Enable Tabbed Browsing”.

  10. Oops, it required me running 10.4 to use the Nightly Build WebKit. Sigh..

  11. February 28, 2006 by nazimba

    is there anyway of getting webkit up and running without osx 10.4 ? running 10.3.9 with safari 1.3.2 (v312.5)

  12. Only a little type mistake:

    I use Safari as my main browser, but I always keep Firefox running as well becuase of the superior

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.