我正在调试我的Chrome扩展弹出页面,并在以下 URI 中打开它: chrome-extension://keekhfjbmbpmlgpfljclblgbjchoencn/popup.html
该页面使用了ReactJS,但React开发工具没有显示。 这是设计上的问题吗?
我正在调试我的Chrome扩展弹出页面,并在以下 URI 中打开它: chrome-extension://keekhfjbmbpmlgpfljclblgbjchoencn/popup.html
该页面使用了ReactJS,但React开发工具没有显示。 这是设计上的问题吗?
您可以使用React Dev Tools,但是由于CSP限制,您需要使用独立版本在浏览器扩展中工作。请在控制台中运行以下命令:
$ npm install -g react-devtools
并将其添加到您的manifest.json中
"content_security_policy": "connect-src ws://localhost:8097"
现在运行 react-devtools
不要忘记重新加载您的扩展程序。
P.S.
如果您不想全局安装 react-devtools
,则可以从您的项目中运行 npm install --save-dev react-devtools
,然后添加到 package.json
中。
"scripts": {
"react-devtools": "react-devtools"
}
执行 npm run react-devtools
react-devtools
成功使其工作。https://www.npmjs.com/package/react-devtools#usage-with-react-dom - Nick McCurdy以下是我采取的步骤,使其与清单v3兼容:
npm i -D react-devtools
"react-devtools": "react-devtools"
添加到 package.json
脚本中render
的文件顶部导入该包: import 'react-devtools'
npm run react-devtools
打开 Devtools