从 Visual Studio Code 中启动 Chrome 和调试答案

【问题标题】：Launching Chrome and debugging from within Visual Studio Code从 Visual Studio Code 中启动 Chrome 和调试
【发布时间】：2016-01-10 08:09:53
【问题描述】：

我正在使用 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，然后每次我想调试时附加，但是一键启动和调试会好得多。

我做错了什么？

【问题讨论】：

标签： javascript google-chrome debugging visual-studio-code

【解决方案1】：

请按以下步骤操作：

检查您是否安装了“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"]
    }
  ]
}

在 VS Code 中进入调试模式并从“全栈”开始。
启动 npm

请参考：https://github.com/auchenberg/timey

【讨论】：

嗨@LennartKloppenburg，感谢您的建议。我已经编辑和格式化了。
嗨 Vijay，这个配置还有效吗？我在 vscode 1.16.1 上遇到错误。基本上我有一个带有一些代码的 JS 文件，当我尝试调试时无法连接到运行时进程，10000 毫秒后超时 - （原因：无法连接到目标：连接 ECONNREFUSED 127.0.0.1:9229）。

【解决方案2】：

在我的情况下，在 Ubuntu 14.04 上，添加后它可以工作

"runtimeExecutable": "/usr/bin/chromium-browser"

但是我必须提前启动 chrome。

【讨论】：

【解决方案3】：

原来是VSCode的一个bug，在最新版本（1.2.1）中修复了。更新后，我必须做三件事。

更新 Chrome 扩展程序

在 VSCode 中，按 CTRL+P 调出命令面板，然后：

Extensions: Show Outdated Extensions

此时它会让您更新它们。在此处了解更多信息：https://code.visualstudio.com/Docs/editor/extension-gallery#_update-an-extension

编辑启动配置

它们现在需要 Web 根目录的绝对路径。因此，我不得不更改 launch.json 文件的 webRoot 属性以明确包含工作区根目录。

"webRoot": "${workspaceRoot}/../../..",

调试前关闭所有 Chrome 副本

这很烦人。但它有效。

【讨论】：