JS 断点在 Visual Studio Code + Chome 中未绑定答案

【问题标题】：JS breakpoints not binding in Visual Studio Code + ChomeJS 断点在 Visual Studio Code + Chome 中未绑定
【发布时间】：2021-11-20 15:50:46
【问题描述】：

这里的第一个问题...

我很难用 VS Code 和 Chrome 调试 JavaScript。我曾经安装过“Debugger for Chrome”扩展程序，它运行良好。但是，在 VS Code 嵌入此功能并弃用扩展后，我的断点不再绑定。页面加载后，它们会变灰，显示为未绑定。如果我单击“切换激活断点”图标，它们就会开始工作。如果页面重新加载，我必须重新加载，相当痛苦......

我在 Chrome 或 Edge 中都尝试了“启动”和“附加”，同样的问题。

我有一台 Win11 机器，我的项目在“C:\wamp64\www\sistemas\felina\”文件夹中运行。这是我的launch.json：

"version": "0.2.0",
"console": "integratedTerminal",
"configurations": [
    {
        "name": "teste",
        "type": "pwa-chrome",
        "request": "launch",
        "url": "http://localhost/sistemas/felina/TESTE.html",
        "webRoot": "${workspaceFolder}",
    },
]

我去命令面板并运行“调试：诊断断点问题”，结果如下：

debugger diagnose result

我很好奇为什么会显示

“C:/wamp64/www/sistemas/felina/C:/wamp64/www/sistemas/felina/js/teste.js:5:1”。

路径重复。

它说“如果您从子文件夹构建，您可能需要调整您的 launch.json 中的 webRoot，或者调整您的 sourceMapPathOverrides。”但我不知道该怎么做。

我正在使用 VS Code 版本 1.62.3（最新版本）。

【问题讨论】：

标签： javascript debugging visual-studio-code

【解决方案1】：

所以我最终管理了它，它确实与路径有关。以下是我的解决方法：

首先，在我的本地服务器中，所有项目都在这个文件夹结构中：

C:/wamp64/www/sistemas/projectA/

C:/wamp64/www/sistemas/projectB/

(..)

C:/wamp64/www/sistemas/projectZ/

但是，我使用一个虚拟主机，它指向“C:/wamp64/www”。

我注意到这里很多人实际上为每个项目创建了一个虚拟主机。所以经过反复试验，我得出了两个解决方案：

解决方案 A：为每个项目创建一个虚拟主机，指向与 VS Code 的 {workspaceFolder} 相同的路径。在这种情况下，路径将是 C:/wamp64/www/sistemas/felina。在这里，launch.json 会是这样的：

"version": "0.2.0",
"console": "integratedTerminal",
"configurations": [
    {
        "name": "Launch Felina Site",
        "type": "pwa-chrome",
        "request": "launch",
        "url": "http://felinavirtualhost/login.html",
        "webRoot": "${workspaceFolder}",
    },
]

解决方案 B：为所有项目使用相同的虚拟主机，并将其路径硬编码为 launch.json 中的 webRoot：

"version": "0.2.0",
"console": "integratedTerminal",
"configurations": [
    {
        "name": "Launch Felina Site",
        "type": "pwa-chrome",
        "request": "launch",
        "url": "http://localhost/sistemas/felina/login.html",
        "webRoot": "C:/wamp64/www/",
    },
]

为了记录，我选择了解决方案 B，实施起来似乎工作量较少......

【讨论】：