10.5: Use Safari's new and improved Web Inspector
Nov 06, '07 07:30:08AM
Contributed by: jamesconroyfinn
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.]
Comments (4)
Mac OS X Hints
http://hints.macworld.com/article.php?story=20071028040012452