'When developing Chrome extension, Chrome React Devtools doesn't show up
I am debugging my chrome extension pop page, and open it in uri : chrome-extension://keekhfjbmbpmlgpfljclblgbjchoencn/popup.html
This page is using reactjs, but the react devtools is not showing. Is it by design?
Solution 1:[1]
The React Dev Tools needs to inject a content script in your page to check your react components. To do that they declare in their manifest the pattern that matches any url with a permitted scheme and these are (from the docs https://developer.chrome.com/extensions/match_patterns):
http, https, file, ftp
In other words: the React Developer Tools can not run in extension pages.
Solution 2:[2]
This is what I did to make it work with manifest v3:
- installed it locally:
npm i -D react-devtools - added
"react-devtools": "react-devtools"topackage.jsonscripts - imported the package at the top of the file that calls
render:import 'react-devtools' - and the final step was to open Devtools with
npm run react-devtools
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Felipe T. |
| Solution 2 | Dattaya |