DEV Community

Cover image for Debug ReactJS Context and useReducer hook with React Context Devtool
Deep Patel
Deep Patel

Posted on

Debug ReactJS Context and useReducer hook with React Context Devtool

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
Alt Text

useReducer debug Tree View
Alt Text

useReducer debug action View
Alt Text

context debug diff View
Alt Text

context debug raw View
Alt Text

context debug tree View
Alt Text

Installation

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>
  1. 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)

Collapse
 
henrituan profile image
Henri Tuan • 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 !

Collapse
 
jordanpicaso profile image
jordanpicaso

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

Collapse
 
daasrattale profile image
Elattar Saad

Great effort man! I really enjoyed reading this.

Collapse
 
aamnahakram profile image
Aamnah Akram

Looks great. Anyway i can make this work with React Native?

Collapse
 
deeppatel234 profile image
Deep Patel

Thanks, react native support will be added soon.

Collapse
 
henrituan profile image
Henri Tuan

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) ?

Cheers !