It’s time for another installment of my mini-series about the tools of Web Development! (Technically, this is the last one I have planned for now, so who knows if it will continue from here.) Today, we will focus on what I consider the second-most important piece of any Web development stack: the browser.
Of course, every good developer knows they need to be testing code and layouts in a multitude of browsers (at least the “Big 3”: IE, Firefox, and Chrome). The choice a developer makes to be his or her “main” browser where they do the bulk of their development can be a tough one, however. The fact that Firefox had the best set of DOM-inspection tools and add-ons for quite a while gave it a large lead in the developer-chosen browser front. But, recently Chrome has been gaining quite a bit of traction, and it is a version of Chrome that I call my “main” browser when developing: Chrome Canary.
Canary is a test-bed for many of the features that make it into the stable Chrome build. It is usually two versions ahead of the stable build in number (as of this writing, Canary is at version 21.0.1150.0 and stable at 19.0.1084.52) and does have a bug every so often. For example: on Wednesday, hover tooltips (like title tags) weren’t working for me. When I came in on Thursday, there was an update that fixed the problem. The benefits of Canary (in my mind) outweigh a few annoyances, though.
Why you should use Chrome Canary
1) Dock to the right – I have a 1920 pixel-wide monitor. That left a ton of extra space on either side of the 1000 pixel wide content area I may be working with and crammed too much into the screen horizontally for my taste. The dock to right setting helps me maximize my screen real estate. I can see more of the page vertically, and still have plenty of room for the DOM-inspector (where you browse the HTML elements) and the Styles CSS pane in the Elements tab.
2) One-click editing – Double clicking in the Styles pane to edit a property was annoying. Chrome Canary has changed that to a single click so I can get to editing that much faster!
5) Elements pane skinning (also in Chrome stable) – Have you ever wanted your Elements pane to have the same look as your text-editor? Now you can with Chrome! Simply edit the Custom.css file you find in UsersUSERAppDataLocal GoogleChrome (or Chrome SxS for Canary)User DataDefaultUser StyleSheets and you too can have a better Elements pane!
Those are just a few of the reasons I use Chrome/Chrome Canary. What’s your favorite development browser? What features do you look for in a browser or wish would be added to your browser of choice?