如何在 Visual Studio 代码中调试打字稿文件

Posted

技术标签:

【中文标题】如何在 Visual Studio 代码中调试打字稿文件【英文标题】：how to debug typescript files in visual studio code 【发布时间】：2015-09-19 01:53:49 【问题描述】：

使用 0.3 版的 Visual Studio 代码，我不确定如何启用源映射和调试 ts 文件

我收到以下错误can't launch program '/Projects/app-server/server.ts'; enabling source maps might help

如何启用源映射和打字稿调试。 Sourcemap 在我的

中设置为 true

tsconfig.json


    "compilerOptions": 
        "target": "ES5",
        "module": "commonjs",
        "sourceMap": true

launch.json


    "version": "0.1.0",
    // List of configurations. Add new configurations or edit existing ones.  
    // ONLY "node" and "mono" are supported, change "type" to switch.
    "configurations": [
        
            // Name of configuration; appears in the launch configuration drop down menu.
            "name": "Launch server.ts",
            // Type of configuration. Possible values: "node", "mono".
            "type": "node",
            // Workspace relative or absolute path to the program.
            "program": "server.ts",
            // Automatically stop program after launch.
            "stopOnEntry": true,
            // Command line arguments passed to the program.
            "args": [],
            // Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
            "cwd": ".",
            // Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
            "runtimeExecutable": null,
            // Environment variables passed to the program.
            "env":  
        , 
        
            "name": "Attach",
            "type": "node",
            // TCP/IP address. Default is "localhost".
            "address": "localhost",
            // Port to attach to.
            "port": 5858
        
    ]

【问题讨论】：

你有"program": "server.ts"，但你应该执行输出的js文件，并且在那个js文件中将是指向ts文件的必要源映射信息 最初使用源映射尝试过，但它不会在 ts 文件中的断点处停止 我收到同样的错误信息。升级到TypeScript 0.5版本后没有变化。 做@Brocco 所说的对我有用。确保在 tsconfig.json 文件中包含 "sourceMap": true。 【参考方案1】：

这个配置对我来说很好用：

项目分布

|-- .vscode
    |----- launch.json
|-- bin
    |----- app.js
    |----- app.js.map
|-- src
    |----- app.ts
|-- node_modules
    |-- [..]
|-- tsconfig.json
|-- [...]

想法是在src文件夹下编译typescript，放到bin文件夹下。

tsconfig.json

激活sourceMap 选项很重要。 


    "compilerOptions": 
        "emitDecoratorMetadata": true,
        "module": "commonjs",
        "target": "ES5",
        "outDir": "bin",
        "rootDir": "src",
        "sourceMap": true

launch.json

==== 编辑 ====

这是我目前在 Visual Studio Code v1 中使用的配置：


    "version": "0.2.0",
    "configurations": [
        
            "args": [],
            "cwd": "$workspaceRoot",
            "env": 
                "NODE_ENV": "development"
            ,
            "externalConsole": false,
            "name": "DEBUG",
            "outDir": "$workspaceRoot/bin",
            "preLaunchTask": "compile",
            "program": "$workspaceRoot/src/app.ts",
            "request": "launch",
            "runtimeArgs": [
                "--nolazy"
            ],
            "runtimeExecutable": null,
            "sourceMaps": true,
            "stopOnEntry": false,
            "type": "node"
        ,
        
            "name": "Attach",
            "type": "node",
            "request": "attach",
            "port": 5858
        
    ]

请注意，如果您将任何任务运行器用作 gulp，则键 preLaunchTask 非常有用，因为 IDE 能够按名称检测其任务。

跑步

    编译你的ts（在终端输入rm -r bin/ ; tsc或执行你的编译任务） 在视觉代码中播放Launch type（我们的配置名称） 享受吧！

【讨论】：

在使用带有多个“重复”标识符的 node_modules 运行 tsc 时，我似乎遇到了很多错误。有没有忽略node_modules？？ 出现什么错误，是 tsc 还是可视代码本身？ tsc 正在积极尝试构建所有 d.ts 文件，包括在 node_modules 中。这就是导致问题的原因......我开始使用 atom-typescript 并且由于他们的“fileGlob”支持而获得了更好的运气。 你试过帖子的配置吗？试试"rootDir": "src" @max-alexander 你可以像这样向 tsconfig.json 添加一个排除部分： "compilerOptions": , "exclude": [ "node_modules", "bin" ] 【参考方案2】：

@manu 的回答为我指明了正确的方向；但是，使用最新版本的 VSCode，我仍然遇到同样的问题。这是对我有用的修复：

https://github.com/Microsoft/vscode/issues/13499

"outFiles": [ "$workspaceRoot/js/*.js" ]

