When trying to inspect any modal or overlay elements, I am facing an issue with react-devtools. It shows timeout while inspecting element.
5 Answers
My issue was resolved by removing the React Developer Tools extension, reinstalling it, and restarting Chrome.

- 58,414
- 16
- 114
- 157
-
2that worked for me too. In my case, given both Chromium and React dev tools were up to date, simply disabling react dev tools extension, then re-enabling it, then restarting Chromium, did the job – John Doe Apr 27 '23 at 04:45
I found this SO answer as a workaround to seeing the results in the component panel.
If you use the Components panel to select the component you want to inspect and then open the "Console" panel and type $r
in the console, it will give you the same data that the components panel normally provides.
I get the same issue in Edge, version 113.0.1774.57. A quick (but temporary) fix is opening dev tools and then hard resetting the page + emptying the cache.
I've noticed that it'll stall when redux starts to store too much data. When the frontend is initially served, the extensions works perfectly. Afterwards it starts to become gradually slower, until it finally crashes.

- 63
- 2
- 10
-
This worked temporarily as promised. On my subsequent app restart React recognized an error and directed me here: https://github.com/facebook/react/blob/main/packages/react-devtools/README.md#the-react-tab-shows-no-components. So far it's working. – thisLinda Jul 19 '23 at 13:03
Same problem here although it works sometimes when I try to import like that:
import { connectToDevTools } from "react-devtools-core";
if (__DEV__) {
connectToDevTools({
host: "localhost",
port: 8097,
});
}

- 33
- 2
- 8