How to connect the Firefox Developer Tools to the Google Chrome browser running on the desktop.
Note that our support for this depends on the Valence add-on, which bridges the debugging protocol used by Firefox and that used by Chrome. Support for Valence is still experimental.
This guide is split into two parts: the first part, "Prerequisites" covers stuff you only need to do once, while the second part, "Connecting", covers stuff you need to do each time you connect the device.
Prerequisites
You'll need:
- Firefox version 35 or higher, with the Valence add-on (formerly called the Firefox Tools Adapter) installed. If you're using Firefox Developer Edition, then Valence is already installed. Otherwise, download the latest version of Valence and install it in Firefox by opening the XPI file.
- Chrome version 37 or higher.
Connecting
Running Chrome
To enable remote debugging on Chrome Desktop you need to start it with the following special flag: --remote-debugging-port=9222. See this guide on running Chrome with flags.
There are some other flags that can be helpful. By running with --no-first-run, --no-default-browser-check, and --user-data-dir you can run Chrome alongside another Chrome instance.
For example, on OS X you could run the following command to start a debuggable copy of Chrome that's separate from any other instances you might have running:
/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')Connecting using WebIDE
In Firefox, open WebIDE. In WebIDE, click "Select Runtime", and select "Chrome Desktop" from the dropdown menu.
Now click the "Open App" menu in WebIDE. You'll see a list of all the tabs open on the device. Click a tab to attach the developer tools to it. Most of the Firefox Developer Tools should now be available. The following tools are not yet supported:
- Performance
- Timeline
- Network
- Storage