Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

devtools-launchpad

Package Overview
Dependencies
Maintainers
13
Versions
161
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

devtools-launchpad

The Launchpad makes it easy to build a developer tool for Firefox, Chrome, and Node.

  • 0.0.161
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
39
increased by21.88%
Maintainers
13
Weekly downloads
 
Created
Source

Launchpad

Npm version

launchpad-screenshot

Starting

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

FAQs

Package last updated on 17 Dec 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc