[DevTools Bug] Could not inspect element with id "1335"

[duanelo]

Website or app

Web app we are developing for a client.

Repro steps

Open the components tab - no components will display
Close the components tab
Open the components tab again, this time the the components show but the error shows on the right pane.

How often does this bug happen?

Often

DevTools package (automated)

react-devtools-extensions

DevTools version (automated)

4.14.0-d0ec283819

Error message (automated)

Could not inspect element with id "1335"

Error call stack (automated)

No response

Error component stack (automated)

InspectedElementContextController@testErrorStack.js:109842:43
Suspense
ErrorBoundary_ErrorBoundary@testErrorStack.js:108452:5
div
InspectedElementErrorBoundaryWrapper@testErrorStack.js:108838:46
NativeStyleContextController@testErrorStack.js:111206:38
div
div
OwnersListContextController@testErrorStack.js:106680:37
SettingsModalContextController@testErrorStack.js:107121:40
Components_Components@testErrorStack.js:113123:52
ErrorBoundary_ErrorBoundary@testErrorStack.js:108452:5
PortaledContent@testErrorStack.js:108571:34
div
div
ProfilerContextController@testErrorStack.js:112748:35
TreeContextController@testErrorStack.js:103336:31
SettingsContextController@testErrorStack.js:103939:35
ModalDialogContextController@testErrorStack.js:108901:38
DevTools_DevTools@testErrorStack.js:115897:27

GitHub query string (automated)

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

[bvaughn]

Hi!

I'm sorry you ran into this problem 😦

Unfortunately, it doesn't look like this issue has enough info for one of us to reproduce it though. This means that it's going to be very hard for us to fix.

Please help us by providing a link to a CodeSandbox (https://codesandbox.io/s/new), a repository on GitHub, or a minimal code example that reproduces the problem. (Screenshots or videos can also be helpful if they help provide context on how to repro the bug.)

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

[bvaughn]

Website or app

Web app we are developing for a client.

More specifically, this field is asking for a website we can access. Just saying "a website we're developing for a client" doesn't get us any way to reproduce the issue.

[sskorol]

@bvaughn just noticed the same issue with the following public app: https://omatsuri.app
I just opened the Components tab, selected an element via inspector, then clicked by the highlighted node in a tree.

DevTools version 4.15.0-c6f2188ed

[bvaughn]

@sskorol Can you repro? I can't (on the website you linked)

[sskorol]

@bvaughn here's a link on video: https://drive.google.com/file/d/1imp0RKqYHDHtWUUX_92RUzNjFMY6mnCF/view?usp=sharing

Note that I'm running it on Chrome Version 92.0.4515.131 (Official Build) (x86_64) / BigSur 11.5.1 / DevTools version 4.15.0-c6f2188ed

Here are additional settings:

[bvaughn]

A video link doesn't help us unfortunately. We need to be able to reproduce the error (so we can inspect the code and see what/why it's breaking).

[sskorol]

You can try pulling their source code and run it locally on the same browser / extension version. As I'm able to reproduce it every time.

[bvaughn]

Unfortunately I already spent some time poking around on the page with DevTools, inspecting things, and was unable to reproduce the error.

[Aniganesh]

@bvaughn I have noticed this happens most often when I'm developing a react app and the app does a hot update because I just updated some code. On production websites it does not happen that often

[bvaughn]

@Aniganesh If you can come up with reliable steps to trigger it (even if they include running a dev server and editing files) I'd love to hear. I'd love to fix this bug.