The Basics of Safari's Web Inspector
When I first became interested in web design, Firefox was the browser pushing web standards forward. And as a Windows user, I was very happy to take advantage of something new and fresh. And one of the best parts of using Firefox was Firebug.
This article covers basic functionality and is targeted to the novice designer/developer.
Once I made the switch to OS X, my Firefox usage died over time (as did it's relevance). I've dabbled with Chrome from time to time, but for the most part, I've been more than happy with Safari as my primary browser. And in the same vein as Firebug, I've grown to love the Safari Web Inspector. Here's why.
The Develop menu comes with a fair number of available functions. One of my favourites is the ability to change the user agent while viewing a page. This is helpful when troubleshooting how a site/page is working on a particular device or browser.
A good example came last week when I launched a landing page for Idea Cafe. I discovered that the subscribe button was not working on the iPad. A quick check of the site on my desktop with the user agent set to Safari iOS 5.1 - iPad showed this to be true. It's not going to replace proper browser testing, but it is handy in a pinch, especially for mobile testing.
Inspect Connected Devices
Have you ever looked at a site on your iPhone or iPad and had the desire to have the web inspector available? The next feature builds on the functionality. You have the ability to inspect a page on a connected iOS device; all that is required is to connect the device via a cable, then the Develop menu will change accordingly.
This can be triggered within the inspector window by clicking the timeline icon (the stopwatch), then reloading the page. Or you can do it directly from the Develop menu in the menubar, then reloading the page.
Modify or Add on the Fly
The features above are ones I've personally come across over time. But the basics of the inspector should be mentioned. You are able to inspect any specific element on a page and see the properties applied to it.
In addition, you can edit the styles to see how different property values would affect an element.
As well, you can directly edit the HTML itself and see how a change would affect your layout and design. This does not change the actual HTML in the destination file, just what Safari has downloaded and rendered.
Experienced developers make use of the web inspector and similar tools every day. If you're just getting started in this field, poke around. When you find a site you dig, open up the web inspector and start poking around.
And if you have some features of the web inspector that weren't covered here, let me know.&