Inspect Element: It may save your life someday
When Firebug was introduced to the Firefox browser as a plugin, the art of debugging websites changed forever. All web developers worth their salt added Firebug to their arsenal of development tools. There wasn’t any real option before Firebug for editing HTML or CSS live in the browser and seeing immediate results. Nor was there a decent way to debug JavaScript at all. In both cases, a developer’s life during QA revolved around test, change, re-test, change again, re-test. Firebug changed all that.
As Safari became a thing (sort of, anyway) and more importantly, Google Chrome, the built-in alternative became the smarter choice. While Firebug still has its fans, I find the streamlined native support from Chrome for debugging HTML, CSS, JavaScript and more is the easiest way to go. It’s also worth mentioning that Firefox itself now has a built-in inspector (though truthfully I’ve not really used it). Below are the options I use on a day to day basis.
The Options
Elements
The default view and the one you may spend the most time in, Elements presents a tidy tree view of all the HTML mark-up on the page. The important difference between using Elements versus the browser’s native View Source functionality is that Elements takes into account changes made to the HTML with JavaScript. This is amazingly handy when debugging jQuery plugins and the like.
HTML can be edited directly (simply double-click an element to edit an attribute, or select Edit HTML from the context menu to get complete access to the element) and the DOM immediately refreshed. CSS classes are just as easily editable and the cascading nature of your style sheet revealed i.e. one can see which classes are overriding previous classes.
Resources
Presented in a simple tree, the entirely of a page’s dependencies is available to be inspected. You can see all the loaded images, custom font sets, contents of cookies and sessions (which can be deleted)
Network
The Network tab is one of the most powerful tabs in the Inspector. When selected and a page refreshed, the entire page load unveils itself in a results table, headed by the page name, the method (GET/POST), page status (invaluable for locating 500’s) and for those looking to optimise the speed of their website, the all-important size, time/latency and overall timeline values. The last column is fantastic for identifying how long your time to first byte takes, as well as judging how oversized some images on a page may be.
The real power of Network is revealed when you click on a page name and open up a view of its headers and responses – a godsend when debugging AJAX calls.
Sources
Presented in a similar view to the Resources tab, Sources is essentially Visual Studio for JavaScript. You can pause execution on breakpoints, add watch expressions and edit values live. Minified scripts can be expanded via the Pretty Print option. Breakpoints can even be set un-minified, externally hosted scripts – perfect for tracking where a value goes once you send it to the black hole of third party script that is malfunctioning.
Console
All errors and warnings end up in the console, but most handy is the ability to run arbitrary script and call functions manually. Very handy for testing new functionality without needing to wire up events.
I’ve barely scraped the surface of this handy tool (there are more tabs to be found in Timeline, Profiles and Audits – plus the various settings that can be changed including emulating other user agents, including mobile devices). I’ve found the best way to understand these things is to just press every button and try everything for yourself.
How do you access this great tool? Just hit F12!
