### Website or app

https://beta.reactjs.org/

### Repro steps

1. Visit website
2. Open dev tools

This happens on https://beta.reactjs.org/ but I first noticed in on a personal project (localhost).

When I open the dev tools, the CPU goes up. At first, the Components tab does not show up. After a loooooong time, it does show up, however when I click on it nothing renders inside.

![Screenshot 2022-12-05 at 12 42 04](https://user-images.githubusercontent.com/58694408/205619186-85451e15-9b2f-43d9-b7f6-3ffaba6e7346.png)


I don't know if it's the newest Chrome version or the newest extension version that's causing it.

### 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_
matches: ['<all_urls>'],
      js: ['build/renderer.js'],
      runAt: 'document_start',
      world: chrome.scripting.ExecutionWorld.MAIN,
    },
  ]);
}
chrome.runtime.onConnect.addListener(function (port) {
  let tab = null;
  let name = null;
  if (isNumeric(port.name)) {
    tab = port.name;
    name = 'devtools';
    installProxy(+port.name);
  } else {
    tab = port.sender.tab.id;
    name = 'content-script';
  }
  if (!ports[tab]) {
    ports[tab] = {
      devtools: null,
      'content-script': null,
    };
  }
  ports[tab][name] = port;
  if (ports[tab].devtools && ports[tab]['content-script']) {
    doublePipe(ports[tab].devtools, ports[tab]['content-script']);
  }
});
function isNumeric(str: string): boolean {