Very nice devtool but unfortunately the debugReducer feature is making my whole application very slow, so I have to disable it.
The problem is originating from the recursive calls in onCommitFiberRoot.
Chrome performance profile attached:

Profile-20210210T104032.zip

Hi teams,

I'd like to know how to configure for using only dev mode. Because I don't want to show the state information in production page. I'd like to see those state information only in localhost(development mode).

I am getting the following error once the debugContextDevtool(container) is called

TypeError: e.queue.lastRenderedReducer.bind is not a function  index.js:1 
    at r (<anonymous>:10:667)
    at s (<anonymous>:10:1774)
    at e (<anonymous>:10:2233)
    at e (<anonymous>:10:2251)
    at e (<anonymous>:10:2251)
    at e (<anonymous>:10:2251)
    at d (<anonymous>:10:2262)
    at Object.e.__REACT_CONTEXT_DEVTOOL_GLOBAL_HOOK.debugFiber (<anonymous>:10:4140)

version:2.0.0
extension installed and npm module too (react-context-devtool)

import { debugContextDevtool } from "react-context-devtool";

------
debugContextDevtool(container)

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. windows]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Describe the bug
In the console, i see

TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Object'
    |     property 'Provider' -> object with constructor 'Object'
    --- property '_context' closes the circle
    at JSON.stringify (<anonymous>)
    at Object.parseData (<anonymous>:8:82)
    at <anonymous>:10:3082
    at d (<anonymous>:10:3102)
    at Object.a.onCommitFiberRoot.a.onCommitFiberRoot (<anonymous>:10:4297)
    at onCommitFiberRoot (react-dom.development.js?d984:23500)
    at onCommitRoot (react-dom.development.js?d984:23545)
    at commitRootImpl (react-dom.development.js?d984:22656)
    at unstable_runWithPriority (scheduler.development.js?4562:653)
    at runWithPriority$1 (react-dom.development.js?d984:11039)
    at commitRoot (react-dom.development.js?d984:22381)
    at finishSyncRender (react-dom.development.js?d984:21807)
    at performSyncWorkOnRoot (react-dom.development.js?d984:21793)
    at eval (react-dom.development.js?d984:11089)
    at unstable_runWithPriority (scheduler.development.js?4562:653)
    at runWithPriority$1 (react-dom.development.js?d984:11039)

To Reproduce
Steps to reproduce the behavior:

1. Probably just store something with a circular reference in a context.

Expected behavior
Not spit out errors.

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

when i put : "debugContextDevtool(container, {
disable: process.env.NODE_ENV === "production"
});" in index.js there is a big lag on the input on change

To Reproduce
Steps to reproduce the behavior:

1. Install Formik
2. Install Create React App and use debugContextDevtool with disable
3. Fill in the Input
4. You will see the lagging into the input

Expected behavior
No lag in the input

Desktop (please complete the following information):

• OS: [e.g. windows]
• Browser : Chrome

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. windows]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Hello,

I am creating a browser extension and wondering the best way to use this devtool to debug it.
One solution would be to use it as a standalone Electron app as explained here https://github.com/facebook/react/tree/master/packages/react-devtools#usage-with-react-dom

Or having a remote mode like https://github.com/zalmoxisus/redux-devtools-extension/blob/master/src/browser/views/remote.pug would allow me to bundle it with Parcel and display it in a browser tab using chrome.tabs.create().

Any idea? Thank you.

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. windows]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Describe the bug
React not found in the page, but is react my project.

To Reproduce
Steps to reproduce the behavior:

1. I don't know, because my project is React

Expected behavior
I hope they fix it

Screenshots

Desktop (please complete the following information):

• OS: windows
• Browser chrome
• Version 108.0.5359.125 (Versão oficial) 64 bits

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. windows]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Hi,

Thanks for such a wonderful package. I came across this few days back and have started using it extensively. Just one thing i noticed. Right now the dev tool track the state changes. Is there a possibility to also track how (action dispatcher) a state changed happened like how redux dev tools work.

