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

时间：2018-07-25 04:10:03

标签： typescript debugging visual-studio-code vscode-settings

我正在尝试使用Chrome调试器扩展程序在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
  • Chrome：67.0.3396.99

关于如何解决此问题的其他建议？

26 个答案:

答案 0 :(得分：37)

我终于发现了什么问题：

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

  

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

我的错误：

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

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

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

修复：

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

答案 1 :(得分：9)

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

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

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

例如：

  

“ webRoot”：“ $ {workspaceFolder} /我的。 F 旧”

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

  

我的。 f 旧

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

答案 2 :(得分：8)

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

环境

  • 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}/*"
    }
  }]
}

答案 3 :(得分：7)

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

请参考以下对我有帮助的答案逐步进行总结：

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

  3. 在.vscode\launch.json文件中设置调试配置。
    确保已为应用程序指定了正确的端口，在我的情况下，请确保为 port 4200 < / strong>正常。
    还要确保正确配置"webRoot"参数（请参见Stig Perez的答案）。在我的情况下，有必要添加一个子文件夹。要找出变量$(workspaceFolder)指定的路径是什么，请查看我在StackOverflow regarding how to display VS code variable values.中问过的问题。
    注意：这样的配置，请执行以下操作以添加它：转到调试扩展（即，单击侧栏上的）。在调试器的下拉菜单中，选择“添加配置...”，然后按蓝色的“添加配置”按钮。选择“启动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重新编译并运行代码就足够了。

答案 4 :(得分：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中。

答案 5 :(得分：3)

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

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

答案 6 :(得分：2)

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

答案 7 :(得分：2)

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

答案 8 :(得分：2)

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

零/

enter image description here

然后 launch.json 

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

答案 9 :(得分：1)

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

答案 10 :(得分：1)

Unverified breakpoint


我找到了导致此问题的2个原因：

  1. 我需要set the correct workspace folder。

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

答案 11 :(得分：1)

在度过了3个宝贵的小时并经历了上面列出的许多答案之后，我的问题很简单，就像在我的php.ini中没有以下行一样： 

xdebug.remote_autostart = 1

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

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

答案 12 :(得分：1)

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

答案 13 :(得分：1)

解决方案很简单：

  1. 单击“文件”->“打开文件夹”->（选择您的项目文件夹-包含package.json的文件夹）
  2. 打开调试->按下播放按钮以创建新的Chrome配置。
  3. 设置新的断点！
  4. 享受！

答案 14 :(得分：1)

对我来说，我的断点已关闭：

enter image description here

答案 15 :(得分：1)

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

答案 16 :(得分：0)

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

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

所以只有在加载了要调试的延迟加载模块时才设置断点！

答案 17 :(得分：0)

我已经在VS代码 my-app 文件夹中打开了 client 文件夹和 server 文件夹。 我不得不从这里更改launch.json 

"webRoot": "${workspaceFolder}"

对此

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

答案 18 :(得分：0)

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

enter image description here

答案 19 :(得分：0)

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

答案 20 :(得分：0)

npm i已将其修复。创建新文件夹/文件时，有时会得到未验证的断点，通常可以做到这一点。

答案 21 :(得分：0)

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

答案 22 :(得分：0)

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

答案 23 :(得分：0)

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

答案 24 :(得分：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;
}

答案 25 :(得分：0)

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

相关问题
最新问题