Nifty Purring Manticore

    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.

    Keywords

    none

    Install

    npm i jdescottes-devtools-launchpad

    DownloadsWeekly Downloads

    46

    Version

    0.0.58

    License

    MPL-2.0

    Last publish

    Collaborators

    • juliandescottes