Tuesday, January 17th, 2006

Safari announces new Web Inspector

Category: Browsers, Utility

WebKit (the engine that powers Safari) now has a new DOM browser, Web Inspector.

You have been able to turn on the debug menu in Safari via:

% defaults write com.apple.Safari IncludeDebugMenu 1

and with this you can get a view of the current DOM in string form (think: view source NOW).

Web Inspector goes a step further, and it even looks cool (very Apple…. but is Black the new Black?)

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.

One of the unique features of the inspector is the ability to root the DOM hierarchy by double clicking a node to dig deeper. This lets you easily manage large nested pages and only focus on a particular sub-tree with minimal indentation.

Under the Style pane we show all the CSS rules that apply to the focused node. These rules are listed in cascade order with overridden properties striked-out—letting you truly see how cascading stylesheets affect the page layout. All shorthand properties have a disclosure-triangle to show and hide the expanded properties created by the shorthand.

So update your tree or download the nightly and give the new Web Inspector a try. The nightly always has the Web Inspector enabled. However, to enable the inspector for your own build, you will need to type the following in the Terminal once:

% defaults write com.apple.Safari WebKitDeveloperExtras -bool true

You will then see a new “Inspect Element� contextual menu item on any web page. This will open up the Web Inspector and refocus to the node under your cursor.

We have added a new “Web Inspector� component to Bugzilla to track any issues of feature requests you might have.

( via Thomas Fuchs )

Posted by Dion Almaer at 2:47 pm

3.7 rating from 15 votes


Comments feed TrackBack URI

Tried it out, and it’s beautiful. Wonderful tool!

Comment by ceejayoz — January 17, 2006

Link: Ajaxian » Safari announces new Web Inspector

Ajaxian » Safari announces new Web Inspector
Surfin’ Safari » Blog Archive » Introducing the Web Inspector

Trackback by Typemiss.net — January 18, 2006

Leave a comment

You must be logged in to post a comment.