[DevTools Bug] Could not inspect element with id 10

[victor-homyakov]

Website or app

https://github.com/jacob-ebey/hooks-todo

Repro steps

1. git clone https://github.com/jacob-ebey/hooks-todo && cd hooks-todo/
2. npm i && npm run dev
3. Open http://localhost:3000/ in Chrome, if it wasn't opened automatically
4. Open DevTools
5. Go to Source tab and enable the "Pause on exceptions" icon
6. Go to Components tab (the tab of React DevTools)
7. Click in the components tree on the component TodoList

The Sources tab shows that local variable visibleTodos, which is an array, has the numeric value (0 or 1):

The error message on the screenshot is TypeError: visibleTodos.map is not a function, its stack trace:

TodoList (TodoList.js:90)
L (react_devtools_backend.js:12276)
exports.inspectHooksOfFiber (react_devtools_backend.js:12342)
inspectElementRaw (react_devtools_backend.js:7562)
inspectElement (react_devtools_backend.js:7807)
(anonymous) (react_devtools_backend.js:9561)
emit (react_devtools_backend.js:4175)
(anonymous) (react_devtools_backend.js:10201)
listener (react_devtools_backend.js:10975)
postMessage (async)
handleMessageFromDevtools (contentScript.js:107)

Does not reproduce in production, e.g. at https://jacob-ebey.js.org/hooks-todo/#/. The error arises only in dev build.

How often does this bug happen?

Every time

DevTools package (automated)

react-devtools-extensions

DevTools version (automated)

4.13.5-0ae5290b54

Error message (automated)

Could not inspect element with id 10

Error call stack (automated)

No response

Error component stack (automated)

at InspectedElementContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:31392:3)
    at Suspense
    at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30033:5)
    at div
    at InspectedElementErrorBoundaryWrapper (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30176:3)
    at NativeStyleContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32661:3)
    at div
    at div
    at OwnersListContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:28268:3)
    at SettingsModalContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:28709:3)
    at Components_Components (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:34512:52)
    at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30033:5)
    at PortaledContent (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30147:5)
    at div
    at div
    at ProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:34138:3)
    at TreeContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:24945:3)
    at SettingsContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:25548:3)
    at ModalDialogContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30234:3)
    at DevTools_DevTools (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37241:3)

GitHub query string (automated)

https://api.github.com/search/issues?q=Could not inspect element with id 10 in:title is:issue is:open is:public label:"Component: Developer Tools" repo:facebook/react

[bvaughn]

This is interesting. The useMemo hook's internal memoizedState looks like it's in an unexpected format. Not sure why this is yet.

Looks like DevTools is returning the value of the first hook (left) rather than the second (visibleTodos) but I'm not sure why this is yet. Looking at left it looks like it's returned undefined so...there's an off-by-one error here.

[bvaughn]

Ah, I think this bug is because you're running an older version of React (16.8). This looks to be the same problem that I fixed previously in #14940.

I verified that upgrading react and react-dom in your example project fixes this problem.

[irzhywau]

Ah, I think this bug is because you're running an older version of React (16.8). This looks to be the same problem that I fixed previously in #14940.

I verified that upgrading react and react-dom in your example project fixes this problem.

I'm actually using react@17.0.2 but still having this issue

[tranvansang]

I am using v 17.0.2, latest v17 version, and the issue is occurring and blocking my project's dev.

I don't want to upgrade to v18 for now.

Please consider re-opening the issue.

Timed out while inspecting element 2.
Retry
The timeout occurred at InspectedElementContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40918:3)
    at Suspense
    at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:39222:5)
    at div
    at InspectedElementErrorBoundaryWrapper (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:39756:3)
    at NativeStyleContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:42414:3)
    at div
    at div
    at OwnersListContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:35065:3)
    at SettingsModalContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37690:3)
    at Components_Components (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:44490:52)
    at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:39222:5)
    at div
    at div
    at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:39394:3)
    at PortaledContent (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:39424:5)
    at div
    at div
    at div
    at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:39394:3)
    at TimelineContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:44671:3)
    at ProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:44100:3)
    at TreeContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:31925:3)
    at SettingsContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32569:3)
    at ModalDialogContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:39819:3)
    at DevTools_DevTools (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:56024:3)

[haofeng-li]

I am using react 18.2.0 and suffering from this issue everyday. I can not inspect any element until I reload page with react devtool's "Component" panel open. Please consider reopening this issue 🙏

I run a simple app that created by create-react-app and this issue keep happening.

The timeout occurred at InspectedElementContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:42052:3)
    at Suspense
    at ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40370:5)
    at div
    at InspectedElementErrorBoundaryWrapper (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40899:3)
    at NativeStyleContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:43544:3)
    at div
    at div
    at OwnersListContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:36224:3)
    at SettingsModalContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:38841:3)
    at Components_Components (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:45608:45)
    at ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40370:5)
    at div
    at div
    at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40542:3)
    at PortaledContent (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40572:5)
    at div
    at div
    at div
    at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40542:3)
    at TimelineContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:45790:3)
    at ProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:45220:3)
    at TreeContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32770:3)
    at SettingsContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:33732:3)
    at ModalDialogContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40961:3)
    at DevTools_DevTools (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:57143:3)

[umanghome]

I reloaded my Chrome Extension and it started working for me. Might be worth a try.

[AndrewMosh]

thank you! it works now

[Handel1926]

Go to settings, where you have (Elements console components) scroll down to Allow Devtools to load resource and check the box.

[Themezv]

This problem can be associated with browser page lifecycle.
I noticed that the problem is reproduced when the tab is not active for some time. (13m+ maybe less)
In this case you can add chrome-extension://fmkadmapgofadopljbjfkapdkoienihi to Always keep these sites active section of chrome://settings/performance