如何使用现有的已登录 Chrome 用户配置文件正确设置 VS Code 以在 chrome 中进行调试?

Question

我有一个用VS Code编写的React应用程序。为了测试和调试我的工作，我转到终端并输入npm start。 这将启动应用程序服务器，并在当前登录用户下正确启动 chrome，该用户安装了 React Devtools 扩展。

但是，我也在VS Code中使用带有Chrome扩展名的调试器。 为了使用这些调试器工具，一旦应用程序由 npm 启动，我需要按 F5，这将为 Chrome 启动一个新的浏览器窗口。 在此模式下，我的断点在 VS 代码中被命中，我也可以根据需要进行检查。

但是，不同之处在于，当我按 F5 时，VS Code 会打开一个新的浏览器窗口，看起来像新安装的 Chrome 实例。 由于我在多个虚拟机和架构中使用 Chrome，因此我设置了我的 Google 帐户，以便在 Chrome 的每台计算机上登录我的个人资料时，所有必要的书签和扩展程序都会加载到该 Chrome 实例中。

F5调试不会显示该用户配置文件信息，即使Chrome的常规启动显示了这些详细信息，就像我运行时浏览器的初始启动一样npm start。 有没有办法更改我的 VS Code 配置，以便在使用 Chrome 调试器扩展程序在 VC Code 中进行调试时，我可以使用所有所需的扩展程序和工具访问我的Chrome配置文件？

另外，这是我的launch.json文件。我认为这是由调试器使用的。

{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}",
}
]
}

我认为这些是默认值，我认为，也许，这就是NPM正在使用的，而不是使用F5启动调试器和浏览器的任何东西。

Answer 1

将"userDataDir": false添加到启动配置中，如下所示：

{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}",
"userDataDir": false
}
]
}

但是，您必须先退出所有正在运行的 Chrome 实例，因为无法将正在运行的 Chrome 用户配置文件置于调试模式。这就是扩展程序默认创建新的用户配置文件的原因。