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!
Introduction
With quick load times, a snappy JavaScript engine, solid WebKit foundation, and big-name backing, Google Chrome has been gaining a respectable market share, even surpassing Safari to become the 3rd most popular browser in December. For developers, however, Firefox has been the sweetheart of many due to its ability to run on any operating system and because of its rich offering of web development add-ons, such as Firebug and the Web Developer Toolbar. But it’s important to test JavaScript in all browsers, and having a robust set of tools in each (including Internet Explorer), is precisely what developers need to make the most of their code.
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)
Now let’s get into the nitty gritty! In Firefox, Firebug is a godsend for developers, providing a debugging console, HTML & CSS manipulation, JavaScript profiling, and a whole lot of other goodness. The WebKit folks took notice and over the last couple of years have been perfecting a set of tools called the Web Inspector, which offers a similar set of features to Firebug. Within Chrome 4, the Web Inspector is labeled “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:
Safari 4
- 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
- Select JavaScript Console (the whole range of tools are hidden under this name)
Chrome 4
- Windows / Linux: Select the Page Icon > Developer > Developer Tools
- Mac: Select View > Developer > Developer Tools
JavaScript Console
If you haven’t worked with the Firebug or Web Inspector console, then you’re missing out on a great way to help debug JavaScript. The JavaScript console serves several important functions, such as capturing errors and presenting them in a useful format, testing short bits of JavaScript, and as a convenient place to log useful information like variable values and execution times. Practically speaking, I use this tool regularly to evaluate the performance of my programs and to ensure that certain variables are being calculated correctly.
Elements Panel
In addition to the JavaScript console, it’s always nice to have a tool that allows you to quickly view the HTML and style information of particular elements on the page. The Web Inspector Elements panel gives a tree-structure view of the Document Object Model (DOM), allowing you to drill down into the document to select an item of interest. You can also access the information of a certain object by right clicking on an item within the browser and selecting “Inspect Element.”
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.
Resources
The last feature I’d like to highlight within the Web Inspector/Developer Tools is the “Resources” tab. If you’ve worked with Firebug’s “Net” tab, then you’ll notice several similarities. Essentially, the Resources tab gives a breakdown of all the information that is exchanged between your browser and the server, from the images to the JavaScript to the document itself. It also shows a ton of handy information, such as:
- 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!
Further Reading
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!)
Extensions
Now, while I’ve always been blown away by the speed of Safari 4 and Chrome as compared to Firefox, they’ve both lacked a critical feature: add-ons. In Chrome 4, that all changes with the addition of “extensions.” You can add functionality to Chrome by downloading and installing extensions or by using the standard tools of the trade: HTML, CSS, and JavaScript, to write your own. Extensions can be downloaded from the Chrome Extensions Repository, and should be fairly simple to install. Already, a number of very compelling extensions have been created which aid web development, from quick validation to resolution testing. Let’s take a look at a few.
Speed Tracer
A web developer can never really be obsessed enough with performance, and the more tools that identify sluggish performance the better. That’s just where Speed Tracer, a Chrome extension developed by Google, comes into play. Speed Tracer takes the “Resources” panel to the next level by providing a visualization of the time it takes to execute low-level tasks, such as rendering CSS or parsing HTML and JavaScript. I’d highly recommend taking a look at a video demonstration of Speed Tracer put together by the folks at Google to get a better idea of how it can help you improve the performance of your applications.
Pendule
Moving from Firefox to Chrome, one extension everyone is going to look for is a replacement of the fantastic Web Developer Toolbar. For those who don’t know, the Web Developer Toolbar deals with the tasks Firebug wasn’t meant to handle, such as quick validation of HTML and CSS, the ability to quickly disable JavaScript or images, and a tool for checking links. Those functions are all handled with style by Pendule, which offers much of the core functionality of the Web Developer Toolbar (not quite all), while offering a few goodies of it’s own, such as a color picker.
Resolution Test
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.
Webpage ScreenShot
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.
Chrome Sniffer
Do you ever stumble upon a fantastic page and wonder, “what are they using to build this?” I do, and often find myself digging through the source code trying to figure out who the man behind the curtain is. While it is a useful training exercise, and a necessary one if you really want to know what’s going on, Chrome Sniffer can usually give you a snapshot of which JavaScript and PHP frameworks are in use for a particular page. For example, navigate to NetTuts and Chrome Sniffer informs us that it’s run on WordPress using Google Analytics and jQuery.
Conclusion
The future of web development continues to look brighter and brighter! While only a few years ago we had a limited set of tools for debugging JavaScript, tinkering with CSS, and viewing HTML, today we have a variety of powerful options. Now that Google Chrome has become cross platform, fully integrated the WebKit Web Inspector, and added extensions, it is a versatile tool for helping developers improve their own pages. I encourage all of you to download a copy for yourself and give it a shot to see if it can help you improve your pages, then come on back here and share your favorite plugins and tools with the rest of us!
Write a Plus Tutorial
Did you know that you can earn up to $600 for writing a PLUS tutorial and/or screencast for us? We’re looking for in depth and well-written tutorials on HTML, CSS, PHP, and JavaScript. If you’re of the ability, please contact Jeffrey at nettuts@tutsplus.com.
Please note that actual compensation will be dependent upon the quality of the final tutorial and screencast.
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Brian Egan
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
Rockstar WordPress Designer
Now updated for WordPress 3.0, this classic book on WordPress theming and design has sold over 3500 copies! Get yours now!
Top Selling
on Codecanyon
jQuery Lightbox Evolution only $12.00 
Events Calendar Pro - Wordpr ... only $30.00 
danmoore - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+ mobiletuts+Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
I am sticking with firefox for development, chrome needs to grow, we need to use it too for feedbacks.
Resolution test is awesome !
Nice writeup. Now the Google Chrome for Mac has extensions I think I will be switching Chrome to my default browser.
Been using Web Inspector on Safari as my main development platform, with occasional bounces into Firebug. Firefox just crashes too much and is too slow to be my main go-to, plus like someone else mentioned above Webkit > Gecko. The past month or so though I’ve found myself developing more and more in Chrome. If a full-featured Firebug ever makes its way into Chrome, FF may end up hardly ever getting opened.
I’ve been using Firefox for 5 years, and in that time, it’s only crashed three times (two of which were my fault). I test Alpha’s and Beta’s all the time, as well (I’m running developer preview alpha 2 right now). I’ve never had a problem with speed.
Firefox never ever crashed for me. And did you know Chrome is not available in a handful of countries? Isn’t that a major blow to openness and standards?
Google is a scary corporation with a lot of hidden agendas.
i use the chrome on mac, pretty good, it support more css3 than safari 4, but the render such as text-shadow(when add large value or blur) or box shadow, the render really not as good as firefox, maybe it coz by one use webkit and one use it own moz, hope to see improvement
I have tried to switch to Chrome for development, but I could not find a way to disable javascript for testing. Also, I love Firefox’s web developer toolbar – populate form fields for testing huge forms.
Very true about the JavaScript enable/disable… you have to do some annoying command-line stuff to disable it. That should be fixed both from a user-centric standpoint and so that Devs can more easily test their pages.
I, too, miss the form field populate. However, the JavaScript for that isn’t too crazy, and might be a worthwhile contribution to the pendule project!
FYI, Google Chrome dev channel builds have support for enabling/disabling JavaScript at runtime. Look in Options -> Under the Hood -> Privacy -> Content Settings.
Ah, hadn’t seen that! Thank you much!
I’ll try it. But at the moment I can’t work without these firefox plugins:
‘Web Developer’
‘Firebug’
‘Firephp’
‘Yslow’
‘MeasureIt’
Chrome ‘Java Script Console’ seems pretty good but I can do what I need with Firebug.
Looks very promising y competition is very healthy… but I’ll stick with Firefox.
Big thanx
Well it all looks very promising but I’m so used to firebug behavior(especially when editing CSS!) that I can’t really imagine I’ll have to move my mouse to the right side of the screen to turn a rule off. How do you add a new one? Not the selector but the rule itself?
Nice tips
Since Chorme bought in extensions I might fully switch.
But currently I find mysel surfing in chrome but building in firefox…
as long as they solve the harddrive thrashing issues in the Beta version that were also existing in the newer Firefox versions
not everyone has a core duo
My mate was talking about this on the train the other day, I normally favour firebox, so did he but he’s shifted to chrome for development now.
So it must be good
I would love to make the switch but there are a couple issues holding me back. Mostly relating to the way links are handled. We have an external application that uses links like the following on a dynamic page:
app://something@something@something@SomePolicyAAA
unfortunately, Chrome converts the link above to the following
app://something%40something%40something%40somepolicyaaa
Converting to %40 can be solved in the batch file but converting the last part of the link to all lower case messes with case sensitive applications. Ah well, hopefully a bug report will get it fixed.
I must say, that Web Inspector was a lifesaver for identifying an issue with my CSS on my forum. Definitely a must have tool.
Chrome looks so much nicer too!
Amazing extensions! I’ve installed all of them… and also switched from Firefox to Chrome.
Google Chrome rocks.!
I tested Chrome with that extension und ubuntu 9.10 but the Developer Tools looks for me very buggy …. browser was hanging up, the inspect element button didn’t work. Only thing what worked 100% was the timeline.
Some else have same issues?
Still firefox is much better for web development.
Still prefer firebug.
For browsing, opera is ultra fast. Im starting to love it.
For me Google Chrome is quite handy, also rather fast in loading webpages in my Oppinion, but still I think I’m sticking o FireFox, just became my favourite web browser
I would like to thank you for showing me those two extensions. Life savors.
Nice post, but…
“Now, while I’ve always been blown away by the speed of Safari 4 and Chrome as compared to Firefox?”
Safari is by far the slowest browser out there. I clocked it using over 700MBs of RAM for something that had Firefox (which I’d been using for at least three hours prior) using just 300MBs. It also claims a tonne of the CPU just for opening a new tab. It is not a fast browser by any stretch of the imagination, so I’m curious as to why you suggest that it is.
Hey Sandy,
Thanks for the interesting comment! Perhaps should have made more caveats with that sentence.
You’re right about Safari eating CPU when it opens a new tab — definitely not awesome, but for me, working on a Mac, I personally have a ton of delays opening new tabs in Firefox, or just opening Firefox in general, or doing anything, and Firefox feels super-sluggish for me from a user-perspective. The browser always seems to get in my way.
From a memory standpoint (Firefox isn’t a gem about memory management), but Safari may eat up more, I haven’t done the number crunching. That said, Safari’s JavaScript engine is significantly faster than Firefox’s, see here for some quick stats: http://www.manu-j.com/blog/safari-vs-firefox-vs-chrome-on-mac-javascript-performance/355
So it’s a bit of a tossup on measurable speed tests, in my opinion, but Firefox is unbearably sluggish in my personal experience on a Mac/Linux. Windows it seems to run just fine, and Safari on Windows would be hard for me to call impressive.
Anyhow, thanks again for a substantive counter-point!
until now I use google chrome, but I did not know there was as sophisticated tools for developers are in it ..
wow thanks for the info ^ _ ^
Too many cool Firefox plugins that Chrome does’t have or nor can I be stuffed looking for : )
Drag Drop Uploads
Status Bar
UnPlug
Screengrab
PDF Download
Firebug + FirePHP
FEBE to backup profile + everything else.
Flashblock!
British English
On the fly spell check : )
FF3 has ability to setup different profiles, handy.
Question is, if I have Firefox setup already, it works, where are all the reasons to switch.
I can just use chrome when required.
I’m still scared by chrome 1 and 2 always crashing for me, hehehe, maybe that’s another subconsious reason to not switch…. yet. ; )
Doesn’t sound like much reason to =) I’m glad you gave earlier version of Chrome a shot, I just wanted to expand people’s minds and have them give a new toy a fair shake!
Plus Firefox is dog slow for me on my Mac, so that gave me a lot of incentive =P
It needs one thing to make me switch and that’s line numbers on the net inspector. Firebug gives you what css file and what line number. web inspector doesn’t
This article was very helpful. I recently upgraded my PC to Windows 7 because it is much better than Vista. I was disappointed to find that Firefox runs slow and frequently bugs out on my new setup. The computer runs much smoother and faster, but every time I use Firefox something tends to freeze the browser. So, I tried Chrome and it was 10 times faster and also has a great bookmark sync feature. This article turned me onto the plugins that I miss from Firefox.
Recently, one of the google search engine chrome yen. Google search results will also give new and useful results. And pruning of the Internet world getting smaller and self-an indication of increasingly magnified. Search engine like Google chrome has a feature to their web site before’re interested in the search results to put forward. For example, a site I have visited more subtle. Then this from google chrome like a word search with the keyword When I show in the front row this site is google chrome. I live here with my problem: key word ‘special classes’ No matter in what order is the BogaziciDers.com site to learn not to give accurate results when requested. I have previously visited the site BogaziciDers.com stands out for her to be.
I was a big firefox fan, but I’ve been using google chrome for a good while now and love it’s simple uncluttered interface when browsing. It just seems to be faster than other browsers too.
I’d say it’s definitely worth trying out if you haven’t done so yet.
I see
As a developer, the only extension I really need is FirePHP which is currently not available for Chrome
Try my little adaptation of FirePHP to Chrome
http://code.google.com/p/webug/
I think this is mistake. we have too many addon in firefox for web development that other not have even chrome.
we keep our loyalty to Firefox.
checkout Firefox 4
Some of you like Firefox plugins that Chrome does’t have or nor can I be stuffed looking for : )Some of you agree with the article by saying that love to make the switch but there are a couple issues holding me back. Mostly relating to the way links are handled. We have an external application that uses links like the following on a dynamic page.
Search engine like Google chrome has a feature to their web site before’re interested in the search results to put forward. For example, a site I have visited more subtle. Then this from google chrome like a word search with the keyword When I show in the front row this site is google chrome