Getting Set Up
Step 1. Install a recent version of Node.js
You can download the latest versions here.
Step 2. Install Yarn
npm i -g yarn
Why Yarn and not NPM?
NPM installs the latest versions. We use Yarn because we want to make sure everyone is using the same libraries.
Step 3. Install dependencies
git clone https://github.com/firefox-devtools/debugger.git cd debugger yarn install
What should I do if I get an error?
Yarn is still new; if you're experiencing any unusual errors with it, please leave a comment on this issue.
Step 4. Start the debugger
Now that Firefox is open, let's start the development server. In a new terminal tab, run these commands:
cd debugger yarn start
What does this do?
This command starts a development server.
Step 5. Open the debugger
localhost:8000 in any browser to view the debugger. If everything is working successfully, your screen should look something like this.
After Firefox is open, you may wish to experiment with the debugger and its features. A good example website for this is called TodoMVC, where you can debug a simple "to do" application in a wide variety of JS frameworks.
Why am I opening Firefox from inside the debugger?
Launch Firefox opens Firefox with special permissions that enable remote debugging.
What should I see?
Here's a screenshot.
What should I do if this doesn't work?
What should I do if am unable to see icons on debugger?
Install packages using
If the certificate is unable to be verified, you can open set strict-ssl to false. You should be able to configure this by running:
yarn config set "strict-ssl" false -g then run
Try our official getting started activity Debugging the Debugger!
This setup is for people on the DevTools team (and any of you DevTools wizards out there):
npm i -g yarn git clone https://github.com/firefox-devtools/debugger.git cd debugger yarn install # close Firefox if it's already running /Applications/Firefox.app/Contents/MacOS/firefox-bin --start-debugger-server 6080 -P development # create a new terminal tab cd debugger yarn start
If you're looking for an alternative to opening Firefox from inside the debugger, you must use the command-line interface (CLI).
firefox-binfrom the command line.
/Applications/Firefox.app/Contents/MacOS/firefox-bin --start-debugger-server 6080 -P development
You'll be prompted to create a new "development profile". The development profile is where your remote development user settings will be kept.
- Navigate to
about:configand accept any warning messages. Then, search for the following preferences, and double-click them to toggle their values according to this example:
- Restart Firefox by closing and reopening it with the
Using Web Sockets
If you are not seeing any tabs when you connect, it is possible that switching from a TCP server to a WS could help.
- create a
- Start Firefox from the command line
/Applications/Firefox\ Nightly.app/Contents/MacOS/firefox --start-debugger-server ws:8116 -P dev
NOTE: if you are curious about how the debugger server starts listening on a port this function is useful: devtools-startup.js
Starting Firefox Nightly
You can open and debug a Firefox Nightly tab with the command-line interface (CLI).
Steps 4-6 is for the Firefox Nightly configuration and only need to be done once:
- Update/rebase your local Debugger repository, and download Firefox Nightly
yarn startand open
localhost:8000on your browser
- In a separate terminal tab, open Nightly with:
# For Mac Users /Applications/Firefox\ Nightly.app/Contents/MacOS/firefox --start-debugger-server 6080 # For Windows Users C:\Program Files\Firefox Nightly\firefox.exe -start-debugger-server 6080
- Go to
about:configin the URL bar
- Toggle the following preferences to their corresponding values:
- Close, and then open Firefox Nightly (like in step 3)
- Give it a few seconds for the Nightly tab to show up in launchpad
There are two ways to run Chrome for the purposes of remote debugging with the debugger:
The easy way:
yarn run chrome
And the slightly harder way:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --no-first-run --user-data-dir=/tmp/chrome-dev-profile
It's easy to start Node in a mode where DevTools will find it:
- --inspect - tells Node to open a debugger server.
- --inspect=9223 - tells Node to open a debugger server on 9223 instead of 9229.
- --debug-brk - tells Node to pause on the first statement.
node --inspect --debug-brk ./node_modules/.bin/webpack
Note: ./node_modules/.bin/webpack could be anything. We're often debugging Webpack these days, so it's often appropriate.
Note: Currently, Node.js debugging is limited in some ways. For example, there isn't support for seeing variables or the console, but you can manage breakpoints and navigate code execution (pause, step-in, step-over, etc.) in the debugger across various sources.
Windows + Linux Setup
Windows and Linux should just work most of the time. However, there are several edge cases.
If you find any issues on these two platforms, please leave a comment on these issues:
Firefox Windows Command
C:\Program Files (x86)\Mozilla Firefox\firefox.exe -start-debugger-server 6080 -P development