Friday, May 18, 2012

Two "Must Use" Chrome Dev Tools Shortcuts

I switched from Firebug to the Chrome Dev Tools about 4 months ago and couldn't be happier. Until this week (May 14th, 2012), navigating to specific script files and functions was tedious. I'm happy to see some of the Chrome beta tools make their way to production this week.

Brand New
  • In scripts tab, cmd-O now brings up a dialog to open a specific script file. No more mousing over to the scripts drop-down.
  • Even better, cmd-shift-O brings up a dialog to navigate to a specific function in the current script. The only thing that would make this better is if it worked across ALL loaded scripts, vs just the current script. If this feature alone doesn't excite you I question your geek standing... seriously.
  • In options (the gear icon at the bottom-right of the dev tools screen), select "dock to right" to dock the dev tools with your existing browser window. Awesome option when you have a good monitor (24" or wider). I wish it could dock left, but this is better than nothing.
  • In options, "enable source maps". Cool way to map source files from compiled js to the actual source files. I REALLY hope this turns into a more advanced feature where you can map a server source file to a local host version, and then persist your in-browser changes to disk.
  • Speaking of in-browser changes, you can modify js source files in the dev tools and their changes are respected until you do an explicit browser refresh.
  • Tree view of loaded scripts. I'm not fond of this, and I hide it since I can cmd-O to find them anyway, but still a nice addition.

Not New, But Useful
  • cmd-shift-F, search for a string across ALL loaded scripts
    • would be even cooler if could get cursor into the results automatically (can set up keyboard maestro command to get there, though)
  • cmd-shift-C, activate the "select element to inspect" functionality
  • cmd-option-I, start debugging session