You can download the latest versions here.

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.

git clone https://github.com/devtools-html/debugger.html.git
cd debugger.html
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.

Now that Firefox is open, let's start the development server. In a new terminal tab, run these commands:

cd debugger.html
yarn start

What does this do?

This command starts a development server.

Go to localhost:8000 in any browser to view the debugger. If everything is working successfully, your screen should look something like this.

Now, open Firefox by clicking on Launch Firefox. Chrome and Node are also available in the appendix. We recommend that you close other browsers before launching Firefox, though it is not required.

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?

You can either try to start Firefox manually, or you can get help by commenting on this issue.

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/devtools-html/debugger.html.git
cd debugger.html
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.html
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 CLI

1. Run firefox-bin from 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.

2. Navigate to about:config and accept any warning messages. Then, search for the following preferences, and double-click them to toggle their values according to this example:

• devtools.debugger.remote-enabled to true
• devtools.chrome.enabled to true
• devtools.debugger.prompt-connection to false

3. Restart Firefox by closing and reopening it with the firefox-bin command.

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 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:

• Windows
• Linux

Firefox Windows Command

C:\Program Files (x86)\Mozilla Firefox\firefox.exe -start-debugger-server 6080 -P development