开发Chrome扩展时，Chrome React Devtools不显示

Question

我正在调试我的 chrome 扩展弹出页面，并在 uri 中打开它： chrome-extension://kekhfjbmbpmlgpfljclblgbjchoencn/popup.html

此页面使用reactjs，但react devtools未显示。 是设计使然吗？

Answer 1

您可以使用 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

Answer 2

React 开发工具需要在页面中注入内容脚本来检查您的 React 组件。为此，他们在清单中声明了与任何 url 与允许的方案相匹配的模式，这些是（来自文档 https://developer.chrome.com/extensions/match_patterns）：

http、https、文件、ftp

换句话说：React Developer Tools 无法在扩展页面中运行。

Answer 3

这就是我为了使其与清单 v3 一起工作而所做的：

• 本地安装：

  npm i -D react-devtools

• 将

  "react-devtools": "react-devtools"

  添加到

  package.json

  脚本
• 导入了调用

  render

  的文件顶部的包：

  import 'react-devtools'

• 最后一步是使用

  npm run react-devtools

打开 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