【讨论】：

【参考方案3】：

对于截至 2017 年 2 月的更高版本的 VSCode，这对我有用（它是 @manu 和 @tommy Falgout 提供的组合）：

假设您的 json 输出文件分别位于 dest 文件夹中，而您的源文件分别位于 src 文件夹中

/.vscode/launch.json


    "version": "0.2.0",
    "configurations": [
            "type": "node",
            "request": "launch",
            "name": "Launch",
            "sourceMaps": true,
            "stopOnEntry": true,
            "console": "internalConsole",
            "cwd": "$workspaceRoot",
            "program": "$workspaceRoot/src/main.ts",
            "outFiles": ["$workspaceRoot/dest/*.js"]
        ,
        
            "type": "node",
            "request": "attach",
            "name": "Attach to Process",
            "port": 5858,
            "outFiles": []
        
    ]

tsconfig.json


    "compilerOptions": 
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "sourceMap": true,
        "module": "commonjs",
        "outDir": "dest",
        "rootDir": "src"
    ,
    "exclude": [
        "node_modules"
    ]

【讨论】：

我收到错误“未定义窗口”，可能是因为节点没有窗口？是否可以使用调试器调试客户端 javascript / typescript？【参考方案4】：

以下设置使用断点测试 mocha chai。它的工作原理是将 src 转译到 lib 目录，然后在 lib 中运行测试，并将 sourceMapping 回 src。

.vscode/launch.json


    "type": "node",
    "request": "launch",
    "preLaunchTask": "tsc",
    "name": "Run Mocha",
    "program": "$workspaceRoot/node_modules/mocha/bin/_mocha",
    "args": ["lib/**/*.js"],
    "cwd": "$workspaceRoot",
    "sourceMaps": true,
    "outFiles": ["$workspaceRoot/lib/**/*.js"]

tsconfig.json


  "compilerOptions": 
      "module": "commonjs",
      "sourceMap": true,
      "outDir": "lib",
      "target": "es6"
  ,
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]

.vscode/tasks.json


    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "args": ["-p", "."],
    "showOutput": "silent",
    "problemMatcher": "$tsc"

package.json 显示已安装的模块。脚本与调试无关。

"scripts": 
  "test": "mocha --compilers ts:ts-node/register src/**/*.spec.ts",
  "test:coverage": "nyc -e '.ts' npm test"
,
"dependencies": 
  "@types/chai": "^3.4.35",
  "@types/mocha": "^2.2.39",
  "@types/node": "^7.0.5",
  "@types/sinon": "^1.16.35",
  "chai": "^3.5.0",
  "mocha": "^3.2.0",
  "nyc": "^10.1.2",
  "sinon": "^1.17.7",
  "ts-node": "^2.1.0",
  "typescript": "^2.2.1"
Mac OSX 10.12.3 Sierra Visual Studio 代码 1.10.1 NodeJS v7.7.1

【讨论】：

我不确定以上哪些是我需要进行的更改。使我的配置工作的关键更改是在 launch.json 中添加 outFiles。【参考方案5】：

我刚刚编写了自己的 PowerShell 函数作为 preLaunchTask。这可能比以前的解决方案更糟糕，但可以增加更多的灵活性，以便在 preLaunchTask 字段下注入更多任务。因为目前它不支持数组，并且在启动动作之前只允许运行一个任务。

launch.json


    "version": "0.2.0",
    "configurations": [
        
            "type": "node",
            "request": "launch",
            "name": "Node.js",
            "program": "$file",
            "preLaunchTask": "RebuildTypeScript",
            "outFiles": [
                "$workspaceRoot/js/**/*.js"
            ]
        
    ]

tasks.json


    "version": "2.0.0",
    "tasks": [
        
            "type": "typescript",
            "tsconfig": "tsconfig.json",
            "group": 
                "kind": "build",
                "isDefault": true
            
        ,        
        
            "taskName": "RebuildTypeScript",
            "type": "shell",
            "command": "Powershell ./RebuildTypeScript.ps1",
            "group": "none",
            "presentation": 
                "reveal": "never"
            
               
    ]

RebuildTypeScript.ps1

$currentDir = Split-Path -Path $MyInvocation.MyCommand.Definition -Parent
function CompileTypeScriptFiles($folder) 
    $tsFiles = Get-ChildItem $folder -Filter "*.ts" -Recurse
    $tsFiles | ForEach-Object 
        $tsFile = $_.FullName;
        $options = $tsFile + " --outDir js --sourceMap"
        Start-Process "tsc" $options 
    



CompileTypeScriptFiles $currentDir

【讨论】：

【参考方案6】：

