The local toolbox makes it easy to build a developer tool for Firefox, Chrome, and Node.
Debugger.html and Console.html are a good examples of tools built on top of the toolbox.
- Dev Server - local development environment to run your tool
- Webpack Base - webpack config to build on top of
- Landing Page - see available connections
- Bootstrap function - hook to start your tool with a debuggee connection
- Configs - config system to add additional runtime configuration
- serve an
- serve JS bundles with incremental builds and hot-reloading
- handle cross origin requests from the client
- runs firefox's tcp-ws proxy
The webpack base config makes it easy to use the toolbox out of the box.
- transpiles source: strips flow types, convert async to generators
- loads JSON files for L10N strings and Configs
- loads SVGs for inlining assets
- ignore modules that should be excluded (fs)
- CSS & JS hot reloading
- map shimmed modules to privileged modules when bundling for the panel
- bundles CSS into one file when building for the panel
Here's an example tool webpack.config.js.
The Landing Page shows the available Chrome, Firefox, and Node tabs to debug.
- shows available connections
- has tools title
- sets up L10N
- loads the light, dark, and firebug themes
The bootstrap function starts the toolbox and provides a connection hook for doing post-connect setup with the debuggee connection.
- checks for a connection id i.e.
- gets available tabs
- connects to a debuggee tab
- renders either the Landing Page or tool root component
bootstrap(React, ReactDOM, App, actions, store)
.then(conn => onConnect(conn, actions));
The toolbox has a config system for adding runtime configs.
- target configs - firefox, chrome, node configuration
- feature flags toggle features in the build
- themes - enable light, dark, firebug
- hot-reloading - toggle hot Reloading
- logging - enable different logging support
- environments - different configs for development, ci, panel
- local override - local config overrides
Here's an example config.