@devtoolsoverlay/overlay

An on-page devtools overlay for debugging NEST webapp without a chrome extension.

Simply add the call the overlay function and get access to a powerful, in-browser devtools experience during.

Try it online!

🚧 TODO 🚧 A couple of deployed demo websites where you can see the Overlay in action: 🚧 TODO 🚧

• Sandbox Website - Source code

Getting started

Installation

npm i @devtoolsoverlay/overlay
# or
yarn add @devtoolsoverlay/overlay
# or
pnpm add @devtoolsoverlay/overlay

Attach the overlay

Simply call the overlay component in the client entry file.

import { attachDevtoolsOverlay } from '@devtoolsoverlay/overlay'

attachDevtoolsOverlay()

// or with some options

attachDevtoolsOverlay({
  defaultOpen: true, // or alwaysOpen
  noPadding: true,
})

🚧 TODO 🚧 ~~Don't worry about wrapping it with a isDev guard, the Overlay takes care of that for you. It should be excluded from production builds automatically.~~

Extending with custom tabs/modules

Custom tabs can be added to the devtools by passing the parameter modules to the overlay function.

With react

import { attachDevtoolsOverlay } from '@devtoolsoverlay/overlay'
import { render, hydrate } from 'react';

attachDevtoolsOverlay({
  modules: [{
    title: 'tab name',
    MainView: ({ openSidePanel }) => (
      <>
        <h2>
          This is the main view
        </h2>
        <div>
          <button onClick={() => openSidePanel(b => !b)}>
                  Open side panel
          </button>
        </div>
      </>
    ),
    SidePanel: () => (
      <div>
        <h3>This is the sidepanel</h3>
      </div>
    ),
    render: (Component, el) => render(<Component/>, el),
  }]
})

With solidjs

import { attachDevtoolsOverlay } from '@devtoolsoverlay/overlay'
import { render } from "solid-js/web";

attachDevtoolsOverlay({
  modules: [{
    title: 'tab name',
    MainView: ({ openSidePanel }) => (
      <>
        <h2>
          This is the main view
        </h2>
        <div>
          <button onClick={() => openSidePanel(b => !b)}>
                  Open side panel
          </button>
        </div>
      </>
    ),
    SidePanel: () => (
      <div>
        <h3>This is the sidepanel</h3>
      </div>
    ),
    render: (Component, el) => render(<Component/>, el),
  }]
})

Changelog

See CHANGELOG.md.