Pick of the Week - Nov 10 [Show all picks]
Path Finder 5 - A feature-laden Finder replacement
Submit Hint Search The Forums LinksStatsPollsFAQHeadlinesRSS
12,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 0.00 / 5
  • 1
  • 2
  • 3
  • 4
  • 5
  (0 votes cast)
 
[8,415 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 whomever posted them. This site is not responsible for what they say.
Without enabling debug menu
Authored by: A. Square on Tue, Nov 6 2007 at 8:07AM PST
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 Tue, Nov 6 2007 at 12:49PM PST
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 Fri, Nov 16 2007 at 9:26PM PST
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 Sun, Nov 25 2007 at 4:37AM PST
It works the same in Tiger.
It's definitely not 10.5 only hint.

[ Reply to This | # ]