Visual Studio Code：在浏览器中打开当前 HTML 文件 (launch.json)

Question

我正在使用 Visual Studio Code，并希望在 Web 浏览器（本例中为 Microsoft Edge）中调试当前打开的 HTML 文件。我的项目文件夹是本地安装的 Web 服务器 (http://localhost) 的 webroot。 我已经安装了 VS Code 扩展“Microsoft Edge Tools for VS Code”并创建了一个包含以下内容的 launch.json 配置：

{
"configurations": [
    {
        "name": "Launch Microsoft Edge and open the Edge DevTools",
        "request": "launch",
        "type": "vscode-edge-devtools.debug",
        "webRoot": "${workspaceFolder}",
        "url": "http://localhost/${relativeFile}"
    }
  ]
}

但是，当我启动此调试器时，Microsoft Edge 打开 URL http://localhost/$%7BrelativeFile%7D，因此变量 ${relativeFile} 似乎未解析。

我该如何解决这个问题并实现我的目标？

Answer 1

relativeFile 将引用当前打开的文件相对于workspaceFolder。需要指定VS Code中打开的文件夹的路径，webroot

{

"configurations": [
    {
        "name": "Launch Microsoft Edge and open the Edge DevTools",
        "request": "launch",
        "type": "vscode-edge-devtools.debug",
        "webRoot": "${workspaceFolder}"      // "${workspaceFolder}/src"
        "url": "http://localhost/${relativeFile}"
    }
  ]
}

参考：-https://code.visualstudio.com/docs/editor/variables-reference

每个 cmets 更新：-

%7B 和 %7D 是 { 和 } 的 ASCII 码。当你在 launch.json 中时，检查 VScode 的右下角，看看编码是什么？应该是UTF-8