Google Chrome as a development tool
by AndyMac

Chrome, the semi-new browser developed by Google, is a pretty great browser.

• It’s compliant with web standards far more than IE or Safari
• It’s fast (page loads actually do seem faster)
• It’s got a small footprint (though that means some searching to learn how to do things like look at your history)
• The Omnibar (search, bookmarks, url, all in one!)
• Synchronize looks, bookmarks, etc across multiple systems
• It doesn’t crash (websites might bring down your tab, but not your browser)
• Incognito … you can browse sites anonymously much more easily

So you may not need a much better reason to use Chrome, but as a developer, there’s a bunch more reasons, and most of them are in the “Inspect Element” selection.

To get to this selection, just right click anywhere on the page you’re in, and select “Inspect Element”. Alternately, you can click on your settings button (the wrench) and go to Tools->Developer Tools. This brings you to a very powerful view:

What you can do here, is look at any css / html element on the page. You can see where it derives its attributes from, and even cooler, you can actually change the values on the fly (double click on the value and change it) to see what a change might do to your page.

This alone would be an invaluable tool in web development. We sure know that the “cascading” part of the Cascading Style Sheet can get pretty hairy from time to time. Chrome, however, has more to offer.

Much like Firefox and IE, there’s built in script testing and a console for viewing errors and logs, but here we also have a Resources tab and a Network tab.

In the Resources tab, you can actually see the files being used on this page, their sizes, and if there’s any problems to report!

So on this image, we’re able to see the image dimensions, the file size and type, and the name. We can use this to make sure we’re loading thumbnails rather than full size pictures, or to see what the largest bandwidth hog on this page is going to be.

You can also see the css files that have potential errors, look at them, and correct those errors!

But perhaps most powerful in testing is the Network tab:

This shows us what loaded, in what order, the time it took to load, when it loaded relative to everything else, and beyond that … it tells us how long it took to connect (request the item), how long it took to process it (in the case of a server side script), and how long to retrieve (download) it.

For instance, our index.php, a server side script, took almost no time to connect (because we were already connected in this case), but took 476ms to process, and 180ms to download. Now, that’s normally a bit long (not many people outside web developers would think something less than a second is too long), but this is the index.php for a Content Management System, so it can be a touch bloated.

So there you have it! Some great tools you can use inside of Google’s Chrome browser to help you build stable, fast, error-free websites!