debugger.html

This is a prototype debugger written without any XUL and based on React and Redux.

Getting Started

• npm install - Install Dependencies
• npm run start-firefox - Start Firefox
• npm start - Start Debugger

Running tests

Unit Tests

• npm test - Run tests headlessly
• npm run mocha-server - Run tests in the browser

Integration tests

• cypress run - Run tests headlessly
• cypress open - Run tests in the browser

Notes:

• Firefox needs to be open and listening on port 6080 before the tests are run. You can start Firefox on the right port with this command npm run start-firefox.
• Cypress needs to be installed before tests can be run. When you run cypress the first time, you will be prompted to install it. cypress install.

Linting

• npm run lint - Run CSS and JS linter
• npm run lint-css - Run CSS linter
• npm run lint-js - Run JS linter

Storybook

• npm run storybook - Open Storybook

Advanced 🙈

User Configuration

You can create a development.local.json for local user settings in public/js/configs.

• clientLogging - set to true to see client logs

Remote Debugging

If you'd like to connect an existing Firefox browser to debugger.html, you can press shift+F2 to open the developer toolbar and type listen 6080 into the developer toolbar console.

Starting Firefox

Sometimes you will want to open firefox manually.

1. open a specific version of firefox
2. use a different profile

It is easy to open firefox with the firefox-bin script:

$ /Applications/FirefoxNightly.app/Contents/MacOS/firefox-bin -P development --start-debugger-server 6080

• --start-debugger-server 6080 Start Firefox in remote debugging mode.
• -P development parameter specifies a profile to use:

Firefox needs to some settings configured in about:config to remotely connect to devtools:

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