javascript - 从 Visual Studio Code 中启动 Chrome 和调试

Question

我正在使用 Visual Studio Code 调试一些前端 javascript(用于 Wordpress 插件)。我在正确配置 launch.json 文件时遇到问题。

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

如果我从 vscode 中启动 chrome(使用启动请求)，它会连接(我看到控制台输出)但我没有触发断点。我假设我的 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
    }
]

我已经尝试了所有我能想到的网络根目录(包括“htdocs”处的网络根目录的完整本地路径和您在上面看到的相对路径。它似乎并不关心我放在那里的内容，所以也许我找错了树。

本地项目文件夹在这里:

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

在服务器上，映射到:

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

在“注册表格”页面中，我使用其完整 url 包含了相关的 javascript 文件。

显然，每次我想调试时，我都可以手动访问 url 然后附加，但是一键启动和调试会好得多。

我做错了什么？

Answer 1

请按照以下步骤操作:

1. 检查您是否安装了“VS Code - Debugger for Chrome”扩展。
2. 首先将这段代码放在 .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"]
    }
  ]
}

1. 转到 VS Code 中的 Debug模式并从“全栈”开始。

2. 启动 npm

引用这个:https://github.com/auchenberg/timey