React devtools panel

Adds a React devtools panel to the browser that reads the inspected page.

Runs on Chrome, Edge, Firefox · Manifest V3 · Surfaces: devtools panel · Styling: CSS · Level: beginner · Framework: react

Create this project

npx extension@latest create my-devtools-react --template devtools-react
cd my-devtools-react
npm install
npm run dev

What it is for

A React devtools panel as the primary UI surface
Inspecting the current page from inside the developer tools
Starting point for debugging tools built as browser extensions

First steps

Run npm run dev to launch the extension
Open the browser devtools with F12 or Cmd+Option+I, then pick the Example tab
Edit src/panel/PanelApp.tsx and save to see the panel update

Permissions it asks for

This template requests no permissions.

Source on GitHub Documentation

extension.dev Documentation for extension.dev