Submit Hint Search The Forums LinksStatsPollsHeadlinesRSS
14,000 hints and counting!

10.5: Use Safari's new and improved Web Inspector Web Browsers
The web inspector that came with the Safari 3 Beta in Tiger has been given a total overhaul in Leopard. The inspector now does so much more:
  • Syntax highlighting.
  • The currently selected element in the Inspector is highlighted continuously on the web page unlike the simple red outline that would appear for a few seconds in the Beta inspector.
  • All images, scripts and external resources used by the page are grouped and listed on the left.
  • Implicit and explicit CSS styles, metrics and JS properties are provided on the right of the inspector.
  • The console is included in the bottom left of the window and shows JS errors etc. Before, the console was only accessible through the hidden Debug menu.
  • The Network functionality, just below Console, will prove to be very useful! This section provides detailed loading times and and resource sizes to help you streamline your web application!
  • And the inspector can nestle nicely in the bottom of your current browser window -- just click the small icon that's second from the left at the bottom of the inspector window to toggle this mode.
Now I can use Safari for all my development rather than pining for Firebug in Firefox!

[robg adds: I believe the only way to use the inspector is to first enable the Debug menu. Once you've done that, you can then use Debug » Show Web Inspector to view the inspector. You'll also get a new Inspect Element contextual menu entry, which is another way to activate the inspector.]
    •    
  • Currently 2.17 / 5
  • 1
  • 2
  • 3
  • 4
  • 5
  (6 votes cast)
 
[13,433 views]  

10.5: Use Safari's new and improved Web Inspector | 4 comments | Create New Account
Click here to return to the '10.5: Use Safari's new and improved Web Inspector' hint
The following comments are owned by whoever posted them. This site is not responsible for what they say.
Without enabling debug menu
Authored by: A. Square on Nov 06, '07 08:07:16AM
You can also enable just the "Inspect Element" contextual menu (without turning on the debug menu) using the following command in Terminal:

defaults write com.apple.Safari WebKitDeveloperExtras -bool true
And restarting Safari. Now why can't they have the same context-sensitive colouring in the "view source" window? Or, better yet, just replace "view source" with the web inspector?

[ Reply to This | # ]
"Inspector" also available in OmniWeb 5.6
Authored by: billclinton on Nov 06, '07 12:49:42PM

The Inspector is also available in OmniWeb 5.6 by Control-click.



[ Reply to This | # ]
10.5: Use Safari's new and improved Web Inspector
Authored by: jibberia on Nov 16, '07 09:26:46PM
It's not quite as good as firebug. At (very quick) first glance:
- no js console
- no way to change the style of elements live (best feature of firebug)
- hmm... generally no live editing :(

That said - it's a major start. Pretty! (though I'm not a fan of the non-monospaced font) BIG Thanks, webkit guys!

PS For those who don't know, the webkit / safari / etc. guys keep a blog: http://webkit.org/blog/

[ Reply to This | # ]
10.4: Use Safari's new and improved Web Inspector
Authored by: vsopal on Nov 25, '07 04:37:48AM

It works the same in Tiger.
It's definitely not 10.5 only hint.



[ Reply to This | # ]