Back in the days when I started making webpages, the only way to monitor your progress was a tedious routine of switching between the code editor and the browser, and reloading, reloading, reloading. Luckily nowadays, it’s really easy to check, edit and see the results just in your browser. For example, checking the “Develop menu” in the advanced preferences of Safari 4 enables interesting debugging features. In order have similar tools in Firefox, you have to install the Firebug plug-in. And in Google Chrome or Opera, these tools are available out-of-the-box. But which browser and code inspector should you choose?
Let’s first see what they offer. In any browser you can bring up the developer tools by right-clicking on any web page element and selecting “Inspect element”. In general, this will display a window at the bottom showing the HTML code of the page, with the highlighted element you clicked on. The right sidebar will display the properties of this element.
Safari 4 will show a blue highlight presenting the box model of the element, clearly displaying the margins, paddings and borders. Since Chrome uses the same WebKit browser engine as Safari, its code inspector is almost the same. Firebug uses blue and yellow styling, while Opera is the winner here, displaying all this plus horizontal and vertical lines to help positioning, plus enables highlighting of 2 elements at the same time.
All the browsers enable editing of HTML and CSS directly in the developer tools, by simply double-clicking on the properties. The results are visible instantly, so it’s easy to test various settings and apply the correct ones to your web page code.
A very important matter on the web is the speed of loading. If your page loads slowly, it’s more likely that your visitors will just get fed up and close it. Safari 4 has a very nice-looking tool visualizing the loading speed, showing both the total time taken, as well as times for different elements. iTunes users will recognize the familiar storage bar, which here shows what kind of content takes the most time, and space, on your page.
Firebug shows similar information with less style, but adds the HTTP status returned by the element. Unfortunately I couldn’t find a similar loading measurement in Opera, which is a shame, because it would be useful.
Another important matter related to page speed is its responsiveness i.e., whether loading, scripting and drawing (rendering) of content works quickly. You can monitor all this in real-time using Safari “Timeline” tab. You can see all the events associated to the page display while you move around it with your mouse and interact with the content. The “Net” tab in Firebug tries to provide similar information, however it doesn’t show the events and deep browser operations. Opera isn’t better than Firebug, and lacks the same functionality in its “Network” tab.
Chrome, which tools origin from Safari and the WebKit engine, add a nice feature named “Audits”. Using “Audits” you can analyze your page’s speed and get suggestions on to how to improve it. Firebug can have this functionality if you install an additional plugin called “Page Speed”.
Speeding up the website means speeding up your scripts. And if you work with scripts, the best thing to have is a debugger. All of the tools here have it. And all of them have the same problem of not un-compressing the JS code. Since some libraries are minified (meaning all the code is in a single line, with simplified function naming an other size optimizations), it’s really hard to read them, yet to debug, because you can only put a break point on a single line. However, with non-compressed scripts debugging is really nice. You can see the values of the variables as they change etc. Safari also gives you an additional option of popping up the contents of variables, even functions.
While developing you will often use cookies or local storage, the latter being the new feature of the much hyped HTML5, which let’s you create a database storage on your visitor’s browser. In order to easily see the contents of cookies or storage data, or delete them, check the “Storage” tab in Safari 4. You have everything there, displayed clearly and divided into sections. Opera has a nice feature that enables adding new cookies by hand. Unfortunately it seems that the basic download of Firebug doesn’t have that feature at all.
Some of the tools here have unique abilities. Take Opera for example, and its “Pixel Magnifier and Color Picker”. It’s basically a magnifying glass and color extractor for the web, however for a designer it’s a very handy tool to extract color, especially if your client tells you to “make him a website just like this one”. Firebug’s uniqueness is the possibility to extend it using plugins. There is a lot of them available on the Firebug’s page, and with them this tool definitely matches the feature set of i.e. Safari.
However, as you can see, Firebugs is no longer the holy grail of the web developer. Safari, my favorite, and Chrome, the new hot browser, are a well suited choice for any developer, and work very good out-of-the-box. Firebug, relying on Firefox plug-in architecture, can be extended into a very complex tool, however it doesn’t work so snappy and smoothly like the native inspectors of Safari, Chrome or Opera. Opera tries to win over the rest with innovative and helpful features, especially for designers (positioning lines, magnifying glass, color picker), however it seems to lack polishing in the basic set of tools (especially page speed monitoring).
My verdict is the following — you should use Safari tools if you are working on Mac, and Google Chrome tools if on a PC. Safari for Mac guarantees perfect integration with the operating system and high responsiveness, while Chrome does the same on a PC (on a Mac not so much).
And my general suggestion is that you should pick one of the tools described here in you web development. It greatly improves the quality of your work, makes problems easier and helps you finish projects quicker. Otherwise you’re just reloading, reloading and reloading.
Have you been using such tools in your web development already, and which ones? And if not, do you think they would have helped you? Please let us know in the comments.