React context devtool

<p align="center"> <img src="https://github.com/deeppatel234/react-context-devtool/blob/master/store-assets/cover.png?raw=true" width="80%"/> </p> <h2 align="center">Devtool for React Context and useReducer Hook</h2>

<p align="center"> <img src="https://github.com/deeppatel234/react-context-devtool/blob/master/store-assets/screenshots/context-tree-view.png?raw=true" width="50%"/> </p> <p align="center"> <img src="https://github.com/deeppatel234/react-context-devtool/blob/master/store-assets/screenshots/context-raw-view.png?raw=true" width="30%"/> <img src="https://github.com/deeppatel234/react-context-devtool/blob/master/store-assets/screenshots/reducer-action-view.png?raw=true" width="30%"/> <img src="https://github.com/deeppatel234/react-context-devtool/blob/master/store-assets/screenshots/reducer-diff-view.png?raw=true" width="30%"/> </p>

Installation

• Download extension from
  • Chrome Web Store
  • Microsoft Edge Addons Store
  • Firefox Addons Store (latest)
  • Firefox Addons Store (upto V3.3)

Set Display names

Display name for Context API

• set dispayName props in Provider

jsCopy
<MyContext.Provider value={{ a: 'hello', b: 'world' }} displayName="Context Display Name">
  <YourComponent />
</MyContext.Provider>

or

• assign display name in Context

jsCopy
  MyContext.displayName = "Context Display Name";

Display name for useReducer

• reducer function name is use as displayName in debug

Settings

• <b>Chrome</b> : right click on react-context-devtool icon and click on "Options"
• <b>Firefox</b> : right click on react-context-devtool icon and click on "Manage Extenstion" and select "Preferences" tab

Name	Type	Default	Description
Start Debugging	On Extensions Load	true	Start data capturing after extenstion is opened in dev panel (recommended)
	On Page Load	false	Start data capturing after page load
Enable Debug	useReducer	true	enable/disable useReducer debug. Available only in development mode
	Context	true	enable/disable context debug

<p align="center"> <img src="https://github.com/deeppatel234/react-context-devtool/blob/master/store-assets/screenshots/settings.jpeg?raw=true" width="50%"/> </p>

Troubleshooting

"React is not found in this page" when using NextJS

This extension requires React Developer Tools installed on your browser to work. Try to install the extension and restart the browser to fix it.

License

MIT

---

Cross-browser testing provided by <a href="http://browserstack.com">Browserstack</a>.