loading...
Cover image for Debug ReactJS Context and useReducer hook with React Context Devtool

Debug ReactJS Context and useReducer hook with React Context Devtool

deeppatel234 profile image Deep Patel ・2 min read

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"
});

Posted on Jun 30 by:

deeppatel234 profile

Deep Patel

@deeppatel234

Javascript Developer.

Discussion

markdown guide
 

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

 

Great effort man! I really enjoyed reading this.