brian on 2008.03.18
at 06:46 pm
If you download the latest official build of Apple’s Safari web browser, you’ll gain access to it’s new developer menu.
Previously, you had access to a “Debug” menu, which gave you many options, mostly for WebKit.org’s use in debugging the browser. You had to set a hidden, command-line preference to access it. However, the latest build, the feature is available in the Advanced tab of the application preferences.
The new Develop menu has (as far as I can tell) all the same functionality of the old Debug menu for web developers, but show much more succinctly. The big feature is the Web Inspector.
Clicking “Develop > Show Web Inspector” brings up a an attractive window that allows you to inspect in part of the web page you’re viewing. From Safari’s Help menu:
It lets you view and search the page’s source code, Cascading Style Sheet (CSS) information, DOM trees, visual DOM metrics, and DOM properties. The Web Inspector also contains the error console and network timeline.
You optionally have the choice of attaching the inspector to the bottom of your browser window, like Firebug for Mozilla Firefox. The bottom left corner of the Inspector window contains a toggle button to attach/detach the Inspector.
To use, the simplest thing to do is Right-click (or ctrl+click) the element in the web browser window that you would like to inspect. This will bring up your Inspector, with the element highlighted in the code. Additionally, Safari applies a nice dark grey-screen filter on the parts of the page you’re not inspecting. If you use the arrow keys to move up and down the code, or simply click on another code snippet in the Inspector, the highlight back on the rendered page adjusts in real time.
Sadly, for now, it appears that you cannot live edit, as you can in Firebug. If I can find a way to do this, I’ll update this blog entry.
Comments have been automatically disabled to curtail spam.