jdescottes-devtools-launchpad

0.0.58 • Public • Published

Launchpad

launchpad-screenshot

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

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.

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

Configs

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

Dependencies (60)

Dev Dependencies (1)

Package Sidebar

Install

npm i jdescottes-devtools-launchpad

Weekly Downloads

7

Version

0.0.58

License

MPL-2.0

Last publish

Collaborators

  • juliandescottes