My use case is i'm using context API with useReducers and i want to track the actions that led to the state change to keep track on what's getting dispatched in a chronological order. Maybe even extend it to have a time-travel feature at later stages.

I've explored the code based to some extend but i'm relatively new to chrome extension development and would really like to see what's your thoughts about this feature. I'd also like to contribute if possible to fasten the development process.

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Is your feature request related to a problem? Please describe.

React Context DevTool does not properly handle rending state javascript Map objects.

In this example, I assign the id of the payload to the Map key.

In the state view, it renders as:

"Map [855c35fb-ae5a-43da-93fa-1e2ddab28d88,[object Object]]"

However, when viewing the action sent, it displays as:

{
  "type":string"ADD_ACTION"
  "payload": {
    "id":string"855c35fb-ae5a-43da-93fa-1e2ddab28d88"
    "slug":string"some-action"
  }
}

I am setting the context state as:

  [ActionTypes.ADD_ACTION]: (state: TActionState, payload: TActionPayload) => {
    const tempMap = state.actionListeners;
    tempMap.set(payload.id, payload);

    return {
      ...state,
      eventListeners: tempMap
    };
  },

I am able to access the content as expected, and the Map is stored correctly in the context state.

Describe the solution you'd like

When displaying a map in the state view, I'd expect to be able to twirl down the object and see its contents, like I can when viewing the action.

Screenshots

State:

Action:

fg

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Describe the bug
I'm inspecting a useReducer in a context that I'm using as a Store/State for my application. But when inspecting the values they are only outputted as string "<CIRCULER OBJECT> ...". See screenshot.

Is this expected behaviour? Or what can I do to properly inspect the values?

Expected behavior
I'm expecting to be able to expand the array and inspect all values in the objects.

Screenshots

Note: Both selectedPackages and selectedAddons are arrays of objects.

Desktop:

• OS: macOS Big Sur
• Browser: Chrome
• Version: 91
• Extension version: 3.3

Additional context
It works fine when inspecting the context:

Describe the bug
Extension was working fine yesterday; today I see the following overlay to the ReactContext window

I reloaded the extension and still doesn't work.

To Reproduce
Steps to reproduce the behavior:
In my case, just trying to load the extension results in this error...
Loading the app

App is Running; React is available; toolbar thinks all is good.

Expected behavior
A clear and concise description of what you expected to happen.
Should be able to view context...

AFAIK, I haven't changed anything relative to React Context.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Mac 11.16.8
• Browser chrome Version 104.0.5112.79 (Official Build) (x86_64)
• Version React Context DevTool 3.5

Additional context
Add any other context about the problem here.

Describe the bug
I am seeing the CIRCULAR OBJECT , always in my last item of the events list and there is nowhere describe why its happening.
I saw several related issues, and an open PR.
Which supposedly address this issue? What is the issue exactly? Do we know why its kept recurring?

The open PR I see: #17
Other Same Issue Ref:
#32
#36
#28

Here's what I get after I install the React context DevToolkit:

Here's my App index.js file which according to your instructions is valid:

Any recommendations?

Describe the bug
When I open the react context devtool, it doesn't detect my react application.
It is a valid react application with several Context APIs running

Expected behavior
Show the React Context Devtool ?

Screenshots

Desktop (please complete the following information):

• OS: windows
• Browser chrome
• Version latest

Describe the bug
When this extension is enabled on a react site I get a ton of Circular references with both socket.io and Apollo and numerous other libraries. This seems similar to #28

TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'InMemoryCache'
    |     property 'policies' -> object with constructor 'Policies'
    |     property 'config' -> object with constructor 'Object'
    --- property 'cache' closes the circle

instrument.js?ea14:109 TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Socket'
    |     property 'io' -> object with constructor 'Manager'
    |     property 'nsps' -> object with constructor 'Object'
    --- property '/' closes the circle

Desktop (please complete the following information):

