Skip to content

Latest commit

 

History

History
190 lines (127 loc) · 6.2 KB

getting-setup.md

File metadata and controls

190 lines (127 loc) · 6.2 KB

Getting Setup

Step 1. Install Yarn

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

macOS ```bash brew install yarn ```
Windows [Download Installer](https://yarnpkg.com/latest.msi) 
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.

Step 2. Install dependencies

git clone git@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, please comment on this issue if you see anything weird.

Step 3. Open Firefox

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

After Firefox is open, go to a page you want to debug. I recommend, TodoMVC http://todomvc.com/examples/vanillajs/.

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.

Step 4. Start the Debugger

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.

Step 5. Open the Debugger

Go to localhost:8000 in any browser to view the Debugger. If everything worked successfully, you should see this screenshot

Next Steps

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

Appendix

Quick Setup

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 git@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

Starting Firefox

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
  • listen 6080 - start listening on 6080

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

Starting Chrome

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

Starting Node

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 + Linux setup

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:

Firefox windows command

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