带有Chrome调试器扩展程序的Visual Studio Code中的“未验证的断点”

76

我正在尝试使用Chrome Debugger扩展在Visual Studio Code中调试我的Typescript代码，但是我在断点上收到了“未验证的断点”消息，并且在该断点处执行不停止。

这是我的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
  • 铬：67.0.3396.99

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

typescript  debugging  visual-studio-code  vscode-settings 
— monstertjie_za
source

Answers:

55

我终于发现出什么问题了：

当我阅读“ $ {workspaceFolder}”的定义时，它指出以下内容：

在VS Code中打开的文件夹的路径

我的错：

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

通过Visual Studio Code，我Source打开了文件夹，并且始终需要在Integrated Terminal“ ProjectName”中执行一个更改目录（cd ProjectName）命令。这导致.vscode folder and launch.json file在Source文件夹而不是ProjectName文件夹中创建。

上面的错误导致这样的事实：${workspaceFolder}指向Source文件夹中没有Angular组件的位置，而不是指向ProjectName文件夹。

解决方法：

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

— monstertjie_za
source
24
我正在阅读此书，但我不明白该怎么解决；）....如何设置$ {workspaceFolder}？
— PK
8
简单来说，在Visual Studio Code中，打开包含package.json的文件夹。
— 菲利普·恩甘
您如何阅读的定义${workspaceFolder}？（换句话说，如何在VS Code中验证该变量的值？）
— Matt
2
我提出了一个单独的问题，并得到了答案。如果有人也需要此信息。
— 马特
对于通过搜索到达这里的人们，这不是答案。如果您要调试的文件具有未保存的更改，则还将获得“未验证的断点”。
— 詹森·伍兹
29

@ 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}"
  }]
}

我对“未经验证的断点”问题的解决方案。

环境

  • Angular CLI 8.1.1
  • Visual Studio代码1.36.1
  • Chrome扩展程序4.11.6的调试器

通过“添加配置”选项在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}"
  }]
}

在下面添加项目可以解决“未验证的断点”问题。

"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}/*"
    }
  }]
}
— 罗宾·韦伯
source
如果我是第一次启动Chrome调试会话，但是如果我更改了断点，则不会对我有用。
— Shamshiel
谢谢！我以前从未遇到过这个问题，但是突然之间我发现自己无法调试新生成的Angular 8项目。这样就解决了。
— IRCraziestTaxi
13

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

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

我的“ webRoot”条目的拼写正确，但是其中一个单词的首字母为B，而不是小写的b。

例如：

“Webroot公司”： “$ {} workspaceFolder /我的。˚F年长”

将与您的工作空间中的文件夹名称不匹配：

我的 ˚F年长

我希望这可以帮助某个人。

— 迈克尔·沃尔什
source
我的工作更简单：在“ workspaceFolder”，“ webRoot”：“ $ {workspaceFolder /}”之后加一个斜杠
— Jake OPJ
10

就我而言，我必须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。

— 代码黑猩猩
source
1
添加webpack属性应该可以，但是我必须通过运行命令来找到路径：在启动/运行应用程序时，在VSCODE的调试控制台中使用.scripts
— AbhishekS
10

有许多正确答案。就我而言，所有这些答案的组合很有帮助，我花了很长时间才弄清楚。我希望我可以为此省些时间，所以

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

  1. 从正确的文件夹启动VS代码很重要（请参阅CodeChimp和 monstertjie_za的答案）。
    打开控制台窗口，然后cd转到项目文件夹。
    例：
    cd myProject
    code .
  2. 确保您在正确的.vscode文件夹中配置文件。
    右边的.vscode文件夹是项目文件夹的子目录。
    注意：如果您已经错误地在子文件夹级别（例如在src文件夹中）错误地打开了VS代码，则将在该文件夹中找到一个.vscode文件夹（如我的情况），其中包含对调试无用的配置文件。

  3. 在.vscode\launch.json文件中设置调试配置。
    确保为您的应用程序指定了正确的端口，在我看来，端口运行4200良好。
    还要确保"webRoot"正确配置了该参数（请参阅Stig Perez的回答）。在我的情况下，有必要添加一个子文件夹。要找出变量指定的路径$(workspaceFolder)是什么，请查看我在StackOverflow上问过的有关如何显示VS代码变量值的问题。
    注意：如果还没有这样的配置，请执行以下操作添加它：转到调试扩展（即，单击侧栏上的）。在调试器的下拉菜单中，选择“添加配置...”，然后按蓝色的“添加配置”按钮。选择“启动Chrome”作为要添加的配置。
    配置示例（launch.json）：

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

    替换projectsubfolder为项目中可能包含的子文件夹。请注意，这是区分大小写的（请参阅Michael Walsh的回答）。

  4. 现在在您的应用程序中设置断点。

  5. 要使用调试器启动应用程序，请在VS代码中打开一个终端窗口，键入，以
    cd projectsubfolder
    npm install & ng serve
    确保在编译应用程序之前已解析并下载了相关程序包。等到编译完成。
    然后，点击VS调试器中的绿色三角形，这将启动带有附加调试器的Chrome窗口。
    注意：您不需要npm install每次都在包/依赖项已更改时运行。在大多数情况下，执行ng serve重新编译和运行代码就足够了。

