[DevTools Bug]: Components + Profile tabs not showing up in Chrome 99

[scott-m-sarsfield]

Website or app

https://codesandbox.io/s/new

Repro steps

1. Open up Chrome inspector
2. Expect Components + Profile tabs to appear

Computer:
2019 MacBook Pro (Intel)

Browser:
Google Chrome
Version 99.0.4844.51 (Official Build) (x86_64)

DevTools:
4.24.0 (3/10/2022)

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

[scott-m-sarsfield]

Seems like I'm not the only one: https://www.reddit.com/r/reactjs/comments/ta820t/react_devtools_extension_not_working_on_my/
(couldn't find existing issue though)

[scott-m-sarsfield]

Admittedly, it could be on chrome; the error + warning icons are black for some reason.

However, the tabs are showing up on https://reactjs.org/, so I'm not sure why it's not showing up on every other site I go on.

[icruzr93]

I'm facing exactly the same problem but with all my extensions not only with this one.

[istateside]

I'm also having this issue, and the same issue with the Redux Dev tools. Doesn't happen on every React site.

I'm on an M1 Macbook, and assumed that the issue was specific to ARM64 Chrome since some other coworkers had the same issue, but only those with an M1. But I see other people have the same issue on x86, so who knows.

[lunaruan]

Hey! Thanks for reporting. This sounds less like a DevTools issue and more like a Chrome issue, especially since all extensions seem to be experiencing this. You can report issues with Chrome here. Closing this issue!

[scott-m-sarsfield]

saga continues:
https://bugs.chromium.org/p/chromium/issues/detail?id=1306249

...which feels silly, because all of my extensions seem to load on that page.

[scott-m-sarsfield]

Ok. Somehow I got them working again (although I don't have the most reliable procedure for reproducing).

I turned off two flags in the devtool experiments section:

• Sync DevTools settings with Chrome Sync and
• Enable Reporting API panel in the Application panel.

I also thought that doing a refresh of devtools could have worked, but it didn't appear to be consistent. I think turning off the first flag is probably the only thing, but I'm not 100%.

[micate]

Ok. Somehow I got them working again (although I don't have the most reliable procedure for reproducing).

I turned off two flags in the devtool experiments section:

• Sync DevTools settings with Chrome Sync and
• Enable Reporting API panel in the Application panel.

I also thought that doing a refresh of devtools could have worked, but it didn't appear to be consistent. I think turning off the first flag is probably the only thing, but I'm not 100%.

+1, and turned off these two flags did not worked for me.

[Hannah-goodridge]

saga continues: https://bugs.chromium.org/p/chromium/issues/detail?id=1306249

...which feels silly, because all of my extensions seem to load on that page.

For those following this ticket, it has has been marked as duplicate and merged into this one:
https://bugs.chromium.org/p/chromium/issues/detail?id=1305475#c1

[istateside]

There still doesn't seem to be any movement on that Chrome bug, and I'm not able to provide a reproducible example to push it forward any more, but if folks are looking for a workaround:

• Open a new tab
• Open the Chrome devtools for your new tab
• navigate to whatever your React site's URL is in the new tab
• tada, the Components / Profile tabs should show up, and will stay there if you refresh the page.

If you try loading the devtools after you've already navigated to the React site, the tabs won't show up. I'm not familiar enough with writing extensions to know how this all works, but I was able to determine that, in the failing case, the listener in background.js for chrome.runtime.onConnect never gets hit, and therefore the content script never gets installed.

I'm not sure what triggers that connection, but it doesn't happen unless you load the devtools before navigating to the React site.

It sounds like we've determined that it's an issue with Chrome, and not React, but hopefully this comment helps unblock someone else until the Chrome bug can be fixed.

EDIT 04/26/22: Sounds like the fix is planned to go into Chrome v102

[anushasingh02]

Very late to this but was still getting the bug. Had to toggle a random flag and refresh devtools which seems to be a fix.

[supriya-ck12]

Very late to this but was still getting the bug. Had to toggle a random flag and refresh devtools which seems to be a fix.

Can you share which flag it was that had to be toggled?

[artemu78]

Very late to this but was still getting the bug. Had to toggle a random flag and refresh devtools which seems to be a fix.

Can you share which flag it was that had to be toggled?

there is a button "Restore defaults and reload", it helped me

[VaibhavKambar7]

click on the "Restore defaults and reload" button , it worked for me.

[wonhotoss]

In my case, devtools - application - service workers - update on refresh was the reason. When it checked, react panels are not shown.

[alim-ansari]

In my case, devtools - application - service workers - update on refresh was the reason. When it checked, react panels are not shown.

Yeah, same in my case. Fixed it.

[venku]

In my case, devtools - application - service workers - update on refresh was the reason. When it checked, react panels are not shown.

Same with me. Fixed after unchecking

[AshfaqueSami2]

import react from '@vitejs/plugin-react'; // Import the Vite React plugin
import { defineConfig } from 'vite';

export default defineConfig({
plugins: [react()], // Use the Vite React plugin
build: {
sourcemap: true, // Enable source maps generation
},
});

@@***Use this in your vite.config.js everything wil work

[devVibe11]

My issue Solved:
For anyone who's having issues with the console tabs not appearing: like (Components)

Press F12 to open your console, click the gear/cog icon to open the console settings, then in the bottom right there's a button that says "Restore defaults and reload". This should bring the console tabs back if they're missing.