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

Question

提问by monstertjie_za

I am trying to debug my Typescript code in Visual Studio Code, using the Chrome Debugger extension, but I am getting the "Unverified breakpoint" message on my breakpoint, and execution does not stop on my breakpoint.

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

Here is my launch.json file:

这是我的 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}"
        }
    ]
}

App Version:

应用程序版本：

Visual Studio Code: 1.25.1
Chrome: 67.0.3396.99

Visual Studio 代码：1.25.1
铬：67.0.3396.99

Any other suggestions on how I can solve this issue?

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

Answer 1

采纳答案by monstertjie_za

I finally found out whats wrong:

我终于发现了什么是错的：

When I read the definition of '${workspaceFolder}', it states the following:

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

the path of the folder opened in VS Code

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

My mistake:

我的错：

My path in Windows to my project was as follow: C:\Users\myusername\Documents\VSCode\Source\ProjectName

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

Through Visual Studio Code, I had the Sourcefolder open, and always needed to do a change directory (cd ProjectName) command in Integrated Terminalto 'ProjectName'. This lead to the .vscode folder and launch.json filebeing created in the Sourcefolder, and not the ProjectNamefolder.

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

The above mistake lead to the fact that the ${workspaceFolder}was pointing to the Sourcefolder, where no Angular components was, instead of pointing to the ProjectNamefolder.

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

The Fix:

修复：

In Visual Studio Code, open folder: C:\Users\myusername\Documents\VSCode\Source\ProjectNameand setup my launch.jsonin that directory.

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

Answer 2

回答by Robin Webb

Another update for @angular/cli 9.1.7 28/05/2020...

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

This is now my working configuration for @angular/cli 9.1.7. Removing the sourceMapPathOverrides

这是我现在对@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}"
  }]
}

My solution to the "Unverified breakpoint" issue.

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

Environment

环境

Angular CLI 8.1.1
Visual Studio Code 1.36.1
Debugger for Chrome extension 4.11.6

角 CLI 8.1.1
可视化工作室代码 1.36.1
Chrome 扩展调试器 4.11.6

The default .vscode/launch.json created in VSC via the "Add configuration" option will look similar to this (I have changed port from 8080 to 4200).

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

Adding item below resolves my issue with "Unverified breakpoint".

添加下面的项目解决了我的“未验证断点”问题。

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

Complete and working .vscode/launch.json:

