This Cyber Monday Envato Tuts+ courses will be reduced to just $3. Don't miss out.
Check out Chrome 4's great new features for developers, such as cross-platform support, awesome web inspector integration, and handy new extensions. It's becoming more and more difficult to deny Chrome the title as the new browser for web developers. If it's not quite there yet, it will be soon!
Lucky for us, the Google folks have been working hard to make Chrome cross-platform, integrate WebKit’s fantastic Web Inspector, and add extensions, making Chrome 4 an amazingly useful tool for web development. In this tutorial, I’ll demonstrate some of the features that make Chrome 4 a great addition to the web developer utility belt.
Downloading Chrome 4
As of January 25, Chrome 4 has been officially released as stable for Windows. Mac and Linux users, however, we have to be a bit more brave in order to experience all that Chrome 4 has to offer. Mac users need to download the "dev" version, and Linux users the "beta" version, and it's highly worth it! Check out the following links to get a copy of Chrome for your operating system that supports everything we'll discuss in this article:
Web Inspector (aka Developer Tools)
Accessing the Web Inspector/Developer Tools
In addition to Chrome 4, the Web Inspector has been in action for a while from within previous versions of Chrome and Safari, although it’s a bit hidden. To access the Web Inspector in various browsers:
- Select “Edit > Preferences” (Windows) or “Safari > Preferences” (Mac)
- Select the “Advanced” tab
- Check “Show Develop Menu in menu bar”
- A new menu item, “Develop,” will appear
- Select “Develop > Show Web Inspector”
Chrome 3 (Windows only)
- Select the Wrench
- Select Developer
- Windows / Linux: Select the Page Icon > Developer > Developer Tools
- Mac: Select View > Developer > Developer Tools
Finally, I should note that the Elements panel allows for much more than simple inspection. You can modify and add styles, edit html, and in the latest versions, view event listeners attached to a selected DOM element. These features can all come in very handy when you’re dealing with little quirks that you can’t quite figure out.
- A graph of the time it takes to download each component
- A graph showing the size of the various components
- A way to sort the requests by type, e.g. Documents, Stylesheets, Images, etc.
- Image previews with dimensions, file size, and MIME type displayed below
- Request and Response Headers
- XML HTTP Request (XHR) information
An elegant tool that allows for easy inspection of page speed, the Resources tab can aid you in identifying and squashing performance bottlenecks. Give it a try and see where your page is too fat, then slim down your chunky images and code to provide a better experience for your users!
A complete overview of the Web Inspector/Developer Tools could easily be a tutorial on it’s own, but we have more ground to cover! I highly recommend checking out the following resources to learn more:
- Video demos of the Developer Tools from the Google folks themselves hosted at the Chromium Projects Wiki!
- A step by step walk through of the Developer Tools, also available from the Chromium Wiki
- A rundown of the latest Web Inspector Features from the Surfin Safari blog (thanks goes out to Timothy Hatcher, one of the Web Inspector developers, for the link!)
Web Developers often need to ensure that their designs work at a variety of resolutions. Resolution Test allows developers to efficiently resize their browser window to a number of common resolutions for quick and easy testing. The latest version even allows you to open multiple windows at different resolutions with only a couple of clicks. Resolution Test is fantastic for making sure your target audience is seeing the page you want them to see.
There are occasions when its necessary not only to grab a screenshot of the current visible portion of a website, but a screenshot of the whole page. For example, you may want to print a full page for peer critical review or to demonstrate in your portfolio. I formerly used a Desktop tool for this, but now Webpage ScreenShot does a nice job of capturing full-page screenshots in a few clicks.
Write a Plus Tutorial
Please note that actual compensation will be dependent upon the quality of the final tutorial and screencast.