OLIVER WILKERSON

UPDATE I can't guarantee the following method will work all the time always. For instance, the latest builds of dev-tools require some of the bits that are included in Canary. You may have to go back a little bit in the continuous build index to find a version that is compatible with Chrome Stable.

I can't really take credit for this. I caught +Paul Irish after a SXSWi dev-tools panel and asked him, “Is there a way I can get the new Chrome Canary hotness running in Chrome stable?” To which he humorously replied, “Geez! You people can't even wait five weeks?!” And then something along the lines of “I know. I can't go back from the new stuff, either.”

And then he showed me some (relatively) very simple magic.

Elitist Disclaimer: Normally, all my examples I show are in Linux, but I figure most of the people that will find this useful will be on Apple hardware. And most Linux users are smart enough to figure out how to translate the following OS X steps into what they need.

So here's what you do (trust me it's worth it)

1. Have Google Chrome stable installed. If you're here, hopefully you've already done this.
2. Download the latest dev-tools from the <reverb>Chrome Continuous Build Index</reverb>
   1. Do that by going here: http://commondatastorage.googleapis.com/chromium-browser-continuous/index.html
   2. Find your OS.
   3. Scroll all the way down and find the latest build. (128075 at the time of this post)
   4. Download devtools_frontend.zip
3. Extract the dev-tools some place that is appropriate. I like to put mine in a ~/lib/dev-tools/ or /usr/local/lib/dev-tools/ directory.
4. Now here's the OS X stuff:
   1. In Finder navigate to your Google Chrome (stable) in the Applications folder.
   2. Right-click and Show Package Contents:
      
   3. Rename MacOS/Google Chrome to something like MacOS/Google Chrome Actual
      
   4. Highlight your renamed file, and Command + C (Copy).
   5. Open up Terminal and run vim /Applications/Google\ Chrome.app/MacOS/Google\ Chrome
   6. Press i for insert and then Command + V (Paste).
   7. Add –debug-devtools-frontend=/usr/local/lib/dev-tools (or wherever) to the end. Should now have /Applications/Google\ Chrome.app/MacOS/Google\ Chrome – debug...
   8. Press Escape and type :wq to save it.
   9. Then sudo chmod +x /Applications/Google\ Chrome.app/MacOS/Google\ Chrome
   10. Run Chrome and you've got the new dev tools.

Now, why would someone do this?

Why go through all this rather than just download Chrome Canary? Sometimes something you think Chrome stable supports isn't there, but it's in Canary but a) possibly unstable or b) just plain brand new. Theoretical example: What if you use a CSS3 transition that say Canary and Opera Next support, but is not in Chrome stable yet? I know. Small chance, but it could happen.

Another reason I'd like to cite is because you can. And it's cool. So why not take advantage of it?

Doing this means I get the luxuries of the great dev-tool additions that Chrome Canary provides without the worries of Canary-only layout issues. I am using the following features in Chrome stable now, before they have actually been "released".

• Color picker:
  
• User Agent header overrides:
  
• Javascript console auto-complete:
  
• Pretty Print minified Javascript:
  

And probably more that I didn't even know about. The beautiful thing is I can use these tools for my development process and not worry about something I've done in my html+css3 that might be “edge”.