调试在vscode中使用附加配置创建react应用程序

Question

我想在VSCode中调试我的react应用程序，用chrome设置launch.json"启动"；配置很简单，但如果我用"；附上"；配置不起作用。

"configurations": [
{
"name": "Attach to Chrome",
"port": 9222,
"request": "attach",
"type": "pwa-chrome",
"urlFilter": "http://localhost:3000/*",
"webRoot": "${workspaceFolder}"
}

]

我已经将--remote-debugging-port=9222 -- "%1"添加到我的chrome属性中，但我仍然从vscode中得到一个错误，即在该端口上找不到可调试的目标

我只想调试我的应用程序，而不会重新启动新的chrome，也不会丢失我在浏览器中的状态或进度。

Answer 1

以下是正确的启动配置。你必须首先关闭chrome的所有实例，它会被vscode再次启动。

注意：userDataDir允许您在chrome中使用现有的配置文件。

{
"name": "Launch Chrome for Debugging",
"request": "launch",
"type": "chrome",
"url": "https://localhost:3000/",
"webRoot": "${workspaceFolder}/src",
"userDataDir": false
},