Visual Studio 带有 Chrome 调试器扩展的代码中的“未验证断点”

Question

我正在尝试使用 Chrome 调试器扩展在 Visual Studio 代码中调试我的 Typescript 代码，但我在我的断点上收到 "Unverified breakpoint" 消息，并且执行没有在我的断点处停止。

这是我的 launch.json 文件：

{
    linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "sourceMaps": true,
            "webRoot": "${workspaceFolder}"
        }
    ]
}

应用程序版本：

Visual Studio 代码：1.25.1
Chrome: 67.0.3396.99

关于如何解决这个问题还有其他建议吗？

Answer 1

我终于发现问题所在了：

当我阅读“${workspaceFolder}”的定义时，它声明如下：

the path of the folder opened in VS Code

我的错误：

我在 Windows 中的项目路径如下：C:\Users\myusername\Documents\VSCode\Source\ProjectName

通过 Visual Studio 代码，我打开了 Source 文件夹，并且总是需要在 Integrated Terminal 中执行更改目录 (cd ProjectName) 命令到 'ProjectName'。这导致 .vscode folder and launch.json file 在 Source 文件夹中创建，而不是在 ProjectName 文件夹中创建。

上述错误导致 ${workspaceFolder} 指向 Source 文件夹，其中没有 Angular 组件，而不是指向 ProjectName文件夹。

修复：

在 Visual Studio 代码中，打开文件夹：C:\Users\myusername\Documents\VSCode\Source\ProjectName 并在该目录中设置我的 launch.json。

Answer 2

上面的答案可能会解决很多问题，但它并没有解决我的问题。我的是一个更简单也更烦人的问题...

launch.json 文件中的配置设置区分大小写。

我的 "webRoot" 条目拼写正确，但我在其中一个单词中使用大写字母 B 而不是小写字母 b。

例如：

"webRoot": "${workspaceFolder}/My.Folder"

不会匹配您工作区中名称为：

的文件夹

My.folder

我希望这对那里的人有所帮助。

Answer 3

我在重命名项目文件夹后也遇到了这个问题，结果是“webRoot”属性指向“${workspaceFolder}/src”而不是“${workspaceFolder}”。也许这是作为“Chrome 的调试器”扩展更新的一部分，但由于我没有收到任何更新，我无法验证这一点。

更新“webRoot”，重新启动 ng serve 会话并启动新的调试会话就成功了。希望这对有类似情况的人有所帮助。

Answer 4

如果您通过 webpack 使用代码拆分，您的断点不会 "verified" 直到 Chrome 加载该模块（即通常当您导航到应用程序的那部分时）

Answer 5

在我的例子中，我必须像这样定义 sourceMapPathOverrides 值：

文件 launch.json（包含在 .vscode 文件夹中）：

{
  // 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": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "smartStep": true,
      "internalConsoleOptions": "openOnSessionStart",
      "sourceMapPathOverrides": {
        "webpack:///*": "${webRoot}/project/app/*"
      }
    }
  ]
}

我的来源在 ${workspaceFolder}/project/app.

Answer 6

我的问题是源映射配置不正确。确保您的实际 TS 源在 Chrome 调试扩展中的“源”选项卡上可见，并首先尝试将断点放在那里。也许它会对某人有所帮助。

Answer 7

给出了很多正确答案。就我而言，所有这些答案的组合都有帮助，我花了很长时间才弄明白。我希望我可以用这个来节省你一些头痛的时间，所以

让我总结一下逐步参考上面的答案对我有帮助：

