Google's free Chrome browser incldes a powerful set of Developer Tools that are extremely well suited to helping you troubleshoot and modify your site.
Get Chrome
Getting Google Chrome is a piece of cake. Just navigate to Google's Chome page and click on the "Download Chrome" link. Follow the install instructions and you should be up and running in minutes.
Activiate the Developer Tools
In Chome you can enable the Developer Tools windows a few different ways...
- Click on the wrench icon in the upper right corner of the screen and select Tools > Developer Tools
- Just hold down the Control, Shift, and I keys
- Right click on any element (a link, image, blank space, whatever) on any site and select "Inspect Element". The Developer Tools screen will open up and highlight the page code repsonible for that part of the site.
What Can the Developer Tools Do?
The Developer Tools are a collection of utilities that appear in a window at the bottom of your Chrome screen. There are a series of tabs in this screen and each will give you insight to something different.
- Elements - See all the raw HTML and CSS. Hover over a line of code and see that portion of the site highlighted in realtime.
- Resources - Get a list of all the different sources (JS, Fonts, DBs, etc.) that contribute to a site.
- Network - Gives you a list of where every element of a website comes from and how quickly it gets there.
- Sources - Look inside the JavaScript that powers the page and have access to a debugger
- Timeline - See how quickly the Chrome browser processes different elements of a site
- Profiles - Analyze the spreed of JavaScript processing
- Audits - Run an analysis of your site and see what Google recommends to improve performance
- Console - A full console for injecting JS commands, looking for failed JS, and more
