A Guide to Using the Web Inspector in Safari

Ever since Safari 3, Apple has included an excellent feature in Safari called the “Web Inspector.” The Web Inspector is a surprisingly useful and practical debug tool that does not appear in Safari by default.

To launch and make use of the Web Inspector, one must enable Safari’s debug menu by running a simple Terminal command. We’ve discussed it in an earlier post, but here it is again:

defaults write com.apple.Safari IncludeDebugMenu 1

Once the Debug menu is enabled in Safari, you can access the Web Inspector via two methods. One way is to select “Debug” from the menu bar and then select “Show Web Inspector.” The other way is to Control-Click on any part of a web page and select “Inspect Element.”

The Web Inspector launches as a large window with two main boxes, one containing code and the other containing a list of documents, stylesheets, images, and scripts. The Web Inspector will pull as many of these items from the web page you are visiting as it can. For MacTips, it finds the document for the page, the document for our Digg This plug-in, a handful of stylesheets, a bunch of images, and a few scripts that the site utilizes.

Once the Web Inspector is launched, there are a couple of ways to make it appear how you’d like it to. By default, it appears as a separate window and shows the code with indentations and expanding tags. You can set it to appear in-line with your Safari window by pressing the button that is second-furthest form the left along the bottom of the Web Inspector, which is shown at right, and you can change the code view to straight-up text by clicking on the non-bullet point icon at the top of the window, which is shown below.

The main point of the Web Inspector is to allow you to “inspect” snippets of code, and it does it excellently. One great way to utilize this is to highlight any “element” in a web page–some text, an image, or anything at all–then Control-Click on it and select “Inspect Element.” This will bring the Web Inspector straight to that element in the code for the page, and allows you to do exactly what it says, to “inspect” the “element.”

For those of you who aren’t big fans of Safari, a similar tool can be found in Firefox by installing the Firebug add-on.

While the Web Inspector has a couple of bugs itself, most technical users of Safari should find it quite useful. Its features are seemingly endless; each time I use it I discover something new. If you have any interest in web development or debugging, I highly recommend you give Safari’s Web Inspector a look.