• OS: Mac Bi Sur 11.4
• Browser Chrome
• Version 91.0.4472.101

The scrollbar doesn't automatically scroll to the bottom on dispatch.

Adding a tabindex="1" to the last <li> in that <ul> should solve it. Or maybe using a ref.

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

**Is your feature request related to a problem? Please describe.**
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Describe the bug
Extension is not working from the first use. Getting following message when I try to use this extension on my react applications.

React is not found in this page.
if this seems wrong please [create issue].

Same extension works for same application for co-worker.

To Reproduce
Steps to reproduce the behavior:

1. Added the extension to chrome for first time
2. Run the react application locally
3. Opened devtools
4. Clicked on react context tab in devTools
5. Extension won't show up in the the expected

Expected behavior
It should load the extension in devTools showing the contexts' state.

Screenshots

Desktop (please complete the following information):

• OS: [macOS 12.1 (21C52)]
• Browser [chrome]

Additional context
Add any other context about the problem here.

Describe the bug
Getting mass TypeError: Cannot set properties of undefined (setting 'hook') error messages in an app with many React Contexts.
Most were traced to this line. I haven't taken a deep look (am in a tight schedule), but it might be worth having some fallback value for debugObj 2 lines above where it was initialized.

To Reproduce
The issue was discovered in a complex react project that has many react contexts, not sure which component was the source component that led to this issue, kinda hard to set up a simple project just try to reproduce the issue. But I did find some detail (described above) that might explain the issue a bit, if that'd be helpful.

Expected behavior
debugObj in the source code should be guaranteed to be a defined object when assigning value to its .hook property.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: macOS 13.2.1
• Browser: Chrome Version 110.0.5481.177 (Official Build) (x86_64)
• Extension version: 3.5

Additional context
Add any other context about the problem here.

Dispatching multiple actions will only result in the first action being tracked in the chrome extension.
Afterwads all dispatched actions will be tracked correctly.

Notice how the onclick dispatches two actions one after another.

Only one action appears in the extension after clicking the button the first time.

The second time i click the button, there will be 3 actions.

Expected behavior
There should be two actions for every time i click the button.

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Describe the bug
React is not found in this page.

React is not found in this page. if this seems wrong please create issue.

To Reproduce
Steps to reproduce the behavior:

1. Go to terminal - npm start
2. Click on inspect
3. Click on React Context

Expected behavior
to see react devTools, what is in state, etc.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• MAC Os Monterey
• Browser - Chrome

Additional context
Add any other context about the problem here.

React is not found in this page.

Hi there, I am using Next.js but getting the above error in Chrome Browser working fine in FIreFox.

Is your feature request related to a problem? Please describe.
When ever I modify my app in such a way that a context name or reducer name changes, the newly found context or reducer is appended in the sidebar but all old contexts and reducers remain making it very confusing as to what is live and what isnt.

Describe the solution you'd like
Having the ability to delete all cache or prune existing contexts and reducers might make this better!

Mock Up Screenshot
Shown below is a simplistic idea on how this would look. Happy to discuss 😄

This is a great devtool and I have been using it in my js react projects. It would be awesome to have typescript support as well.

Is your feature request related to a problem? Please describe.
In my typescript files, I cannot import react-context-devtool since there is no declaration for the module.

Describe the solution you'd like
Either have the react-context-devtool package export its own types and declarations, or add a @types/react-context-devtool package

Great plugin! Thanks for writing this. Quick suggestion to make it easy to have the state visible during development without having to click the icon.

Is your feature request related to a problem? Please describe.
Have to click the icon each time to open the modal to view state.

Describe the solution you'd like
Would love to dock the state view to the right side of the chrome window.

Describe alternatives you've considered
Not sure there's a workaround for this?

Additional context
Possibly add it to inspector view?

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Is your feature request related to a problem? Please describe.
I've been using a simple hook to connect to the dev tools, I think it is a good alternative solution to what's suggested.

