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.
This was an add-on that enhanced the browser, allowing the user to monitor and tweak the HTML, CSS, and JavaScript that was used for a given web page. It was a fantastic tool to testing your designs, or learning from the designs of others.
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.
User agents
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.
Back to my example from last week. Once I realized that two bits of JavaScript were not working (Typekit & a Campaign Monitor subscribe button), I connected my iPad and used the inspector to see if the JS snippets were loaded and whether there were any errors. Being able to see that there were no errors was very helpful and allowed me to narrow down the possible cause of the problems and move on.
Timelines
One feature I like the most is the timeline, the ability to see how long it takes a page to load. The great part is that the web inspector breaks down the various components and shows the load time for each (Network requests, layout & rendering, JavaScript & events). In the age of mobile, every extra request and asset comes with a cost and this a great way to see where you can make improvements.
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.
