[DevTools Bug]: Blank tools localhost only

[MadPeachTM]

Website or app

google.com

Repro steps

This started after last update 4.20.0

How often does this bug happen?

Every time

DevTools package (automated)

No response

DevTools version (automated)

No response

Error message (automated)

No response

Error call stack (automated)

No response

Error component stack (automated)

No response

GitHub query string (automated)

No response

[github-actions]

@FanatiG: We're sorry you've seen this error. ❤️

Unfortunately the URL you provided ("localhost") is not publicly accessible. (This means that we will not be able to reproduce the problem you're reporting.)

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

Issues without repros are automatically closed but we will re-open if you update with repro info.

[github-actions]

Thank you for providing repro steps! Re-opening issue now for triage.

[MadPeachTM]

Sorry for the
"Website or app
google.com"
But it just didnt work with
"Website or app
localhost"

[Sayvai]

I've just stumbled across the same issue, but i think i may have managed to find a workaround to the bug for now, which is to navigate to another external third-party React website (eg, ReactJS, Netflix, CNN), and then navigate back to your localhost site, while keeping Chrome DevTools React Developer Tools open throughout the process.

Give that a go?

Note: Not all external public third party React sites work with the workaround approach. So for example, navigating to other public React sites such as Facebook, Instagram, and Paypal does not appear to work as a temporary workaround.

---

Chrome @ 94.0.4606.81
React Developer Tools @ 4.20.0 (10/15/2021)

[MadPeachTM]

I've tried with netflix but it doesn't seem to work, sadly =( thanks for your advise anyways! may be it will help someone else

[Sayvai]

I've tried with netflix but it doesn't seem to work, sadly =( thanks for your advise anyways! may be it will help someone else

I've updated my original comment, with the addition of CNN React site, which is proven to also reliably work as a workaround for me, so try that too.

But also found it does not work with the PayPal React site as a workaround.

Besides that, i agree, this is a regression bug 🤔

[MadPeachTM]

Sadly didn't work as well

[Sayvai]

Does React Dev Tools load up elements when you navigate to ReactJS, Netflix or CNN? If not then, here is a refined step-by-step set of instructions for a workaround:

• Open a new tab
• Ensure Chrome Dev Tools is not open at all
• Navigate to ReactJS (loads faster)
• Open Chrome Dev Tools > React Dev Tools
• The React elements should load up and display for ReactJS site (probably most important here)
• Click on any React element within React Dev Tools (preferably a React element that actually holds both props + state values, where that data would then be displayed to the right panel)
• Now navigate to your localhost site

[bvaughn]

The reason the GitHub bot asked for a URL that we could access (not "localhost") is because there might be something specifically going on with your local website version. Localhost apps in general work fine with DevTools. In fact, we use a test application running on localhost to build DevTools features.

So the first question I would ask is: Does React DevTools work on other sites? For example, if you visit reactjs.org, does DevTools work? If so, this may suggest there's something specific with your website.

If not, it may suggest that you have another extension installed that's interfering. If this is the case, it would be helpful for you to tell us which extensions you have installed (you can view this in about:extensions).

[Sayvai]

This bug also affected my colleague as of today, where the workaround i posted resolved the issue for now, for both me and my colleague, and his version of React Dev Tools is also at 4.20.0.

Besides, as requested, here's my list of enabled Chrome extensions:

• Awesome Screenshot and Screen Recorder
• daily.dev | The Homepage Developers Deserve
• Ghostery – Privacy Ad Blocker
• Google Docs Offline
• Honey
• Octotree - GitHub code tree
• Picture-in-Picture Extension (by Google)
• React Developer Tools
• Redux DevTools
• Treeverse

---

Chrome @ 94.0.4606.81
React Developer Tools @ 4.20.0 (10/15/2021)

[MadPeachTM]

The reason the GitHub bot asked for a URL that we could access (not "localhost") is because there might be something specifically going on with your local website version. Localhost apps in general work fine with DevTools. In fact, we use a test application running on localhost to build DevTools features.

So the first question I would ask is: Does React DevTools work on other sites? For example, if you visit reactjs.org, does DevTools work? If so, this may suggest there's something specific with your website.

If not, it may suggest that you have another extension installed that's interfering. If this is the case, it would be helpful for you to tell us which extensions you have installed (you can view this in about:extensions).

Yes React DevTools work on other sites. I've tried to disable all extensions, nothing changed. DevTools worked perfectly fine until last friday (15.10) and since then nothing changed in my project.

[bvaughn]

cc @jstejada in case this could be related to #22517?

[jstejada]

@bvaughn yeah sounds like this might be related, I'll investigate

[jstejada]

@FanatiG @Sayvai, to confirm, the issue is that you open the Components tab but the Components Tree never loads? and this only happens on localhost when developing your app locally?

@FanatiG is this happening to you on Chrome?

[MadPeachTM]

@FanatiG @Sayvai, to confirm, the issue is that you open the Components tab but the Components Tree never loads? and this only happens on localhost when developing your app locally?

@FanatiG is this happening to you on Chrome?

Yes and yes

[Sayvai]

@FanatiG @Sayvai, to confirm, the issue is that you open the Components tab but the Components Tree never loads? and this only happens on localhost when developing your app locally?

@FanatiG is this happening to you on Chrome?

@jstejada - The scenario you've described is correct. Essentially the Component Tree never loads, until i apply my workaround.

[jstejada]

will close it once the fix from #22597 is shipped and verified

[Sayvai]

will close it once the fix from #22597 is shipped and verified

@jstejada - Brilliant, and many thanks for your efforts on this fix! 🙌

Are you in a position to give a rough estimate on when the next build version which includes this fix will be released out into the wild for dev minions like us?

I'll also verify the fix when i receive the version update, and post results here.

[jstejada]

it takes a few days for the Chrome Web Store to review a new published version, but hopefully within the next few days

[jstejada]

just a heads up on this issue, v4.20.1 was finally approved in the Chrome Web Store, and we just submitted v4.20.2 for review, which should include the fix for this issue.

i'll comment here again when v4.20.2 is finally out

[jstejada]

v4.20.2 which includes this is now published in the Chrome Web Store

I'll go ahead and close, but @Sayvai @FanatiG or @sergeyphi let me know if you're still having issues (if so we can re-open)

[dilanustek]

@jstejada Thanks for the fix. Unfortunately the new version does not work for me and my colleague even though the version you posted above was working after a manual install. Do you have any idea why this might be the case?

[jstejada]

hmm thanks @dilanustek! do you see any errors in the console when this happens? does it happen consistently? i suspect this might also be the same issue as #21636

[dilanustek]

@jstejada I don't see any errors in console. It is completely blank. It does happen consistently on chrome only and localhost only.

[a-gierczak]

Sadly updating to v4.20.2-c213030b4 didn't fix the issue for me either. I'm running Chrome 95.0.4638.54, however, on Firefox 93.0 it seems to work fine. On Chrome I don't have any errors in the console, the component tree is just blank.

[buondevid]

I still have the same problems: with Chrome (Version 95.0.4638.54 ) and React Dev Tools (Version 4.20.2 (10/25/2021)).

It just doesn't show anything in the React Dev Tools when on localhost. No error or logs usually. I managed to display 1 error just once:

That makes this thing possibly related with #21636 but most of the times it's just blank and no errors are shown.
Dismissing the error, when it appears, loads successfully the components tree though.

[Sayvai]

@

v4.20.2 which includes this is now published in the Chrome Web Store

I'll go ahead and close, but @Sayvai @FanatiG or @sergeyphi let me know if you're still having issues (if so we can re-open)

@jstejada - Hi again, so my React Dev Tools Chrome extension updated to 4.20.2, and sadly for some reason, this didn't resolve the issue, on localhost, and on a private remotely hosted URL of app.

Also, no new / unrecognised errors were personally observed within the console .. 🤔

Although, i am still able to apply the workaround of re-opening Chrome Dev Tools > React Dev Tools for the second time, and then voila, the Component Tree loads.

[jstejada]

thanks for all the reports everyone! that's unfortunate :( that version contains the same fix as the custom build i shared here that seemed to fix the issue 100% of the time.

I'm going to look more into this and keep you posted. thanks!

[jstejada]

@Sayvai could i ask for another favor? when this happens to you, could you do the following:

• Detach Chrome Dev Tools itself into a separate window.
• On the Chrome Dev Tools window, press Cmd + option + J. This should bring up another dev tools window which is inspecting dev tools itself.

On the new dev tools window, do you see any errors?

[johallar]

I've been having the same issues (zipped extension w/fix worked for me but 4.20.2 doesn't)

I'm seeing a bunch of these errors with different node numbers in the dev console console:

Error in event handler: Error: Cannot add node "1" because a node with that id is already in the Store.
    at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:25739:41
    at bridge_Bridge.emit (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:23954:22)
    at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:24114:12
    at listener (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:52758:41)

And then a bunch of similar warnings:
No element found with id "0"

[Sayvai]

@Sayvai could i ask for another favor? when this happens to you, could you do the following:

• Detach Chrome Dev Tools itself into a separate window.
• On the Chrome Dev Tools window, press Cmd + option + J. This should bring up another dev tools window which is inspecting dev tools itself.

On the new dev tools window, do you see any errors?

@jstejada - Aha. I never knew about this internal self-inspecting Chrome Dev Tools window.

So upon carrying out the above instructions, i also appear to be getting similar errors each time the component tree fails to load. The errors consistently appear whenever the component tree fails to load, within the self-inspecting Chrome Dev Tools (cmd + opt + j).

Error in event handler: Error: Cannot add node "1" because a node with that id is already in the Store.
    at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:25739:41
    at bridge_Bridge.emit (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:23954:22)
    at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:24114:12
    at listener (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:52758:41)

Sometimes, i see 1, or 2, or 3 instances of the tens of duplicate error messages:

Also, as a sidenote, i noticed as of this morning, that the component tree loads only like ~5% of the time, first time on a localhost version of the app. But when testing on a remotely hosted version of the app, the component tree loads around ~75% of the time. It's very inconsistent. Not sure if this tidbit will aid your investigation.

---

React Dev Tools: 4.20.2
Chrome: 95.0.4638.54
Mac OS: Big Sur 11.6

[CatarinaSony]

@jstejada I just wanted to inform that v4.20.2 didn't solve this issue for me either (I created the #22596 issue that was closed and merged into this one).

My problems are similar but not exactly the same as others report:
First I get an blank components devtools (only localhost) but when picking select element arrow and hover over elements a lot of errors like this one shows up in the console:

Uncaught Error: Could not find ID for Fiber "Grid" at getFiberIDThrows (react_devtools_backend.js:5824) at Object.getFiberIDForNative (react_devtools_backend.js:7260) at Overlay_Overlay.inspect (react_devtools_backend.js:9151) at showOverlay (react_devtools_backend.js:9279) at onPointerOver (react_devtools_backend.js:9438)

React - 16.8.6

Not sure if relevant but:
react-scripts 4.0.3

[jstejada]

We're shipping another version v4.21.0 to the web store which we think should address this (or reduce the amount of times it triggers #21636). It should be available in chrome in a few days.

[Sayvai]

We're shipping another version v4.21.0 to the web store which we think should address this (or reduce the amount of times it triggers #21636). It should be available in chrome in a few days.

@jstejada - version 4.21.0 appears to have resolved the issue 😃

Managed to reliably load up the component tree on first load 100% of the time, after repeatedly closing and re-opening tab, and then opening dev tools > component tab, for like 20 times across localhost, and remotely hosted sites of the local app, with 2 Chrome restarts in-between to mix things up.

Many thanks for your huge efforts in resolving this issue 🙌 🎖️

[buondevid]

I confirm that the problem has been resolved with the last version, many thanks for the great work 😄

[jstejada]

FYI v4.21.0 is now on Chrome Web Store which should resolve or at least reduce the occurrence of this issue. If you keep seeing problems let us know and we'll re-open the issue.

The root cause of of #21636, which is what happened when this occurred, is still undetermined and needs investigation

[aalices]

@jstejada I'm still experiencing the issue 😞 I updated DevTools to 4.21.0 and my Chrome is 95.0.4638.69 - the browser is managed by my company.

On localhost the Components section is either blank or loads but does not update when something changes on the page. Everything works on websites like reactjs.org Also, from time to time when I hit opt/alt + R it logs an error like the ones mentioned by other users.

[bvaughn]

@aalices Just to confirm–

1. Does this happen consistently for you on your website (running on localhost)?
2. Does it happen for any other websites? (What about your website deployed externally)?

Any repro info you can share with us? (Can we run your website locally?)

[aalices]

1. Yes, it stopped working about 2 weeks ago (at least that's when I noticed) and I haven't seen it working since then
2. Everything works fine on any other website, also on deployed version on the website I am working on.

Unfortunately I cannot share it as it's only for users who bought the product. However, I can try creating a basic CRA app and see what happens.

[jstejada]

@aalices let's continue the conversation in #22636 which is a more general version of this issue