See the Yarn install instructions for steps for your OS. Make sure to install the correct version of Yarn.

yarn --version
0.19.1

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.

Why not the latest version of Yarn? Yarn ensures we all have the same version of the packages but to make sure that is true we need to ensure everyone has the same version of Yarn. We try to update Yarn to the latest version assuming it doesn't break anything. Feel free to submit a pull request updating us to the latest Yarn, like this one.

git clone [email protected]:devtools-html/debugger.html.git
cd debugger.html
yarn install

What should I do if I get an error? Yarn is still new, please comment on this issue if you see anything weird.

In this step, we'll open Firefox. Chrome and Node are also available in the Appendix. It's not required, but it's generally nice to close other browsers first.

yarn run firefox

With Firefox open, you should be seeing a bunch of debugger examples, these are the test pages we use when working on features and bugs.

Why am I opening Firefox from the terminal? The firefox command 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 run it manually or comment on the issue.

Now that Firefox is open, lets 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 http://localhost:8000 in any browser to view the Debugger. If everything worked successfully, you should see something like this screenshot 😅

Try this first activity if you want to start debugging the debugger! 👏

This setup is for people on the DevTools team and DevTools wizards.

curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 0.19.1
git clone [email protected]: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 yarn run firefox, you have two options: cli, gcli.

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 shown a prompt to create a new "development" profile. The development profile is where your remote development user settings will be kept. It's a good thing :)

1. Go to about:config and set these configs

Navigate to about:config and accept any warning message. Then search for the following preferences and double click them to toggle their values to the following. example

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

1. Restart Firefox

Close firefox and re-open it with the firefox-bin command.

Firefox GCLI

• Open Firefox
• shift+F2 Open GCLI
• Type listen 6080 into the GCLI

NOTE: this assumes that you've set the other appropriate about:configs

There are two ways to run chrome. Here's the easy way to run chrome

yarn run chrome

Here's 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

Note that the script just automates the command :)

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, 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, but unfortunately there are several edge cases.

If you find any issues on these two platforms comment on these issues:

• windows
• linux

Firefox windows command

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