带有Chrome Debugger扩展的Visual Studio代码中的"未验证的断点"

Question

我正在尝试使用Chrome调试器扩展在Visual Studio代码中调试我的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

我看到如果您有以下Chrome版本__CODE__,则会收到此错误消息.如果我打开Chrome并导航到__CODE__,我可以看到我的Chrome版本__CODE__.当我导航到__CODE__Visual Studio Code时,Chrome的版本显示为__CODE__.

不确定这是否相关,但如何更新Visual Studio Code中显示的Chrome版本,以反映正确的Chrome版本？

关于如何解决这个问题的任何其他建议？

Answer 1

我终于发现了什么错误:

当我阅读'$ {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 .

Answer 2

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

环境

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

Answer 3

上面的答案可能会解决很多问题,但它并没有解决我的问题.我的问题更简单,更烦人......

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

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

例如:

"Webroot公司": "$ {} workspaceFolder /我的.˚F年长"

不会将工作区中的文件夹与名称匹配:

我的.˚F年长

我希望这可以帮助那里的人.

Answer 4

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

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

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

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重新编译并运行代码就足够了。

Answer 6

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

零/

然后启动.json

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

Answer 7

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