Debug ReactJS Context and useReducer hook with React Context Devtool
Tags: react, javascript, chrome, firefox
Published: 2020-06-30 17:01:54

---
title: Debug ReactJS Context and useReducer hook with React Context Devtool
published: true
description: 
description: #reactjs
tags: react, javascript, chrome, firefox
cover_image: https://thepracticaldev.s3.amazonaws.com/i/gr2lipvxsdqw5dd28wc4.png
---

###*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](https://github.com/deeppatel234/react-context-devtool)

## What's new feature in V2.0

## New UI

***useReducer debug diff view***
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/u5wvs7md7804363w97uu.png)

***useReducer debug Tree View***
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fkw8a9kigccbbvii4dux.png)

***useReducer debug action View***
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/r3rgk121dr4b34cc5vbg.png)

***context debug diff View***
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/x8dy287k8e27j32ixylc.png)

***context debug raw View***
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wg52prfepzj55ehcihvb.png)

***context debug tree View***
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/amqywkjthuq3ow1f68c7.png)



## Installation

- Download extension from [Chrome Web Store](https://chrome.google.com/webstore/detail/oddhnidmicpefilikhgeagedibnefkcf) or [Firefox addons store](https://addons.mozilla.org/en-US/firefox/addon/react-context-devtool/).

### Auto Mode
- Download and install npm package

```sh
npm install react-context-devtool
```

- Attach root container in debugContextDevtool method

```js
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.

```js

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>
```
2. Add _REACT_CONTEXT_DEVTOOL method in your Consumer.

```js

<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

```js

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

```