devtools-local-toolbox

Local Toolbox

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.

Features

• 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

Dev Server

• serve an index.html root
• serve JS bundles with incremental builds and hot-reloading
• handle cross origin requests from the client
• runs firefox's tcp-ws proxy

Example dev-server.js

toolbox.startDevServer(envConfig, webpackConfig);

Webpack Config

The webpack base config makes it easy to use the toolbox out of the box.

Features

• 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.

Landing Page

The Landing Page shows the available Chrome, Firefox, and Node tabs to debug.

Features

• shows available connections
• has tools title
• sets up L10N
• loads the light, dark, and firebug themes

Screenshot

Bootstrap function

The bootstrap function starts the toolbox and provides a connection hook for doing post-connect setup with the debuggee connection.

Features

• checks for a connection id i.e. firefox-tab=child1/tab1
• 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));

Configs

The toolbox has a config system for adding runtime configs.

Features

• 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.