News, info, and opinion by Mac users, for Mac users.

June 12, 2007

updates

Safari 3.0 introduces the real Web Inspector

Posted Jun. 12, ’07, 11:51 AM PT by Dan Moren
Category | Software » Updates

webinspector.jpgI did a quick look at some of Safari 3.0’s features yesterday, but a few slipped through my net. One reader reminded me about Safari’s resizeable textareas, which is great for anybody who spends time writing a lot of text in web forms. Just grab the bottom right corner of the textarea, and resize it like a window (give it a try on our comments form below; it’s pretty spiffy).

Another feature caught me by surprise this morning, as I control-clicked on a link to copy it and noticed an option I hadn’t seen before: “Inspect Element.” Choosing this will summon Safari’s new Web Inspector, a sleek hovering black panel that exposes the underbelly (seedy or otherwise) of the websites you’re browsing. You’ll automatically jump to the element that you’ve selected, which will be briefly outlined in red (it slowly fades away, which is pretty slick). Via the Web Inspector, you can traverse the page’s Document Object Model (DOM), search for elements, and view all sorts of information useful mainly to web developers.

This isn’t 100% new: it’s long been in Firefox and some other browsers, and this particular function was rolled into WebKit back in January. But it’s now in Safari proper, which I think will please many a Mac web developer.

Update: As several commenters remind me, you need to have Safari’s Debug menu enabled for this to work (I had enabled it a long time ago, and forgotten). To do so, enter the following command in the Terminal: defaults write com.apple.Safari IncludeDebugMenu 1 and restart Safari.


7 Comments

RossGGG said:

Hmm, I'm running Safari 3.0 right now and I don't seem to have this option available... is there a new build or something?

June 12, 2007 12:12 PM
Margaret Brock said:

I have downloaded and installed the new Safari Version 3.0 (522.11) and there is now "web inspector" available to me. When I ctrl click on an element, it does not appear in the menu as you describe in your post June 12.

I don't have web-kit (would I know if I did?)

June 12, 2007 12:37 PM
Andrew said:

It's not available in mine either. You sure you're using Safari 3.0 and not WebKit?

June 12, 2007 12:55 PM
Tamer said:

In order to see this feature, you have to have Safari's debug menu enabled. To do that, you'll need to enter, "defaults write com.apple.Safari IncludeDebugMenu 1" into a terminal prompt and restart Safari.

June 12, 2007 1:10 PM
Paul said:

You need to turn on the Safari debug menu before this is available. Either type in Terminal:
defaults write com.apple.Safari IncludeDebugMenu 1

Or in Windows modify your Safari Preferences.plist by adding the lines:
IncludeDebugMenu

That second one might work in OS X but I had already run the above mentioned Terminal command and I can't be bothered disabling it again to try the Preferences.plist option.

I really don't know why Apple doesn't provide an easy way of enabling this. Even when I'm not doing web dev work, I sometime want to check errors in the Javascript console.

June 12, 2007 1:16 PM
Paul said:

The formatting for the Preferences.plist was lost - see this Macrumors post for full details:
http://forums.macrumors.com/showthread.php?p=3742140#post3742140

June 12, 2007 1:38 PM
Paul Author Profile Page said:

One more thing I should mention about enabling the Debug menu in Windows Safari - it doesn't provide an inspector. Perhaps that will come later.

June 12, 2007 1:40 PM

Leave a comment

 



Visit other IDG sites: