Safari/WebKit has a new Web Inspector
One of the new things in the Safari 3 beta that I mentioned in Safari 3 beta impressions is that Safari now has a very useful developer tool called the Web Inspector.
The Web Inspector is opened by right-clicking and selecting “Inspect Element” from the contextual menu, and provides some of the features that the Firebug extension does for Firefox, but not nearly as advanced (yet). The Web Inspector is currently Mac-only as it is not available in the Safari 3 beta for Windows. But big changes are coming.
In recent WebKit nightly builds, both Mac and Windows versions have a brand new Web Inspector, which is very different from the old one. The new Web Inspector, as mentioned in Yet another one more thing… a new Web Inspector! at Surfin’ Safari:
- Has a completely redesigned interface
- Works inside third-party applications, not just Safari
- Is dockable to the inspected page
- Shows all resources included by the page, sorted into categories (documents, stylesheets, images, scripts, and other)
- Can search all text-based resources
- Has a console that show errors and warnings with live JavaScript evaluation
- Features a Network panel that shows loading time for each resource, and optionally HTTP request and response headers
- Displays syntax highlighted HTML
- Has inline JavaScript and HTML error reporting
Here’s what the Web Inspector looks like when viewing the DOM:
The Web Inspector’s network panel looks like this:
After playing around with it for a while, my impression is that though the Web Inspector still is not as feature rich as Firebug, the new version is a great improvement. If it had live editing of HTML and CSS and a few more of Firebug’s features, the Web Inspector would make Safari a great tool for Web developers.
- Previous post: A new phase of life
- Next post: Build Your Own Ruby on Rails Web Applications (Book review)
Information, sponsorship, and externals
About the author
Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.
Latest articles
- Validation statistics from Nikita the Spider Comments off
- An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
- Authentic Jobs API and Affiliates program Comments off
- The Authentic Jobs job listing service now has a public API and an affiliate program.
- What does Acid3 mean to you and me? Comments off
- Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
- Designing Web Navigation (Book review) Comments off
- Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
- DOMAssistant bundle for TextMate Comments off
- To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
- First impressions of Internet Explorer 8 Beta 1 Comments off
- My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.
Comments
How do you get to this web inspector? Can you access it through the Safari 3 beta (3.0.2) on OSX?
I have not been able to uncover the web inspector in Safari 3. My right click menu only has Reload, View Source, Save Page As... and Print Page....
I've been using WebKit nightlies to get that functionality, but I feel like my Safari 3 is missing something...
Damon: Right-click anywhere in the Safari viewport and choose "Inspect Element" from the contextual menu.
Tom: Hmm. Yeah, it seems like there is a problem, unless you are using the Windows version - the Web Inspector is not yet available in Safari for Windows, only in WebKit nightlies.
It's a great inspector. And since it can be attached to any WebKit based application, as Drosera can, I'd like to see those two get rolled into one (a la Firebug).
One knock I'll give it from a UI perspective is that it requires tons of real estate on my screen. The WebKit team touted the fact that it was no long HUD, but I kind of liked that (it allowed me to still see the underlying page). With this new inspector, if you have it pinned to the window, you can't give it more vertical space than the default. If you have it unpinned, it takes up so much room to read things, it obsures the page you're inspecting (especially on a laptop). The same complaint extends to the columns. They look like they're supposed to be resizable but they are not.
To be fair, it's the first release of it. It's already and expansion on the previous version. So I think it's fair to assume they'll continue to improve it.
You need to enable the Web Inspector by running this command in Terminal:
defaults write com.apple.Safari WebKitDeveloperExtras -bool trueAs far as I know, this should also be possible to enable in Windows by editing the .plist-file, adding a new name/value-pair to the dictionary.
Roger, the new Inspector is available in the Windows version as well. You might have to set the key Frode mentioned, but it's definitely there (though there are a few glitches). I believe the OS X nightlies set that key when they run but I'm not sure about the Windows ones.
Tom, the resize handle on the left sidebar works if you download the latest nightly.
Oops, I should learn to read. I misunderstood your comment, Roger - ignore me :)
Roger, how's the Web Inspector compared to the one of CSSEdit?
I'm sorry for asking, but I also can't seem to find it in Safari 3...
I totally love it! It helped me to move over from Firefox to Safari. Just hoping that they will soon release a feature, allowing us to edit css, html and javascript! Go Webkit!!!
To get the Web Inspector working for me (Safari 3.0.3 for Windows beta), I had to add:
to WebKitPreferences.plist, not Preferences.plist (which is where
IncludeDebugMenugoes).This was the source of some head scratching for me; hope it helps someone else.
yes, very helpful!! where ever did you find that?
Jeffery, thanks for your comment. It helped me get the Web Inspector to work.
Sorry, comments are closed for this post.