我正在调试我的 chrome 扩展弹出页面,并在 uri 中打开它: chrome-extension://kekhfjbmbpmlgpfljclblgbjchoencn/popup.html
此页面使用reactjs,但react devtools未显示。 是设计使然吗?
您可以使用 React Dev Tools,但您必须使用独立版本才能在浏览器扩展中工作(由于 CSP 限制)。在控制台中运行它
$ npm install -g react-devtools
并将其添加到您的manifest.json
"content_security_policy": "connect-src ws://localhost:8097"
现在运行
react-devtools
附注
如果您不想全局安装
react-devtools
,您可以从项目中运行 npm install --save-dev react-devtools
,然后添加到 package.json
"scripts": {
"react-devtools": "react-devtools"
}
然后运行
npm run react-devtools
React 开发工具需要在页面中注入内容脚本来检查您的 React 组件。为此,他们在清单中声明了与任何 url 与允许的方案相匹配的模式,这些是(来自文档 https://developer.chrome.com/extensions/match_patterns):
http、https、文件、ftp
换句话说:React Developer Tools 无法在扩展页面中运行。
这就是我为了使其与清单 v3 一起工作而所做的:
npm i -D react-devtools
"react-devtools": "react-devtools"
添加到 package.json
脚本render
的文件顶部的包:import 'react-devtools'
npm run react-devtools
拒绝连接的一个潜在原因是
WebpackDevServer
通过 https 提供页面,因此 React Devtools 无法连接到不安全的 http://localhost:8097
。您可以通过将 server/type
更改为 http
,将 devMiddleware/publicPath
更改为 http://...
,暂时通过 http 提供资源,或者尝试使用 react-devtools-core
,将 useHttps
设置为 true
。
hook.sub is not a function
的错误
react-refresh-webpack-plugin
冲突引起的,禁用它可能会有所帮助。请参阅https://github.com/facebook/react/issues/20377