The Launchpad makes it easy to build a developer tool for Firefox, Chrome, and Node.
Last updated 7 days ago by jasonlaster11 .
MPL-2.0 · Repository · Bugs · Original npm · Tarball
$ cnpm install devtools-launchpad 
SYNC missed versions from official npm registry.


Npm version



The launchpad is almost always run in conjunction with a devtool like the Debugger. If you would like to run the launchpad by itself to test something or add a feature that is possible as well by running yarn start.

The Launchpad 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 launchpad 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 and dark themes


Bootstrap function

The bootstrap function starts the launchpad 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 launchpad 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
  • 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 177
Last Day 1
Last Week 18
Last Month 239
Dependencies (67)
Dev Dependencies (8)
Dependents (2)

Copyright 2014 - 2016 © |