这就是截至 2017 年 11 月最新的 TS 和 VsCode 对我有用的东西

以下配置将帮助您在 VS Code 中启动服务器和调试 TS

这就是我的 tsconfig.json 的样子：


    "compilerOptions": 
        "declaration": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": ["es2017", "dom"],
        "module": "commonjs",
        "moduleResolution": "node",
        "outDir": "../build",
        "sourceMap": true,
        "target": "es2016",
        "typeRoots": [
            "../node_modules/@types"
        ]
    ,
    "include": [
        "**/*.ts"
    ],
    "exclude": [
        "../node_modules",
        "../*.js"
    ]

这就是我的目录结构的样子：

如果您注意的话，您会看到我的 src 文件夹和 build 文件夹（包含生成的转译 JS 和地图文件）并排存在，这确实有助于我维护逻辑目录结构。

好的，现在是启动配置：


            "type": "node",
            "request": "launch",
            "name": "Start and Debug",
            "preLaunchTask": "nb-tsc-watch",
            "timeout": 10000,
            "program": "$workspaceFolder/backend/src/app.ts",
            "restart": true,
            "cwd": "$workspaceRoot",
            "outFiles": [
                "$workspaceFolder/backend//build/**/*.js"
            ],
            "sourceMaps": true

您可以使用任何您想使用的 preLaunchTask，甚至可以跳过它。 如果跳过它，则必须手动将 TS 转译为 JS。

这就是我在我的任务中所做的nb-tsc-watch


            "label": "nb-tsc-watch",
            "type": "typescript",
            "tsconfig": "backend/src/tsconfig.json",
            "option": "watch",
            "problemMatcher": [
                "$tsc-watch"
            ]

【讨论】：

【参考方案7】：