从正确的文件夹启动 VS 代码很重要（请参阅和 )。
打开控制台window和cd到项目文件夹。
示例：
cd myProject
code .
确保您在正确的 .vscode 文件夹中配置文件。
正确的 .vscode 文件夹是项目文件夹的子目录。
注意：如果你已经错误地打开了太深的子文件夹级别的VS代码，例如在 src 文件夹中，然后你会在那里找到一个 .vscode 文件夹（就像我的情况一样），其中包含对调试无用的配置文件。
在 .vscode\launch.json 文件中设置调试配置。
确保您为应用程序指定了正确的端口，在我的例子中 端口 4200 运行良好。
还要确保 "webRoot" 参数配置正确（参见 ). In my case it was necessary to add a subfolder to it. To find that out what the path specified by the variable $(workspaceFolder) is, check out the question I've asked at Whosebug
[= 的回答44=]注意：如果还没有这样的配置，请执行以下操作添加它：转到调试扩展（即单击侧栏）。在调试器的下拉列表中，select“添加配置...”，然后按蓝色的“添加配置”按钮。Select“启动Chrome”作为要添加的配置。
示例配置(launch.json):
```
"configurations": [
        {
                "type": "chrome",
                "request": "launch",
                "name": "Launch Chrome",
                "url": "http://localhost:4200",
                "webRoot": "${workspaceFolder}/projectsubfolder"
        }]
```
将 projectsubfolder 替换为您在项目中可能拥有的子文件夹。请注意，这是区分大小写的（请参阅的回答）。
现在在您的应用程序中设置断点。
要使用调试器启动您的应用程序，请在 VS 代码中打开一个终端 window，键入
cd projectsubfolder
npm install & ng serve
这可确保在编译您的应用程序之前解析并下载依赖包。等待编译完成。
然后，单击 VS 调试器中的绿色三角形，它将启动 Chrome window 和附加的调试器。
注意：不需要每次都运行npm install，只要packages/dependencies发生变化即可。大多数时候，执行 ng serve 重新编译和运行您的代码就足够了。

Answer 8

对我来说，我的断点被关闭了：

Answer 9

在我的例子中，问题是断点设置在声明函数的行上

openDetails(data: Asset) {         <-- The break point was here
    this.datailsOpen = true;
    this.currentAsset = data;
}

解决方法：将其移动到函数体内

openDetails(data: Asset) {         
    this.datailsOpen = true;        <-- Move the break point here
    this.currentAsset = data;
}

Answer 10

解决方法很简单：

单击文件->打开文件夹->（select 您项目的文件夹 - 包含 package.json 的文件夹）
打开调试-> 按播放按钮创建一个新的 Chrome 配置。
设置新的断点！
尽情享受吧！

Answer 11

如果一切看起来都设置正确但断点仍未命中，我需要做的更改是指定将提供的确切文件名。例如在 NodeJS 上，Express 仅指定 localhost:3000 不会在我的断点处停止，但指定 localhost:3000/index.html 会按预期工作

完整配置：

我的文件夹在 VSCode 中打开：learningPixi 具有完整文件夹位置 (Ubuntu Linux)：/home/leigh/node/pixi-tut/learningPixi

我的文件夹结构是：

/home/leigh/node/pixi-tut/learningPixi/.vscode/launch.json /home/leigh/node/pixi-tut/learningPixi/public/index.html /home/leigh/node/pixi-tut/learningPixi/server.js

我的 launch.json 文件的内容：

{  
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000/index.html",
      "webRoot": ${workspaceFolder}/public",
      "skipFiles": ["pixi.min.js"]
    }
  ]
}

"skipFiles" 也非常有用，否则调试器会进入每个函数调用

我的（非常基本的）快速服务器配置只是为了在静态文件中调试 JavaScript 是：

const express = require('express');
const path = require('path');

const app = express();
app.use(express.static(path.join(__dirname, '/public')));
app.listen(3000, () => console.log('App started on port 3000'));

并根据上面的文件夹结构确保 index.html 位于 /public 文件夹

如果从 HTML 文件中调试 JavaScript，您可能还需要转到 VSCode 中的设置并启用：允许无处不在的断点

Answer 12

我的文件夹结构如下所示，我已经在 VS Code 上打开了 zero 项目。

零/

然后launch.json

  "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}/angular"
        }
    ]

Answer 13

在我的例子中，我在运行的项目根目录中有一个 main.js 文件作为电子应用程序。如果这个 main.js 文件被删除，问题就解决了。

Answer 14

我收到此错误只是因为我的调试配置中没有 "sourceMaps": true。

Answer 15

在我生命中度过了宝贵的 3 小时并浏览了上面列出的许多答案之后，我的问题很简单，就是我的 php.ini 中没有以下行：

xdebug.remote_autostart = 1

