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

Question

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

启动配置通常是：

{ "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的本地文件夹（启用开发者模式查看） - ＆＃34; fmkadmapgofadopljbjfkapdkoienihi＆＃34;
2. Path也指向特定版本（3.2.3_0），可能在React dev工具的未来版本中中断
3. Chrome会发出警告＆＃34;禁用开发者模式扩展程序＆＃34;当本地加载扩展时

来源

1. VS Code Variables
2. Chrome command line switches

Answer 2

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

1. 在VScode（再次）
打开的窗口中安装react-devtools扩展
2. 重新开启devtools（CMD-ALT-i）

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

Answer 3

摘要

我们将使用 debug标志运行Chrome，然后附加 VScode调试器。

步骤

1. 将以下内容添加到package.json start 脚本中：

    "start": "'/Applications/Google Chrome.app/Contents/MacOS/Google Chrome' --remote-debugging-port=9222 & react-scripts start",

它的基本操作是运行带有--remote-debugging-port=9222标志的Chrome可执行文件。 （请注意，&操作符会启动一个后台进程，因此脚本可以继续执行下一个命令）

1. 向launch.json文件添加启动配置：

{
   "type": "chrome",
   "request": "attach",
   "name": "Attach",
   "port": 9222
}

通过在终端中运行npm start来
1. 运行开发服务器。

注意事项

请注意，此解决方案指向 MacOS 上的Chrome安装。对于其他操作系统，请在步骤1中修改chrome的位置。