loading...
Cover image for Debug ReactJS Context API with React Context Devtool

Debug ReactJS Context API with React Context Devtool

deeppatel234 profile image Deep Patel Updated on ・1 min read

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

Tree View

Raw View

Raw View

Diff View

Diff View

Installation

  1. Download extension from Chrome Web Store or Firefox addons store.

  2. 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

Posted on by:

deeppatel234 profile

Deep Patel

@deeppatel234

Javascript Developer.

Discussion

markdown guide
 

Hey Deep, thank you for making such an attractive UI to this and a blog post to introduce it!

I'd like to add some thoughts about the API that this requires more boilerplate than I want. Is it possible to simplify this API so that user's do not need to manually register each context in both the provider and the consumer? Getting react-context-devtool as good or better than redux will require getting the API of this extension just as easy.

 

Hello Daws,

react-context-devtool v2.0 release with simple API for debug context. and now you can debug useReducer hook.

dev.to/deeppatel234/debug-reactjs-...

 

🙌
🙌 🙌
🙌 🙌 🙌 🙌
🙌 🙌 🙌 🙌🙌 🙌 🙌 🙌
🙌 🙌 🙌 🙌🙌 🙌 🙌 🙌🙌 🙌 🙌 🙌🙌 🙌 🙌 🙌
🙌 🙌 🙌 🙌🙌 🙌 🙌 🙌🙌 🙌 🙌 🙌🙌 🙌 🙌 🙌🙌 🙌 🙌 🙌🙌 🙌 🙌 🙌🙌 🙌 🙌 🙌🙌 🙌 🙌 🙌

 

Hello Daws,
Thank you for your review. I will consider your suggestion and work on it.