如何在 Visual Studio 代码中调试打字稿文件 [英] how to debug typescript files in visual studio code

问题描述

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

using version 0.3 of visual studio code and I'm not sure how to enable sourcemaps and debug the ts file

我收到以下错误 can't launch program '/Projects/app-server/server.ts';启用源映射可能会有所帮助

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

how do I enable sourcemaps and typescript debugging. Sourcemap is set to true in my

tsconfig.json

tsconfig.json

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

launch.json

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
        }
    ]
}

推荐答案

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

This configuration is working fine for me:

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

想法是编译src文件夹下的打字稿，并将其放在bin文件夹下.

The idea is compile the typescript under src folder and place it under bin folder.

激活 sourceMap 选项很重要.

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

launch.json

==== 编辑 ====

launch.json

==== EDIT ====

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

This is the configuration I'm currently using at 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
        }
    ]
}

请注意，如果您将任何任务运行器用作 gulppreLaunchTask 将非常有用> 因为 IDE 能够通过名称检测其任务.

Note the key preLaunchTask is extremely helpful if you're using any task runner as gulp because the IDE is able to detect its tasks by name.

1. 编译您的 ts(在终端中输入 rm -r bin/; tsc 或执行您的编译任务)
2. 在可视化代码中播放Launch type(我们的配置名称)
3. 享受吧！

1. Compile your ts (typing in a terminal rm -r bin/ ; tsc or executing your compiling task)
2. In visual Code play Launch type (our configuration name)
3. Enjoy!

这篇关于如何在 Visual Studio 代码中调试打字稿文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！