Describe the solution you'd like
I'd love to be able to import a simple hook from the library to connect to the dev tools, something as simple as this:

function useReactContextDevTool({ id, displayName, values }) {
  useEffect(() => {
    if (window._REACT_CONTEXT_DEVTOOL) {
      window._REACT_CONTEXT_DEVTOOL({ id, displayName, values });
    }
  }, [values])
}

Usage:

export const UserProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initState)
  useReactContextDevTool({ id: 'user', displayName: 'User', values: state })
  return (
    <UserContext.Provider value={{state, dispatch}}>
      {children}
    </UserContext.Provider>
  );
}

Describe alternatives you've considered
Alternatives present in the documentation 📖
I'm willing to do a PR, as long as this would be of interest to others aswell 👨‍💻

Describe the bug
I use auto mode, and error in debugContextDevtool shows

index.js?36f8:41 Uncaught TypeError: Cannot read property 'helpers' of undefined
    at debugContextDevtool (index.js?36f8:41)

To Reproduce
add the following code to your _app.js:

const container = document.getElementById("__next");
debugContextDevtool(container, {});

You'll see the error in console

Desktop (please complete the following information):

• OS: Linux
• Browser Chrome
• Version 80.0.3987.163 (Official Build) (64-bit)

Additional context
Sorry I can't provide any more details since it's company code.

Describe the bug
After following instructions for the automatic install, it fails to compile.

To Reproduce
Steps to reproduce the behavior:

1. Run create-react-app, change into the directory. yarn add react-context-dev-tool
2. Edit index.js at workspace root, add import { debugContextrDevTool } from 'react-context-devtool'
3. Append const container = document.getElementById('root').
4. After ReactDOM.render(...) append debugContextDevTool(container)
5. run yarn start
6. Get

/src/index.js
Attempted import error: 'debugContextDevTool' is not exported from 'react-context-devtool'.

Expected behavior
To compile successfully.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [Mac OS X 11.1/Manjaro latest rolling release]
• Browser [Firefox]
• Version [n/a]

Additional context
Add any other context about the problem here.

It would be cool if DevTools had a support for react native as well

Can we get a release for the fixes in #31 :-D

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. windows]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Is your feature request related to a problem? Please describe.

• Its great to see the values per context but if its great we can change it and see the effect on the page.

Describe the solution you'd like

• We ca make the "Raw" object to be editable and update the context when there is a change

Describe alternatives you've considered

• NA

Additional context

• It will make easy to test the page with context change

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. windows]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Hello, I'm setting the context in my index.js with automatic mode.

`import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import { debugContextDevtool } from 'react-context-devtool';

import { unregister as unregisterServiceWoker } from './registerServiceWorker';
import './index.css';
import App from './App';

.......

ReactDOM.render(


, container
);

// Attach root container
debugContextDevtool(container);

unregisterServiceWoker();
`

but when I go to chrome I'm not seeing the name of the contexts in my app. How can I set the names to the real ones?

https://ibb.co/k9NhJ53

Is your feature request related to a problem? Please describe.

Hi, can you please provide a common example for NextJS setup?

Describe the solution you'd like

Ideally, I want to only install react-context-devtool for NODE_ENV === 'production'. Is there a way to do it via say Webpack in next.config.js?

Describe alternatives you've considered

If above is not possible, any working solution with NextJS will satisfy me.

Additional context

Not sure if this matter, I am also using Preact with preact-compat/react, I hope it can work fine with react-context-devtool.

Thanks in advance 🙂

Describe the bug
My e-shop is written with React and Context API, but the chrome context extension doesn't recognize it and keep sending this message: "React is not found on this page".

To Reproduce
1-Go to this webpage:
https://half-empty-eshop.netlify.app/
2-Check the context extension

Expected behavior
Showing the global state in context extension.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser chrome
• Version 96.0.4664.93

Additional context
Add any other context about the problem here.

Not working for me, when I am opening the react context tab it's saying 'React is not found on this page, see the attached screenshot.

Thanks

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.