Debug ReactJS Context and useReducer hook with React Context Devtool

#react #javascript #chrome #firefox

Release all-new react-context-devtool V2.0

react-context-devtool is devtool for react context and useReducer hook.
you can debug useReducer with actions, state changes, and also dispatch actions from devtool.
Now you can easily debug your context in your react app with a tree, raw, and diff views.

React Context DevTool is an open-source project. you can also contribute to this project. Github Link

What's new feature in V2.0

New UI

useReducer debug diff view

useReducer debug Tree View

useReducer debug action View

context debug diff View

context debug raw View

context debug tree View

Installation

Download extension from Chrome Web Store or Firefox addons store.

Auto Mode

Download and install npm package



npm install react-context-devtool

Attach root container in debugContextDevtool method



import React from "react";
import ReactDOM from "react-dom";
import { debugContextDevtool } from 'react-context-devtool';

import App from "./App";

const container = document.getElementById("root");

ReactDOM.render(<App />, container);

// Attach root container
debugContextDevtool(container, options);

Name	Type	Default	Description
`debugReducer`	boolean	`true`	enable/disable useReducer debug
`debugContext`	boolean	`true`	enable/disable context debug
`disable`	boolean	`false`	disable react-context-devtool including manual mode
`disableAutoMode`	boolean	`false`	disable auto mode only

Manual Mode

if you want to debug only selected context so you can use manual mode
Add ContextDevTool component inside your Provider.




import { ContextDevTool } from 'react-context-devtool';

<MyContext.Provider value={{ a: 'hello', b: 'world' }}>
  // Add this in your context provider
  <ContextDevTool context={MyContext} id="uniqContextId" displayName="Context Display Name" />
  <YourComponent />
</MyContext.Provider>

Add _REACT_CONTEXT_DEVTOOL method in your Consumer.




<MyContext.Consumer>
  {
    values => {
      if (window._REACT_CONTEXT_DEVTOOL) {
        window._REACT_CONTEXT_DEVTOOL({ id: 'uniqContextId', displayName: 'Context Display Name', values });
      }
      return null;
    }
  }
</MyContext.Consumer>

Disable in production mode




debugContextDevtool(container, {
  disable: process.env.NODE_ENV === "production"
});

Top comments (6)

jordanpicaso • Jun 30 '20

hey man nice job, please add time travel to it just like redux-devtools.

Henri Tuan • May 8 '21 • Edited

Hi, thanks for the great tool. Is there any way see the internal states/hooks used inside the Context (but not exported in the Context's value) ?

For exemple:

const [queue, setQueue] = useState([]); // <-- I want to debug this state
Context.Provider values={...someOtherStates} // <-- but it's not exported in Context.Provider

Cheers !