VS Code 未验证断点

Posted 2023-03-07

【中文标题】VS Code 未验证断点

【英文标题】：VS Code Unverified Breakpoints

【发布时间】：2018-11-21 02:15:01

【问题描述】：

我正在尝试在 VS Code (v. 1.24.0) 中调试 Node/Express TypeScript 应用程序，并且在调试期间我的所有断点都显示为灰色。

错误是“未验证的断点，已设置断点但尚未绑定。”我已经搜索过，但无法弄清楚我的配置有什么问题。控制台没有错误，我选择进程时调试器附加成功，但是断点不起作用。

如何调试？

基本文件夹结构：

/.vscode
/src/server.ts
/dist/server.js
launch.json
tsconfig.json

launch.json

            "type": "node",
            "request": "attach",
            "name": "Attach by Process ID",
            "processId": "$command:PickProcess",
            "protocol": "inspector",
            "address": "localhost",
            "port": 8080,
            "restart": true,
            "preLaunchTask": "npm: build",
            "sourceMaps": true,
            "outFiles" : [ "$workspaceFolder/dist/**/*.js" ]
        ,

tsconfig.json

  "compilerOptions": 
    "alwaysStrict": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "target": "es6",
    "outDir": "dist",
    "rootDir": "src",
    "sourceMap": true,
    "typeRoots": [ "node_modules/@types" ]
  ,
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]

tasks.json

"version": "2.0.0",
    "tasks": [
        
            "type": "npm",
            "script": "build",
            "group": 
                "kind": "build",
                "isDefault": true
            
         ]

【问题讨论】：

他们是否一直处于灰色状态？文件尚未编译/渲染的好变化。您是否尝试过一些 typescript 的源地图配置，您使用的是 webpack 吗？

我还要补充一点，这很可能不是 VS Code 问题。更多的配置在某个地方。

@DylanWright 同意了。我只是找不到正确的配置。是的，它们保持灰色。是的，我已经尝试过打字稿配置。不，不使用 webpack。

【参考方案1】：

对于遇到此错误的任何人，我都能找到解决方案。问题在于我启动 Node 进程的方式，而不是源映射的映射（这会产生不同的错误）。

为了附加到该进程，我从 VS Code 终端启动它，如下所示：

node --inspect dist/server.js

launch.json:

            "type": "node",
            "request": "attach",
            "name": "Attach by Process ID",
            "processId": "$command:PickProcess",
            "protocol": "inspector",
            "address": "localhost",
            "port": 8080,
            "restart": true,
            "preLaunchTask": "npm: build",
            "sourceMaps": true,
            "outFiles" : [ "$workspaceRoot/dist/**/*.js" ]
        ,

【参考方案2】：

我今天遇到了这个问题，我尝试重新构建并重新运行调试器。我关闭了所有 VS Code 实例并重新启动，现在可以工作了。

【参考方案3】：

我发现我试图在一个文件中设置的所有断点都遇到了这个问题，但其余的都没有。

我将文件 dispatcher.js 命名为小写，但将其拉入节点：

const  Dispatcher  = require('./Dispatcher')

内容是一个 javascript 类，被导出为：

module.exports =  Dispatcher 

【参考方案4】：

我在使用 vscode 1.25 时遇到了这个问题

看起来它是在调试会话运行时更改包含断点的源 (.ts) 时触发的。可以通过重新保存源代码或重新切换断点来重新启用断点。

但是，如果源已更改，则必须重新启动调试才能与源同步。

这个问题似乎也蔓延到了编辑模式，即使离开调试模式，断点也会保持“未验证”。同样，在这种情况下，重新保存源似乎会重新启用断点。

【参考方案5】：

我遇到了同样的问题；如果出现错误，调试器将报告错误，但如果没有错误，它不会在断点处停止。为我解决的更改是指定将提供的确切文件名，而不仅仅是 localhost。例如在 NodeJS 上，仅指定 localhost:3000 的 Express 不会在我的断点处停止，但指定 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 中的设置并启用：Allow Breakpoints Everywhere

【参考方案6】：

对于未来的读者：我遇到了这个问题，因为我在尝试调试之前运行了我的应用的 prod 版本。 prod 构建删除了 VS Code 成功调试所需的源映射，因此我运行了我的应用程序的开发构建，然后进行了调试，一切都按预期工作。