— 马特
source
这项工作对我来说，谢谢：{ "name": "Chrome", "type": "chrome", "request": "launch", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}/src", }
— 标记
5

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

零/

在此处输入图片说明

然后启动.json

  "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}/angular"
        }
    ]
— 萨姆帕斯
source
3 
Unverified breakpoint


我发现了此问题的3个原因：

  1. launch.json自动生成的配置URL不正确。确保端口号与运行Web应用程序的本地主机端口匹配。我将我的更改为3000以解决错误：
"configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]

  1. 我需要设置正确的工作区文件夹。

  2. npm start在调试之前，我需要使用启动我的Web应用程序。

— 超级翡翠
source
1
调试之前的最后一个“ npm start”帮助了我。
— himanshupareek66
2

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

更新“ webRoot”，重新启动ng serve会话并开始新的调试会话就可以了。希望这对有类似场景的人有所帮助。

— 斯蒂格·佩雷斯（Stig Perez）
source
2

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

— Divakar路飞
source
2

在我们的例子中，此错误是由于Windows符号链接导致源代码文件夹在两个本地驱动器上可用。从原始文件夹中使用vscode打开该文件夹，现在调试工作良好。

— 阿雅耶尔
source
2

我是用飞镖和飞镖来到这里的。我不知道，但删除launch.json的.vscode文件夹，解决了我的问题

— 帕拉夫·博哈拉
source
2

对我来说，未验证的断点是由于尝试设置断点时调试器正在运行而引起的。为了解决这个问题，我只需要关闭调试器，将断点设置为正常，然后重新启动调试器即可。

— 特拉森
source
1

如果您使用通过Webpack进行代码拆分，则在Chrome加载该模块之前（即，当您导航至应用程序的那部分时），断点不会被“验证”

— 杰森·杜菲尔（Jason Dufair）
source
1

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

— 利亚姆·克尼根（Liam Kernighan）
source
1

解决方案很简单：

  1. 单击文件->打开文件夹->（选择ur project的文件夹-包含package.json的文件夹）
  2. 打开调试->按播放按钮以创建新的Chrome配置。
  3. 设置新的断点！
  4. 请享用！
— 夹心
source
1

如果一切看起来都正确，但是仍然没有碰到断点，那么我需要做的更改是指定将要提供的确切文件名。例如在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中的设置并启用：允许断点无处不在

— 利·马蒂森（Leigh Mathieson）
source
1

在度过了我宝贵的3个小时的时间并经历了上面列出的许多答案之后，我的问题很简单，因为我的代码中没有以下内容php.ini：

xdebug.remote_autostart = 1

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

希望这可以节省某人的一天。

— 网
source
0

就我而言，问题是断点设置在声明函数的行上

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;
}
— 毛里西奥·格拉西亚·古铁雷斯
source
0

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

— 达菲
source
0

对我来说，解决方案是将以下行添加到launch.json文件：“ requireExactSource”：false。此后，重新启动VSC，然后尝试是否可以运行。

— 里奥萨拉维亚
source
0

我已经在VS代码my-app文件夹中打开了客户端文件夹和服务器文件夹所在的文件夹。我必须从这里更改launch.json

"webRoot": "${workspaceFolder}"

对此

"webRoot": "${workspaceFolder}\\client"
— 扬·布鲁斯
source
0

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

如果要在属于延迟加载的模块的代码中设置断点，并且尚未在浏览器中加载该模块，则VS代码将无权访问源映射以验证断点！

因此，仅在加载要调试的延迟加载模块时才设置断点！

— 汤姆
source
我的情况也是如此。我在index.js之后的文件中设置了断点，这是我的入门js文件，它们从未被命中。但是我先在index.js中的函数上设置断点，并且断点肯定在那里停止，然后我为其他文件设置了断点，它们也停止了，好像activated在index.js之后。
— 姚莉
只要您触发在vscode中使用相关断点将模块加载到浏览器的路由，它就应该起作用
— Tom
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.