完成并运行 .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}/*"
    }
  }]
}

There are some additional items that can be added:

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

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

However, I didn't need these in my case to resolve the problem.

但是，在我的情况下，我不需要这些来解决问题。

{
  // 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

回答by Michael Walsh

The above answer is probably going to solve a lot of problems but it didn't solve mine. Mine was a much simpler and more annoying problem...

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

The configuration settings in the launch.json file are case sensitive.

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

My "webRoot" entry was correctly spelled but I had a capital B in one of the words instead of a lower case b.

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

For example:

例如：

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

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

will not match a folder in your workspace with the name:

将不匹配工作区中具有以下名称的文件夹：

My.folder

我的。˚F年长

I hope this helps someone out there.

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

Answer 4

回答by Matt

There are many correct answers given. In my case a combination of all those answers helped, and it took me a long time to figure it out. I hope I can save you some headache time with this, so

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

let me summarize it step by stepwith reference to the answers above what helped me:

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

It is important to start VS code from the right folder (see answers from CodeChimpand monstertjie_za).
Open a console window and cdto the project folder.
Example:
cd myProject
code .
Make sure you're configuring the files in the right .vscodefolder.
The right .vscodefolder is a subdirectory of your project folder.
Note:if you have already mistakenly opened VS code in a subfolder level too deep, e.g. in the srcfolder, then you will find a .vscodefolder there (as it was in my case), containing configuration files which are useless for debugging.
Set up a debug configuration in the .vscode\launch.jsonfile.
Make sure that you have specified the right port for your application, in my case port 4200was doing fine.
Also make sure that the "webRoot"parameter is configured correctly (see answer from Stig Perez). 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 StackOverflow regarding how to display VS code variable values.
Note:If there is no such configuration yet, do the following to add it: Go to the debug extension (i.e. click on the side bar). In the dropdown of your debugger, select “Add Configuration...”, then press the blue “Add Configuration” button. Select “Launch Chrome” as configuration to be added.
Example configuration (launch.json):
```
"configurations": [
        {
                "type": "chrome",
                "request": "launch",
                "name": "Launch Chrome",
                "url": "http://localhost:4200",
                "webRoot": "${workspaceFolder}/projectsubfolder"
        }]
```
Replace projectsubfolderby the subfolder you might have in your project. Note that this is case-sensitive (see answer from Michael Walsh).
Now set the breakpoints in your application.
To launch your application with debugger, open a terminal window inside VS code, type
cd projectsubfolder
npm install & ng serve
This ensures the dependent packages are resolved and downloaded before your application is being compiled. Wait until the compilation is finished.
Then, click on the green triangle in the VS debugger which will launch a Chrome window with attached debugger.
Note:You don't need to run npm installevery time, just when packages/dependencies have changed. Most of the time, it is sufficient to execute ng serveto re-compile and run your code.

从正确的文件夹启动 VS 代码很重要（请参阅CodeChimp和 Monstertjie_za 的答案）。
打开控制台窗口并cd转到项目文件夹。
例子：
cd myProject
code .
确保您在正确的.vscode文件夹中配置文件。
正确的.vscode文件夹是项目文件夹的子目录。
注意：如果您已经错误地在太深的子文件夹级别中打开了 VS 代码，例如在src文件夹中，那么您将在.vscode那里找到一个文件夹（就像我的情况一样），其中包含对调试无用的配置文件。
在.vscode\launch.json文件中设置调试配置。
确保您为应用程序指定了正确的端口，在我的情况下，端口运行4200良好。
还要确保"webRoot"参数配置正确（请参阅Stig Perez 的回答）。在我的情况下，有必要向其中添加一个子文件夹。要找出变量指定的路径$(workspaceFolder)是什么，请查看我在 StackOverflow 上提出的有关如何显示 VS 代码变量值的问题。
笔记：如果还没有这样的配置，请执行以下操作来添加它：转到调试扩展（即单击侧栏）。在调试器的下拉菜单中，选择“添加配置...”，然后按下蓝色的“添加配置”按钮。选择“Launch Chrome”作为要添加的配置。
示例配置 ( launch.json)：
```
"configurations": [
        {
                "type": "chrome",
                "request": "launch",
                "name": "Launch Chrome",
                "url": "http://localhost:4200",
                "webRoot": "${workspaceFolder}/projectsubfolder"
        }]
```
替换projectsubfolder为您项目中可能包含的子文件夹。请注意，这是区分大小写的（请参阅Michael Walsh 的回答）。
现在在您的应用程序中设置断点。
要使用调试器启动您的应用程序，请在 VS 代码中打开一个终端窗口，键入
cd projectsubfolder
npm install & ng serve
这可确保在编译您的应用程序之前解析和下载依赖包。等待编译完成。
然后，单击 VS 调试器中的绿色三角形，这将启动一个带有调试器的 Chrome 窗口。
注意：您不需要npm install每次都运行，只是当包/依赖项发生变化时。大多数情况下，执行ng serve重新编译和运行代码就足够了。

Answer 5

回答by CodeChimp

In my case I had to define the sourceMapPathOverridesvalue like this:

在我的情况下，我必须定义这样的sourceMapPathOverrides值：

File launch.json(contained in .vscodefolder):

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

My source is in ${workspaceFolder}/project/app.

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

Answer 6

回答by Sampath

I have a folder structure as shown below and I have opened the zeroproject on VS Code.

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

zero/

零/

Then launch.json

然后启动.json

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

Answer 7

回答by Stig Perez

I also encountered the issue after renaming the project folder and it turned out the "webRoot" property was pointing to "${workspaceFolder}/src" instead of "${workspaceFolder}". Maybe this was snug in as part of an update for the "Debugger for Chrome" extension but since I did not receive any update I cannot verify this.

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

Updating "webRoot", restarting the ng servesession and starting a new debug session did the trick. Hope this will help someone with a similar scenerio.

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

Answer 8

回答by Super Jade

Unverified breakpoint

Unverified breakpoint

I found 3 causes for this problem:

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

The launch.jsonconfiguration URL automatically generated was incorrect. Make sure the port number matches the localhost port on which your web app runs. I changed mine to 3000 to solve the error:

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

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

I needed to set the correct workspace folder.
I needed to start my web app with npm startbefore debugging.

我需要设置正确的工作区文件夹。
我需要npm start在调试之前启动我的网络应用程序。

Answer 9

回答by ajayel

In our case this error was because of a windows symlink to have the source code folder available on two local drives. Opened the folder with vscode from the original folder now debugging works good.

在我们的例子中，这个错误是因为 Windows 符号链接在两个本地驱动器上提供了源代码文件夹。使用原始文件夹中的 vscode 打开文件夹现在调试效果很好。

Answer 10

回答by dotNET

After spending 3 precious hours of my life and going through many of the answers listed above, my problem was as simple as not having the following line in my php.ini:

在度过了我生命中宝贵的 3 个小时并经历了上面列出的许多答案之后，我的问题就像在我的php.ini.

xdebug.remote_autostart = 1

Before this I had already configured XDebug on my XAMPP, but my breakpoints simply wouldn't get hit. It was just that my debug server was not configured to be started automatically.

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

Hope this saves someone's day.

希望这可以挽救某人的一天。

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

提问by monstertjie_za

采纳答案by monstertjie_za

回答by Robin Webb

Environment

环境

回答by Michael Walsh

回答by Matt

回答by CodeChimp

回答by Sampath

回答by Stig Perez

回答by Super Jade

回答by ajayel

回答by dotNET

相关推荐

最近更新

标签

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

提问by monstertjie_za

采纳答案by monstertjie_za

回答by Robin Webb

Environment

环境

回答by Michael Walsh

回答by Matt

回答by CodeChimp

回答by Sampath

回答by Stig Perez

回答by Super Jade

回答by ajayel

回答by dotNET

相关推荐

TypeScript 和 Iterator：类型 'IterableIterator<T>' 不是数组类型

用于从文本中剪切列的 Windows 命令

TypeScript 中是否有类似于“keyof”的“valueof”？

windows 检查进程是否使用批处理文件返回 0

相关推荐

最近更新

标签