866.316.5832

Tools of the Trade (Pt. 2) – The Browser on May. 25, 2012

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

Docking to the right!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!

Better JavaScript viewing3) A better JavaScript file viewer – The Sources tab that lists JavaScript files is much easier to use in Chrome Canary. The functionality is similar to the Resources tab, where all files are listed in a tree and can be moved between quickly, instead of in the dropdown menu of the stable Chrome build.

4) On-the-fly JavaScript editing (also in Chrome stable) – The JavaScript viewer doubles as an editor and can be modified for in-page JavaScript functions. Of course, if the page is refreshed, the changes are lost. This still is very handy to test interactive JS on a page.

Colors in my Elements pane!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?

4 Responses to Tools of the Trade (Pt. 2) – The Browser

  • Any chance you could explain how to get to the features? You have explained about them but not how to get to them.

  • Hey Nat! Most of the things I mention in the post (like the JavaScript file viewer) are just the default way things are displayed. To get the Dock-to-Right to work, when you have your developer tools open, long press on the icon in the very lower left of the browser. That should switch the dev tools between bottom-dock and right-dock mode. Also, you can completely remove the dev tools from being attached to the main browser window with this same method by releasing your mouse over the little pop-up that appears. Check the link at the start of the elements pane skinning section for a good step-by-step for that as well. Thanks for reading!

  • Have you any template for edit the custom.css file ??

  • I don’t have a specific template. However, you can download any of the themes that are available on the page I had in the article (http://darcyclarke.me/design/skin-your-chrome-inspector/) or you can check out Addy Osmani’s Google+ post here (https://plus.google.com/+AddyOsmani/posts/UZF34wPJXsL) with another large list of themes. All of these just require you to download the custom.css file and overwrite it on your computer in the proper place. Just check the two links I have here, they’ll tell you where that css file goes.

    Happy theming!

Leave a Reply

Note: Your email address will not be published. Required fields are marked *

Latest Blog

sharable blog banner How to Create Shareable Content

To put it simply, “shareability” is a piece of content’s potential to be transmitted, or shared, between members of your audience. The necessity for this seems intuitive – you create content to be viewed, and the more people who share …

+ Read More
Trademark Productions is a Google Parnter

Don't be anti-social.

Facebook Twitter Linked In