Google Chrome Dev Tools Pro-Tips
Web Browser as Debugging Environment
Each web app developer has her own favorite way of debugging her source code. Fortunately we have a few solid choices and Google Chrome is my absolute favorite. Not only is Chrome an exceptional web browser, it’s a built-in expando debugger. Amazing quality and totally free! Reminds me of the capabilities of my old Visual Studio days and that thing was five hundred bucks. Admittedly VC has an editor and compiler. I’ll write about my favorite text editor/IDE one day soon.
Please find below my daily-use settings and options for debugging web apps in Google’s Chrome browser. I truly believe that knowing our craft means knowing our tools. If you haven’t already seen these features give them a whirl tomorrow.
Chrome Canary
This is a pre-release developer preview build of the Google Chrome browser we all know and ♥. It’s semi-stable and normally two versions ahead of production Chrome. Generally speaking, having this means I preview the new hotness before other folks do, which is cool, but I have been bitten by its overnight bugs a couple of times this Summer. Download it here:
https://tools.google.com/dlpage/chromesxs/
Even though I suffered a few bugs I’m still happily using Chrome Canary as my daily development browser. In fact I can work it over hard, setting it to all sorts of whacky configs, and it leave production Chrome as my nice and normal personal browser.
Open Developer Tool Settings
In the Chrome browser bring up the dev tools and notice the little spoked gear icon in the lower right-hand corner. Clicking on it reveals all sorts of awesome settings.
Setting: Disable Cache
Disabling Cache means I have a better chance of getting my most recent local saves from my source code editor. Caching is a fantastic optimization technique for regular browsing. As a developer it’s an error-prone frustration as I wonder “where are my changes?” Coding is the second hardest thing humans do – disable your chache and make life a little bit easier.
Setting: User Agent – Override Device Metrics
Building a mobile web app? Don’t you want to see a rough idea of how it looks on a smaller form-factor while on your desktop. Chrome has “device metrics” that gets us as close as possible. Change the screen resolutions to 320×480 and see what a small-screen does to crush your graphic desinger’s lovely layout.
Setting: User Agent – Emulate Touch Events
Speaking of mobile support. Do you know how there are different DOM interaction events on touch-screens? Button-down and mouse-move events don’t mean a thing on a touch screen. Let Chrome help you debug iPads and modern phones via the “Emulate touch events” option. Hurray!
Toolbar Icon: Pause on Uncaught Exceptions
When I’m debugging source code on a web app it never crashes. Ha! When I integrate with teammate’s code and it crashes I see the source panel open up and the line it crashed. No stack trace. Hardly a modern source-level debugging experience. Guess what – Google developers have that sorted already.
Click on the “Sources” tab looking for the stop-sign icon on the lower-left corner. Click it making it purple. Now Chrome stops on the line with full stack beauty. See the call-chain, the instruction counter, all local variables. It’s wonderful. Why in the world isn’t that the default setting Mr Paul Irish?
Hotkey: Find A Source File Quickly from Many
Also on the source code panel, when setting up breakpoints before execution, it can be time consuming poking through the long list of source code on a debug site once the team starts blasting out code. Even a few dozen fills up that sources tab from the upper-left hand corner.
In that case Google has <Cmd>+O as a hotkey listing all files with a live search filter. Just start typing to find your file quickly and easily. Especially useful if your source isn’t loaded in the case of a demand-loaded AMD system. You’re using Require.JS right? I’ll write about that another week.
Really, That’s It
Really, that’s it. Debugging on Chrome is fairly straight-forward and all of you are already doing the right thing by simply using it daily. My goal here is simply telling about how a few tweaks make it rock out even louder.
Learn this tool well. Poke at it. Have a coffee. The more you use it the more it produces. Build something awesome!
