Teaful DevTools

Browser extension that allows you to inspect a Teaful store.

Features ✨

• Debug stores changes (when, what, where, who, how & why)
• Modify stores
• Dark & light mode

Getting started

1. Install the DevTools extension

   • Chrome
   • Firefox
   • Edge

2. Install the bridge in your app:

yarn add teaful-devtools

Tiny tiny... 😊 (~200 B)

3. Use the bridge.

In your main file, where you have the render, you must have the teaful-devtools import at the top, before the imports of your application (components, store, etc).

import 'teaful-devtools'
import { render } from 'preact';
import App from './components/App';

render(<App />, document.getElementById('root'));

4. Try it!

How to strip devtools from production

Most bundlers allow you strip out code when they detect that a branch inside an if-statement will never be hit. We can use this to only include teaful-devtools during development and save those precious bytes in a production build.

// Must be the first import
if (process.env.NODE_ENV==='development') {
  // Must use require here as import statements are only allowed
  // to exist at top-level.
  require("teaful-devtools");
}

import { render } from 'preact';
import App from './components/App';

render(<App />, document.getElementById('root'));

Make sure to set the NODE_ENV variable to the correct value in your build tool.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!