从Visual Studio Code中启动Chrome并进行调试

我正在使用Visual Studio Code来调试一些前端javascript(用于Wordpress插件).我无法正确配置launch.json文件.

我可以手动启动chrome,然后在事后(使用Attach请求)附加到它,在这种情况下javascript断点工作正常.

如果我从vscode中启动chrome(使用Launch请求),它会连接(我看到控制台输出),但是我没有触发断点.我假设我的launch.json文件中有一些设置不正确.

{
"version": "0.2.0",
"configurations": [
    {
        "name": "Launch Signup Form",
        "type": "chrome",
        "request": "launch",
        "url": "http://myclient.dev/signup-form",
        "sourceMaps": true,
        "webRoot": "../../..",
        "runtimeArgs": [
            "--remote-debugging-port=9222"
        ]
    },

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

}

我已经尝试过任何我能想到的web根目录(包括'htdocs'的web根目录的完整本地路径以及你在上面看到的相对路径.它似乎并不关心我放在那里,所以也许我我正在吠叫错误的树.

本地项目文件夹在这里:

/home/me/code/vagrant-local/www/wordpress-myclient/htdocs/wp-content/plugins/cee-signup-form

在服务器上,映射到:

http://myclient.dev/wp-content/plugins/cee-signup-form

在"注册表单"页面中,我使用其完整网址包含相关的javascript文件.

显然,我可以手动转到url,然后每次我想调试时附加,但只需单击启动和调试就可以了.

我究竟做错了什么？

请按照以下步骤操作:

检查您是否已安装"VS Code - Debugger for Chrome"扩展.

首先将此代码放在.vscode/launch.json中:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Node",
      "port": 9229,
      "protocol": "inspector",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run-script", "start"],
      "console": "integratedTerminal"
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "Chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceRoot}/client/src"
    }
  ],
  "compounds": [
    {
      "name": "Full-stack",
      "configurations": ["Node", "Chrome"]
    }
  ]
}