Forem: Deep Patel

Debug ReactJS Context and useReducer hook with React Context Devtool

Deep Patel — Tue, 30 Jun 2020 17:01:54 +0000

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

Analyze and optimize your webpack build with webpack-report

Deep Patel — Mon, 13 Apr 2020 09:34:30 +0000

Introducing webpack-report.Webpack build analysis tool. it gives a detailed report for assets, modules and chunks so you can easily optimize your webpack build.

Features

describe your project information like dependency, dev-dependency etc.
show webpack build information like warnings, error, build time etc.
detailed Assets, Modules and chunks information with interactive graphs.

Dashboard

Assets

Modules

Chunks

Installation

Download and install npm package

#NPM
npm install webpack-report

#YARN
yarn add webpack-report

Usage

const WebpackReport = require('webpack-report');

module.exports = {
  plugins: [
    new WebpackReport()
  ]
}

Webpack Report is an open-source project. you can also contribute to this project. Github Link

Debug ReactJS Context API with React Context Devtool

Deep Patel — Sat, 25 Jan 2020 15:05:32 +0000

Introducing React Context Devtool.Now you can easily debug your context in your react app with a tree, raw and diff views.

you can download from Chrome Web Store and Firefox addons store.

Tree View

Raw View

Diff View

Installation

Download extension from Chrome Web Store or Firefox addons store.
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>

Use with NPM package

Download and install npm package



npm install react-context-devtool

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>

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