VS Code 无法连接到谷歌浏览器进行 html 调试答案

【问题标题】：VS Code can't connect to Google Chrome for html debugVS Code 无法连接到谷歌浏览器进行 html 调试
【发布时间】：2022-01-17 03:46:34
【问题描述】：

我在通过 html vscode 调试连接到 chrome 时遇到问题。每次我进入运行菜单并点击'开始调试'或'运行而不调试'时，谷歌浏览器都会打开并显示新标签而不是我的文件调试。回到vscode，发现调用栈是空的。我也尝试过使用launch.json 文件。我以前没有遇到过这个问题。我能够在没有 chrome 调试器扩展（现已弃用）的情况下使用 chrome 调试 html。我不知道为什么我现在遇到这些问题。请问有人可以帮我解决这个问题吗？谢谢。

注意：我最近卸载并安装了最新版本的 chrome，还安装了 chrome dev。我不知道这是否与这个问题有关。

【问题讨论】：

标签： html visual-studio google-chrome visual-studio-code vscode-debugger

【解决方案1】：

打开html文件，然后运行->“启动Chrome”。

lauch.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": [            
    {
      "name": "Listen for XDebug",
      "type": "php",
      "request": "launch",
      "port": 9003
    },
    {
      "name": "Launch currently open script",
      "type": "php",
      "request": "launch",
      "program": "${file}",
      "cwd": "${fileDirname}",
      "port": 9003
    },
    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach Chrome",
      "url": "http://localhost/${workspaceFolderBasename}/${relativeFile}",
      "webRoot": "${workspaceFolder}",
      "port": 80,
      "userDataDir": "${workspaceFolder}/.vscode/chrome",
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost/${workspaceFolderBasename}/${relativeFile}",
      "webRoot": "${workspaceFolder}",
      "userDataDir": "${workspaceFolder}/.vscode/chrome",
    },
  ]
}

【讨论】：

【解决方案2】：

不是直接回答您的问题，但您可以尝试使用括号 - https://brackets.io/

【讨论】：

在括号中使用内置的 HTML 预览功能比在 VS Code 中苦苦挣扎要容易得多