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.
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
- to capture errors and display them in a useful format
- easy to log useful information like variable values
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.
- 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.