Use Mozilla Firefox DevTools in Chrome

I shared on Twitter last week that I do casual browsing in Google Chrome but do most of my development work in Firefox. I can't give a great reason for doing so but Firefox has seemed like a development "security blanket" since I was in college (over a decade ago!). The only time I use Chrome's development tools is when I have a Chrome-specific bug. Only recently I found out about Mozilla's Valence project; Valence allows developers to use Firefox Developer Tools in projects other than Firefox.

Valence is available as a standalone utility but also gets installed when you open Firefox's WebIDE, commonly used to debug Firefox OS apps. Assuming you have both Firefox and Chrome on your machine, you can kick off the process with the following shell command:

$ /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --no-first-run --no-default-browser-check --user-data-dir=$(mktemp -d -t 'chrome-remote_data_dir')

That command opens Chrome with port 9222 open for debugging connection. With the connection open, you can open Firefox's WebIDE, select "Chrome Desktop", and you now have access to debug Chrome with Firefox's DevTools as such:

Awesome on both Mozilla and Google's part to allow this type of functionality. The browser wars are (mostly) over and we're now focused on making web development easier on ... brace yourselves ... web developers. I'm thankful that this type of functionality exists -- now I get the best of both worlds!