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.

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

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

The webpack base config makes it easy to use the launchpad 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.

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 and dark themes

Screenshot

The bootstrap function starts the launchpad 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));

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