调试 – 在typescript中的Visual Studio代码断点

2023年7月20日 302次阅读

使用Visual Studio代码,当我在.ts文件中设置断点时,它不会被命中. (调试时不是红色).

但是,如果我在编译的JS中设置断点,那么当我单步执行代码时,它会将我交换到ts文件.然后我的.ts文件中的任何断点都开始工作.

有没有办法让.ts文件断点正常工作(无需先在我编译的.js文件中设置一个断点)？

注意：我看了这个问题：Setting breakpoints in Typescript Jasmine tests with Visual Studio Code,这正是我的问题.然而,该问题的答案是升级到VS Code 0.10.9和Typescript 1.8.2.我在VS Code 1.8.1和Typescript 2.1.4上.

最佳答案 如果不了解您的设置的特殊性,很难确切地知道您需要更改什么.也就是说,这里有一些想法
and a demo project.还有一个很好的对话
in this GitHub issue.以下是一个可在我的机器上运行的最小TypeScript项目设置.

.vscode / launch.json设置程序,prelaunchTask,outFiles和sourceMaps属性.

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceRoot}/index.ts",
            "cwd": "${workspaceRoot}",
            "preLaunchTask": "tsc",
            "outFiles": [
                "${workspaceRoot}/**/*.js"
            ],
            "sourceMaps": true
        }
    ]
}

.vscode / settings.json告诉Visual Studio代码使用我们在node_modules中安装的TypeScript版本,而不是使用TypeScript的全局安装.

{
    "typescript.tsdk": "./node_modules/typescript/lib"
}

.vscode / tasks.json定义tsc -p. shell命令,它是我们在launch.json中定义的prelaunchTask.

{
    "command": "tsc",
    "isShellCommand": true,
    "args": ["-p", "."]
}

index.ts

console.log('foo');
console.log('bar'); // a breakpoint here gets hit.

package.json在本地安装TypeScript,以便我们更好地控制我们使用的版本.

{
  "devDependencies": {
    "typescript": "^2.1.4"
  }
}

tsconfig.json告诉编译器生成源映射.

{
    "compilerOptions": {
        "target": "es5",
        "sourceMap": true
    }
}
点赞