preactjs / Preact Devtools
Licence: mit
Browser extension for inspection Preact applications
Stars: ✭ 204
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Preact Devtools
Ext Saladict
🥗 All-in-one professional pop-up dictionary and page translator which supports multiple search modes, page translations, new word notebook and PDF selection searching.
Stars: ✭ 8,418 (+4026.47%)
Mutual labels: extension, chrome, firefox
Gopassbridge
A web extension for firefox and chrome to insert login credentials from gopass
Stars: ✭ 182 (-10.78%)
Mutual labels: extension, chrome, firefox
Web Extension Starter
🖥🔋Web Extension starter to build "Write Once Run on Any Browser" extension
Stars: ✭ 987 (+383.82%)
Mutual labels: extension, chrome, firefox
Github Mermaid Extension
A browser extension for Chrome, Opera & Firefox that adds Mermaid language support to Github
Stars: ✭ 170 (-16.67%)
Mutual labels: extension, chrome, firefox
Nighttab
A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.
Stars: ✭ 598 (+193.14%)
Mutual labels: extension, chrome, firefox
Himawari 8 Chrome
🛰 Experience the latest image from the Himawari, GOES, Meteosat, and DSCOVR satellites
Stars: ✭ 48 (-76.47%)
Mutual labels: extension, chrome, firefox
Yomichan
Japanese pop-up dictionary extension for Chrome and Firefox.
Stars: ✭ 464 (+127.45%)
Mutual labels: extension, chrome, firefox
Uget Chrome Wrapper
Moved to https://github.com/ugetdm/uget-integrator and https://github.com/ugetdm/uget-extension
Stars: ✭ 74 (-63.73%)
Mutual labels: extension, chrome, firefox
Ublock
uBlock: a fast, lightweight, and lean blocker for Chrome, Firefox, and Safari.
Stars: ✭ 8,075 (+3858.33%)
Mutual labels: extension, chrome, firefox
Bettertweetdeck
A browser extension to improve TweetDeck with a lot of features
Stars: ✭ 558 (+173.53%)
Mutual labels: extension, chrome, firefox
Kdeconnect Chrome Extension
A browser extension to send pages and content from your browser to connected KDE Connect devices.
Stars: ✭ 124 (-39.22%)
Mutual labels: extension, chrome, firefox
Web Developer
A browser extension that adds various web developer tools to a browser.
Stars: ✭ 532 (+160.78%)
Mutual labels: extension, chrome, firefox
Emoji Helper
A small cross-browser emoji cheatsheet extension 👍
Stars: ✭ 194 (-4.9%)
Mutual labels: extension, chrome, firefox
Metamask Extension
🌐 🔌 The MetaMask browser extension enables browsing Ethereum blockchain enabled websites
Stars: ✭ 6,585 (+3127.94%)
Mutual labels: extension, chrome, firefox
Advent Of Code Charts
Inject charts in your private leaderboard page for Advent of Code
Stars: ✭ 46 (-77.45%)
Mutual labels: extension, chrome, firefox
Bs Detector
🚨 THIS REPOSITORY HAS MOVED. 🚨
Stars: ✭ 414 (+102.94%)
Mutual labels: extension, chrome, firefox
Scriptsafe
a browser extension to bring security and privacy to chrome, firefox, and opera
Stars: ✭ 434 (+112.75%)
Mutual labels: extension, chrome, firefox
Mue
Fast, open and free-to-use new tab page for modern browsers
Stars: ✭ 56 (-72.55%)
Mutual labels: extension, chrome, firefox
Web Extension Starter
Typescript, React, Redux, Styled-Component and Webpack based sample extension boilerplate. Runs on Chrome and Firefox. Sample chrome extension.
Stars: ✭ 115 (-43.63%)
Mutual labels: extension, chrome, firefox
Preact Devtools
Browser extension that allows you to inspect a Preact component hierarchy, including props and state.
⚠️ Requires Preact >=10.1.0 ⚠️
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.
// 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:
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
ornpm run build:chrome
to create a release build
Chrome:
- Go to extensions page
- Enable developer mode
- Click "Load unpacked"
- Select
dist/chrome/
folder
Firefox:
- Go to addons page
- Click the settings icon
- Select "Debug addons"
- Click "Load temporary addon"
- Select the
manifest.json
indist/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. There you can test the extension.
Chrome:
- Execute
npm run run:chrome
- Click on
Preact
tab in devtools
Firefox:
- Exectue
npm run run:firefox
- Open devtools + click on
Preact
tab in devtools
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].