Skip to content

Commit b073104

Browse files
authored
[DevTools] improve troubleshooting in README (#26235)
## Summary Improve the README when the elements are not loaded due to Chrome service worker malfunction
1 parent fcf2187 commit b073104

File tree

2 files changed

+9
-4
lines changed
  • packages
    • react-devtools-shared/src/devtools/views/Components
    • react-devtools

2 files changed

+9
-4
lines changed

packages/react-devtools-shared/src/devtools/views/Components/Tree.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -348,7 +348,7 @@ export default function Tree(props: Props): React.Node {
348348
If this seems stuck, please follow the{' '}
349349
<a
350350
className={styles.Link}
351-
href="https://github.com/facebook/react/tree/main/packages/react-devtools#the-issue-with-chrome-v101-and-earlier-versions"
351+
href="https://github.com/facebook/react/blob/main/packages/react-devtools/README.md#the-react-tab-shows-no-components"
352352
target="_blank">
353353
troubleshooting instructions
354354
</a>

packages/react-devtools/README.md

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -105,12 +105,17 @@ Or you could develop with a local HTTP server like [`serve`](https://www.npmjs.c
105105

106106
**If your app is inside an iframe, a Chrome extension, React Native, or in another unusual environment**, try [the standalone version instead](https://github.com/facebook/react/tree/main/packages/react-devtools). Chrome apps are currently not inspectable.
107107

108-
**If your Components tab is empty, refer to "Chrome v101 and earlier" section below**, please read the "the issue with Chrome v101 and earlier versions" part below.
108+
**If your Components tab is empty, refer to "The React tab shows no components" section below**.
109109

110110
**If you still have issues** please [report them](https://github.com/facebook/react/issues/new?labels=Component:%20Developer%20Tools). Don't forget to specify your OS, browser version, extension version, and the exact instructions to reproduce the issue with a screenshot.
111111

112-
### The Issue with Chrome v101 and earlier
113-
As we migrate to a Chrome Extension Manifest V3, we start to use a new method to hook the DevTools with the inspected page. This new method is more secure, but relies on a new API that's only supported in Chrome v102+. For Chrome v101 or earlier, we use a fallback method, which can cause malfunctions (e.g. empty React component tab) if the JS resources on your page is loaded from cache. Please upgrade to Chrome v102+ to avoid this issue.
112+
### The React tab shows no components
113+
114+
#### The Issue with Chrome v101 and earlier
115+
As we migrate to a Chrome Extension Manifest V3, we start to use a new method to hook the DevTools with the inspected page. This new method is more secure, but relies on a new API that's only supported in Chrome v102+. For Chrome v101 or earlier, we use a fallback method, which can cause malfunctions (e.g. failure to load React Elements in the Components tab) if the JS resources on your page is loaded from cache. Please upgrade to Chrome v102+ to avoid this issue.
116+
117+
#### Service Worker malfunction
118+
Go to chrome://extensions. If you see "service worker (inactive)" in the React Developer Tools extension, try disabling and re-enabling the extension. This will restart the service worker. Then go to the page you want to inspect, close the DevTools, and reload the page. Open the DevTools again and the React components tab should be working.
114119

115120
## Local development
116121
The standalone DevTools app can be built and tested from source following the instructions below.

0 commit comments

Comments
 (0)