<img width="1271" alt="debugger-screenshot" src="">
Last updated 2 years ago by jasonlaster11 .
MPL-2.0 · Repository · Bugs · Original npm · Tarball
$ cnpm install devtools-local-toolbox 
SYNC missed versions from official npm registry.

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.


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


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


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


Bootstrap function

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. 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));


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.

Today 0
This Week 0
This Month 13
Last Day 0
Last Week 13
Last Month 15
Dependencies (58)
Dev Dependencies (0)
Dependents (0)

Copyright 2014 - 2016 © |