https://github.com/preactjs/preact-devtools

Browser extension for inspection Preact applications
https://github.com/preactjs/preact-devtools

chrome extension firefox preact preact-devtools

Last synced: 4 days ago
JSON representation

Browser extension for inspection Preact applications

• Host: GitHub
• URL: https://github.com/preactjs/preact-devtools
• Owner: preactjs
• License: mit
• Created: 2019-08-20T19:32:38.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2024-10-07T06:49:07.000Z (4 months ago)
• Last Synced: 2024-10-29T15:32:34.266Z (3 months ago)
• Topics: chrome, extension, firefox, preact, preact-devtools
• Language: TypeScript
• Homepage: https://preactjs.github.io/preact-devtools/
• Size: 5.09 MB
• Stars: 315
• Watchers: 7
• Forks: 27
• Open Issues: 28
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Preact Devtools

Browser extension that allows you to inspect a Preact component hierarchy,

including props and state.

**Requires Preact >=10.1.0**

![Screenshot of Preact devtools](media/preact-chrome-light.png)

## Usage

Firstly, we need to import `preact/debug` somewhere to initialize the connection

to the extension. Make sure that this import is **the first** import in your

whole app.

```javascript

// Must be the first import

import "preact/debug";

// Or if you just want the devtools bridge (~240B) without other

// debug code (useful for production sites)

import "preact/devtools";

```

Then, download the Preact Devtools extension for your browser:

- [Firefox](https://addons.mozilla.org/en-US/firefox/addon/preact-devtools/)

- [Chrome](https://chrome.google.com/webstore/detail/preact-developer-tools/ilcajpmogmhpliinlbcdebhbcanbghmd)

- [Edge](https://microsoftedge.microsoft.com/addons/detail/hdkhobcafnfejjieimdkmjaiihkjpmhk)

## Contributing

- Use `npm run dev` to start a demo page

- Use `npm run watch` to rebuild all extensions on any code changes

- Use `npm run build:firefox` or `npm run build:chrome` to create a release build

Chrome:

1. Go to extensions page

2. Enable developer mode

3. Click "Load unpacked"

4. Select `dist/chrome/` folder

Firefox:

1. Go to addons page

2. Click the settings icon

3. Select "Debug addons"

4. Click "Load temporary addon"

5. Select the `manifest.json` in `dist/firefox/`

## For extension reviewers

These commands will build the extension and load it into a browser with a temporary profile. The browser will automatically navigate to [preactjs.com](https://preactjs.com). There you can test the extension.

Chrome:

1. Execute `npm run run:chrome`

2. Click on `Preact` tab in devtools

Firefox:

1. Exectue `npm run run:firefox`

2. Open devtools + click on `Preact` tab in devtools