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

Question

我正在调试我的 chrome 扩展弹出页面，并在 uri 中打开它：chrome-extension://keekhfjbmbpmlgpfljclblgbjchoencn/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
不要忘记重新加载您的扩展。

PS
如果你不想react-devtools全局安装，你可以npm install --save-dev react-devtools从你的项目运行，然后添加到package.json

"scripts": {
   "react-devtools": "react-devtools"
}

并运行 npm run react-devtools