2017/12/17.vscode/launch.json ```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": "node",
      "request": "launch",
      "program": "$workspaceRoot/src/index.ts",
      "outFiles": [
        "$workspaceRoot/dist/index.js"
      ],
      "sourceMaps": true,
      "stopOnEntry": false,
      "args": [],
      "cwd": "$workspaceRoot",
      "env": 
          "NODE_ENV": "development"
      ,
      "console": "internalConsole",
      "preLaunchTask": "compile",
      "name": "DEBUG"
    ,
    
      "type": "node",
      "request": "attach",
      "name": "Attach to Process",
      "port": 5858
    
  ]

.vscode/tasks.json


  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    
      "label": "compile",
      "type": "typescript",
      "tsconfig": "tsconfig.json",
      "problemMatcher": [
          "$tsc"
      ],
      "group": 
          "kind": "build",
          "isDefault": true
      
    
  ]

tsconfig.json


  "compilerOptions": 
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "dist",
    "rootDir": "src"
  ,
  "include": [
    "**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]

【讨论】：

在编译器选项上添加“outDir”是 TypeScript 调试对我有用的原因。谢谢。 谢谢我能把它和这个拼凑起来！【参考方案8】：

我认为它在版本中变得越来越简单......

我已经安装了ts-node (https://github.com/TypeStrong/ts-node)，所以我的配置文件非常简单。

在项目文件夹中安装 ts-node 和 npm install ts-node --save-dev - 感谢 cmets 中的 Hrafnkell

launch.json


        "name": "Launch index.ts",
        "type": "node",
        "request": "launch",
        "runtimeArgs": [
            "-r",
            "ts-node/register"
        ],
        "args": [
            "$workspaceFolder/src/index.ts"
        ]

有两点值得注意：

runtimeArgs - 传递给节点以注册 ts-node 以处理 TypeScript 文件。 没有program 属性。将要启动的 TS 文件的名称作为第一个参数给出。

这样你就不需要把TS编译成JS，你甚至可以用TS写的模块还没有编译成JS。

【讨论】：

优秀的解决方案就像魅力一样。我还必须在本地安装 ts-node "npm install ts-node --save-dev" 并设置一个不同的运行目录（用于 firebase 函数）： "cwd": "$workspaceFolder\\functions" 这应该是公认的答案，它是截至 2019 年 4 月唯一有效的答案 注意：此信息直接来自 ts-node 的 NPM 页面及其 Github 页面 (github.com/TypeStrong/ts-node#visual-studio-code)。如果您想了解有关如何使用 ts-node 调试 Typescript 代码的更多信息，请转到上述两个页面中的任何一个，并查看“Visual Studio Code”标题下的内容。这对我来说很重要，因为在我指定一个“tsconfig.json”文件之前，我无法让这个解决方案发挥作用，正如官方文档后面的注释所说的那样。 还值得一提的是ts-node 必须是项目依赖项，例如ts-node 仅在全局安装时不起作用。 "type": "node" 应该更改为 "type": "pwa-node" 以获得新的调试器【参考方案9】：

对我来说，经过这么多的 launch.json 配置。我发现使用 jestJs 和 istanbul 会导致我的断点不会在正确的位置中断，直到我将配置设置为：

config.collectCoverage = false;

见issue

【讨论】：

【参考方案10】：

如果您从命令行运行脚本，在最新的 Visual Studio Code 版本中，您可以跳过 launch.json 的创建，这有时是一项费力的任务。相反，您可以自动将调试器附加到您从命令行运行的任何 ts-node 或 node 命令。

    为 tsconfig.json 启用源映射 - TypeScript 配置需要源映射支持，否则无法调试。 

  "compilerOptions": 
    "sourceMap": true
  ,
    在 Visual Studio Code 调试器上启用 自动附加。它是任务栏上的一个按钮，但也可以通过命令面板访问。

    而不是将脚本启动为： 
ts-node myscript.ts

启动它

node -r ts-node/register --inspect-brk myscript.ts

你会在 Node 启动时看到这个：

Debugger listening on ws://127.0.0.1:9229/8bb6dcc8-a73c-405e-b1fe-69a3d7789a20
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.

然后 Visual Studio Code 调试器将

    停在程序的第一行

    在 Visual Studio Code 编辑器中设置的以下任意断点处停止

【讨论】：

【参考方案11】：

自动配置方法

对于许多用例来说，一个简单的自动配置就足够了 - 无需手动配置 launch.json。先决条件：在工作区tsconfig.json中启用sourcemaps：


  "compilerOptions": 
    "sourceMap": true,
    // ...

1.) 调试当前文件without launch.json

只需打开或重新聚焦文件，然后按 F5（开始调试）。如果存在多个调试环境，例如 Chrome 和 Node.js，请选择后者。

注意：这目前要求launch.json 中没有其他条目。下一个 VS Code 版本将附带 single file debug improvements。

2.) 自动创建launch.json

转到调试视图 (CtrlShiftD) 并单击“创建 launch.json 文件”。这将为package.json 的main 字段文件或活动文件（如果不存在main）创建一个调试条目。示例：

  "configurations": [ // auto-generated 
     
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "$workspaceFolder\\dist\\A.js",
      "preLaunchTask": "tsc: build - tsconfig.json",
      "outFiles": [
        "$workspaceFolder/dist/**/*.js"
      ]
    
  ]

注意：这要求launch.json 之前不存在。

3.) 将调试器附加到正在运行的程序

在settings.json 中或通过 UI →“调试：切换自动附加”打开 Auto Attach feature。 

"debug.node.autoAttach": "on" // in settings.json

以调试模式启动节点程序。不久之后，VS Code 将开始调试。

node --inspect-brk dist/A.js

或者使用"Debug: Attach to Node Process"（也可以使用launch.json："$command:PickProcess"）。

【讨论】：

"preLaunchTask": "tsc: build - tsconfig.json" 是我正在寻找的配置！谢谢！【参考方案12】：

如果您不想硬编码文件名但喜欢简单的Grogi's 版本？使用来自VS variable reference page 的信息，您可以做两件事：

npm i ts-node

然后 launch.json 喜欢（以防万一，但您只能从中获取这一项配置）：


    "version": "0.2.0",
    "configurations": [
        
            "name": "Launch TS",
            "type": "node",
            "request": "launch",
            "runtimeArgs": [
                "-r",
                "ts-node/register"
            ],
            "args": [
                "$workspaceFolder/$fileBasename"
            ]
        
    ]

该 VSC 页面中的一些示例 - 有时您可以在某个地方使用 Ctrl+Space 来获取它们，但在我现有的内部不起作用：

$workspaceFolder - /home/your-username/your-project
$workspaceFolderBasename - your-project
$file - /home/your-username/your-project/folder/file.ext
$relativeFile - folder/file.ext
$relativeFileDirname - folder
$fileBasename - file.ext
$fileBasenameNoExtension - file
$fileDirname - /home/your-username/your-project/folder
$fileExtname - .ext
$lineNumber - line number of the cursor
$selectedText - text selected in your code editor
$execPath - location of Code.exe

【讨论】：

以上是关于如何在 Visual Studio 代码中调试打字稿文件的主要内容，如果未能解决你的问题，请参考以下文章

Visual Studio 2015 中的打字稿

调试 Jest 测试 Visual Studio 代码

如何在 Visual Studio 2015 asp.net 5 中调试 Typescript？

译如何在 Visual Studio 中调试异步代码

使用 Visual Studio Code 调试和运行 Angular 2 Typescript？

如何在Visual Studio中调试Windows服务？