For a long time, Mozilla Firefox has been the go-to browser for web developers. With the Web Developer Toolbar and the Firebug extension, Firefox was an essential part of the web developer’s toolbox. But if you look in the rear-view mirror, you’ll see Google Chrome racing fast and in some areas blowing past Firefox. Why do I think web developers should use Chrome as their go-to browser? Let me explain.
Developers who use Firefox have found that Firebug was their shining light, it brought a solid debugging console, HTML and CSS manipulation, and JavaScript profiling to name a few things. The team behind the WebKit foundation (upon which Chrome is built), have been working on a set of tools called the Web Inspector. And with the release of Chrome 4, the Web Inspector has been labeled “Developer Tools”.
To get to the Developer Tools in Chrome:
Windows & Linux users: Select the Page Icon -> Developer -> Developer Tools
Mac users: Select View -> Developer -> Developer Tools
JavaScript Console
If you have never worked with Firebug or a Web Inspector console before, then you are missing a great way to debug JavaScript. The console serves several functions:
- to capture errors and display them in a useful format
- allows the testing of short bits of JavaScript
- easy to log useful information like variable values
But the best part about using a JavaScript console like this one in Chrome is that it allows you to constantly evaluate the performance of a program and to make sure that variables are being calculated correctly.
Elements Panel
I love the ability to quickly view the HTML and CSS styling information of any particular element on a webpage. This Element panel gives a nicely formatted collapsible-tree-structure view of the DOM (Document Object Model), and easily allows for drilling down to the exact element you are looking for. Plus, when you are using Chrome, you can access this type of information by simply right-clicking on an item on the page and selecting “Inspect Element”. No need to open up the Developer Tools, it will automatically pop up the Elements panel to the exact location you selected. You can also modify and add styles, edit html and more from within this panel.
Resources
This is a really cool feature that Chrome provides for web developers. In a nutshell, the Resources tab provides a quick look at all the information that is being passed between your browser and the server. It covers everything from images to JavaScript to the actual file itself. It displays everything in an easy to read chart that highlights things like:
- a graph of how much time it takes to download each component on the page
- a graph that shows the size of each component on the page
- allows you to sort by file type (document, css, images, etc)
- provides image previews with dimensions, size, MIME type
- XML HTTP Request information
- Request and Response Headers
This can be a lifesaver when you are trying to improve the speed of the page. It can help you identify the resource and performance hogs on your page.
Taking full advantage of the Developer Tools inside Google Chrome can bring many benefits to your development process, but the best benefit is that a streamlined and well coded site (all of which Chrome’s Developer Tools can help with) will provide a better experience for your users.
Member’s Benefit: Available to WebDesign.com Members in the forums are several additional Chrome extensions (think Firefox plugins) that will add additional features and tools to your development process. We invite you to learn more about becoming a WebDesign.com member.