在此之前，我已经在 XAMPP 上配置了 XDebug，但我的断点根本不会被命中。只是我的调试服务器没有配置自动启动。

希望这可以节省一些人的时间。

Answer 16

Unverified breakpoint

我发现这个问题有 3 个原因：

自动生成的launch.json配置URL不正确。确保端口号与运行 Web 应用程序的本地主机端口相匹配。我把我的改成3000来解决错误：

"configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]

我需要。
我需要在调试前用 npm start 启动我的网络应用程序。

Answer 17

npm i 为我修复了它。在创建新的 folder/file 时，我有时会遇到未经验证的断点，而且通常会这样。

Answer 18

@angular/cli 9.1.7 28/05/2020 的另一个更新...

这是我现在为@angular/cli 9.1.7 工作的配置。删除 sourceMapPathOverrides

    "sourceMapPathOverrides": {
      "*": "${webRoot}/*"
    }

{
  // 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": [{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome against localhost",
    "url": "http://localhost:21460",
    "webRoot": "${workspaceFolder}"
  }]
}

我对 "Unverified breakpoint" 问题的解决方案。

环境

Angular 命令行界面 8.1.1
Visual Studio 代码 1.36.1
Chrome 扩展 4.11.6

通过 "Add configuration" 选项在 VSC 中创建的默认 .vscode/launch.json 看起来与此类似（我已将端口从 8080 更改为 4200）。

{
  // 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": [{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome against localhost",
    "url": "http://localhost:4200",
    "webRoot": "${workspaceFolder}"
  }]
}

添加下面的项目解决了我的 "Unverified breakpoint" 问题。

"sourceMapPathOverrides": {
      "*": "${webRoot}/*"
    }

完成并工作。vscode/launch.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": [{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome against localhost",
    "url": "http://localhost:4200",
    "webRoot": "${workspaceFolder}",
    "sourceMapPathOverrides": {
      "*": "${webRoot}/*"
    }
  }]
}

可以添加一些额外的项目：

 "breakOnLoad": true,
 "sourceMaps": true,

但是，我不需要这些来解决问题。

{
  // 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": [{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome against localhost",
    "url": "http://localhost:4200",
    "webRoot": "${workspaceFolder}",
    "breakOnLoad": true,
    "sourceMaps": true,
    "sourceMapPathOverrides": {
      "*": "${webRoot}/*"
    }
  }]
}

Answer 19

我不得不删除我的 .vscode 文件夹并重新生成它。此外，该文件夹指向错误的路径，因此我不得不将其更改回我当前的项目文件夹路径。谢谢

Answer 20

我的解决方案是在 launch.json 文件中添加以下行： "requireExactSource"：错误。之后，重启VSC试试看能不能用。

Answer 21

我在 VS 代码中打开 my-app 文件夹，其中 client 文件夹和 server文件夹是。我不得不从这个

改变 launch.json

"webRoot": "${workspaceFolder}"

至此

"webRoot": "${workspaceFolder}\client"

Answer 22

我刚刚发现的另一个答案与延迟加载模块有关。

如果您想在属于惰性加载模块的代码中设置断点，并且您尚未在浏览器中加载该模块，VS 代码将无法访问源映射来验证断点！

所以只有当你加载了你想调试的懒加载模块时才设置断点！

Answer 23

在我们的例子中，这个错误是因为 windows 符号链接使源代码文件夹在两个本地驱动器上可用。从原始文件夹中打开带有 vscode 的文件夹，现在调试工作正常。

Answer 24

我是一边用flutter和dart一边过来的。我不知道，但是删除 .vscode 文件夹中的 launch.json 解决了我的问题

Answer 25

对我来说，未验证断点是因为当我尝试设置断点时调试器是运行。为了解决，我只是关闭调试器，设置断点正常，重新启动调试器。

Answer 26

对于尝试调试另一个包或 SDK 的人，我需要单击调试我的代码 + 包 + SDK

Visual Studio 带有 Chrome 调试器扩展的代码中的“未验证断点”

“Unverified breakpoint” in Visual Studio Code with Chrome Debugger extension

debugging

typescript

visual-studio-code

vscode-settings

解决方法很简单：

环境