在vscode中调试时如何将react dev工具添加到chrome

Question

当在"启动chrome"模式下在vscode中调试时,会引发一个漂亮而干净的chrome实例,而不安装任何扩展.这很好,但在某些情况下我需要react-dev-tools扩展,并且必须运行常规chrome来完成这项工作.是否有任何方法可以使用干净的调试chrome,但是添加了开发工具？

启动配置通常是:

{ "type": "chrome", "request": "launch", "name": "Launch Chrome:3000", "url": "http://localhost:3000", "webRoot": "${workspaceRoot}" }

Answer 1

尝试将此行添加到启动配置launch.json:

"runtimeArgs": ["--load-extension=${env:userprofile}/AppData/Local/Google/Chrome/User Data/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/3.2.3_0"]

一些限制

1. 安装指向基于Chrome扩展程序ID的本地文件夹(启用开发人员模式查看) - "fmkadmapgofadopljbjfkapdkoienihi"
2. Path还指向一个特定版本(3.2.3_0),它可能在React dev工具的未来版本中中断
3. 在本地加载扩展程序时,Chrome会发出警告"禁用开发者模式扩展"

来源

1. VS代码变量
2. Chrome命令行开关

Answer 2

我能够通过以下步骤获得 react-devtools 选项卡。

1. 在 VScode 打开的窗口中安装 react-devtools 扩展（再次）
2. 重新打开 devtools (CMD-ALT-i)
3. 刷新页面。

我知道可能有更好的方法。我认为 VScode 打开的 chrome 窗口必须受到保护，以免在私有模式下加载扩展。欢迎回答。