Visual Studio代码 - 通过TypeScript调试节点JS [英] Visual Studio Code - Debug Node JS through TypeScript

问题描述

我目前正在尝试从Visual Studio代码调试用TypeScript编写的Node JS应用程序，但是我有一些问题。
我有一个类似于这个问题

  |  -  .settings 
 | ----- launch.json 
 |  -  bin 
 | ----- app.js 
 | ----- app.js.map 
 | --src 
 | --- -  app.ts 
 |  -  tsconfig.json 
  

然后我有 tsconfig.json 文件：

  {
compilerOptions：{
module ：commonjs，
target：es5，
outDir：bin，
rootDir：src，
sourceMap true 
} 
} 
  

app.ts ：

  console.log（Hello World！）; 
  

launch.json ：

  {
version：0.1.0，
配置：[
 {
 ：启动类型，
type：node，
程序：src / app.ts，
stopOnEntry：false，
 sourceMaps：true，
outDir：bin
} 
] 
} 
  

然后，我从命令行手动编译项目与

  tsc 
  

所以我在 bin 目录中收到两个文件。我在 app.ts 上设置了一个断点，最后运行 F5 的解决方案，应用程序在右侧行，但在 JS 文件而不是 TS 一个：为什么？

我做错了什么或试图实现不可能？

非常感谢您的帮助！ ：）

编辑

我刚刚在 GitHub ，以使事情变得更容易！看看如果可以的话：）

解决方案

绝对有可能。

最可能的原因是node.js无法使用生成的map.js文件找到相应的ts文件。
您可以尝试在tsconfig.json中指定sourceRoot来指向项目的根目录：

  sourceRoot ：/ Users / SomeUser / projects / test
  

我个人喜欢使用gulp来达到这个目的在我的情况下，它将看起来像这样（注意 - 我不是通过使用node.js全局变量'__dirname'）hardcore sourceRoot路径）：

  var ts = require（'gulp-typescript'）; 
 
 gulp.task（'build.js.dev'，function（）
 {
 var tsProject = ts.createProject（'tsconfig.json'）; 
 
 var tsResult = tsProject.src（）
 .pipe（sourcemaps.init（））
 .pipe（ts（tsProject））; 
 
 return merge 
 //写定义
 //tsResult.dts.pipe(gulp.dest(\"bin）），
 //编写编译的js 
 tsResult.js.pipe（sourcemaps 。（（./，{sourceRoot：__dirname}））。pipe（gulp.dest（bin））]）; 
}）; 
  

之后检查生成的map.js文件。它应该在开始时包含像这样的行：

 sources：[src / app.ts] 
  

最后：

 sourceRoot：/ Users / SomeUser / projects / test
  

结合在一起，它们必须指向您的app.ts文件的有效位置。如果没有 - 相应地调整sourceRoot。

以下是与您的项目相同的部分（没有gulp） - 我可以在我的机器上调试。

launch.json：

  {
 //配置名称;出现在启动配置下拉菜单中。 
name：启动服务器，
 //配置类型。 
type：node，
 //工作区相对或程序的绝对路径。 
程序：$ {workspaceRoot} /src/app.ts，
 //启动后自动停止程序。 
stopOnEntry：false，
 //传递给程序的命令行参数。 
args：[]，
 //正在调试的程序的工作目录的工作空间相对或绝对路径。默认是当前工作区。 
cwd：$ {workspaceRoot}，
 //要使用的运行时可执行文件的工作区相对或绝对路径。默认是PATH上的运行时可执行文件。 
runtimeExecutable：null，
 //可选参数传递到运行时可执行文件。 
runtimeArgs：[--nolazy]，
 //传递给程序的环境变量。 
env：{
NODE_ENV：development
}，
 //使用JavaScript源地图（如果存在）。 
sourceMaps：true，
 //如果启用JavaScript源代码映射，则会在此目录中生成生成的代码。 
outDir：$ {workspaceRoot} / bin，
请求：启动
} 
  

tsconfig.json：

  {
compilerOptions：{ 
emitDecoratorMetadata：true，
experimentalDecorators：true，
moduleResolution：node，
module：commonjs，
target ：es6，
sourceMap：true，
outDir：bin，
declaration：true，
noImplicitAny：true 
}，
exclude：[
node_modules，
bin，
.vscode，
typings / browser.d.ts ，
打字/浏览器/ **
] 
} 
  

在tasks.json中构建任务：

  {
version：0.1.0，
 
 //命令是tsc。假设tsc已经使用npm安装typescript 
command：$ {workspaceRoot} / node_modules / typescript / bin / tsc本地安装，
 
 //该命令是一个shell脚本
isShellCommand：true，
 
 //仅在无法识别的错误发生时显示输出窗口。 
showOutput：silent，
 
 // args是要编译的HelloWorld程序。 
args：[]，
 
 //使用标准的tsc问题匹配器在输出中查找编译问题
 //。 
problemMatcher：$ tsc
} 
  

/ p>

我已经对您的git仓库进行了以下次要更新，以便能够在本地进行调试。

添加包.json在根文件夹中，并将tsc指定为依赖关系（我更喜欢本地安装）：

  {
名称：123，
namelower：123，
version：0.0.1，
private：true，
dependencies ：{
}，
devDependencies：{
typescript：最新
} 
} 
  / pre> 
 
 
然后转到您的gitstackoverflow根文件夹，并在命令提示符下运行：
  npm install 
  
将tasks.json命令行更改为： / p> 
 
 
 command：$ {workspaceRoot} / node_modules / typescript / bin / tsc，
  
在完成这些步骤并构建项目之后，我可以在app.ts和V中放置一个断点SCode在运行时停止（F5）
 
 
 
 [更新] 
 
 
 
与windows兼容的tasks.json版本：
  {
version：0.1.0，
command：tsc 
 
showOutput：always，
 
windows：{
command：node.exe
} 
 
args：[$ {workspaceRoot} \\\\
ode_modules\\typescript\\\\\\tsc.js]，
 
problemMatcher：$ tsc
} 
  
希望这有帮助。 > 
I'm currently trying to debug a Node JS application written in TypeScript from Visual Studio Code but I have some issues.
I have a situation similar to the one described on this question
|-- .settings
|----- launch.json
|-- bin
|----- app.js
|----- app.js.map
|--src
|----- app.ts
|-- tsconfig.json
Then I have the tsconfig.json file:
{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "outDir": "bin",
        "rootDir": "src",
        "sourceMap": true
    }
}
The app.ts:
console.log("Hello World!");
The launch.json:
{
    "version": "0.1.0",
    "configurations": [
        {
            "name": "Launch type",
            "type": "node",
            "program": "src/app.ts",
            "stopOnEntry": false,
            "sourceMaps": true,
            "outDir": "bin"
        }
    ]
}
Then I manually compile the project from the command line with
tsc
so I get two files in the bin directory. I set a breakpoint on app.ts and finally run the solution with F5, the application starts and stops at the right line but on the JS file instead the TS one: why???

Am I doing something wrong or trying to achieve the impossible?

Thank you very much for your help! :)

EDIT

I've just shared my project on GitHub in order to make things easier! Take a look if you can! :)
解决方案
It is absolutely possible. 

The most likely reason is that the node.js cannot locate corresponding ts files using generated map.js file.
You can try to specify "sourceRoot" in tsconfig.json to point to the root of your project: 
sourceRoot: "/Users/SomeUser/projects/test"
Personally I prefer to use gulp for this purpose and in my case it would look like this (note - I do not hardcore sourceRoot path here by using node.js global variable '__dirname'):
var ts = require('gulp-typescript');

gulp.task('build.js.dev', function() 
{
    var tsProject = ts.createProject('tsconfig.json');

    var tsResult = tsProject.src()
        .pipe(sourcemaps.init())   
        .pipe(ts(tsProject));  

    return merge([
        //Write definitions 
        //tsResult.dts.pipe(gulp.dest("bin")),
        //Write compiled js
        tsResult.js.pipe(sourcemaps.write("./", { sourceRoot: __dirname })).pipe(gulp.dest("bin"))]);
});
After that examine the generated map.js file. It should contain something like this lines in the beginning:
"sources":["src/app.ts"]
and in the end:
"sourceRoot":"/Users/SomeUser/projects/test"
When combined together they must point to the valid location of your app.ts file. If not - adjust sourceRoot correspondingly.

[EDIT]

Below are the parts of the project identical to yours (without gulp) - that I can debug on my machine.

launch.json:
{
    // Name of configuration; appears in the launch configuration drop down menu.
    "name": "Launch Server",
    // Type of configuration.
    "type": "node",
    // Workspace relative or absolute path to the program.
    "program": "${workspaceRoot}/src/app.ts",
    // Automatically stop program after launch.
    "stopOnEntry": false,
    // 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": "${workspaceRoot}",
    // Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
    "runtimeExecutable": null,
    // Optional arguments passed to the runtime executable.
    "runtimeArgs": ["--nolazy"],
    // Environment variables passed to the program.
    "env": {
        "NODE_ENV": "development"
    },
    // Use JavaScript source maps (if they exist).
    "sourceMaps": true,
    // If JavaScript source maps are enabled, the generated code is expected in this directory.
    "outDir": "${workspaceRoot}/bin",
    "request": "launch"
}
tsconfig.json:
{ 
    "compilerOptions": { 
        "emitDecoratorMetadata": true, 
        "experimentalDecorators": true,
        "moduleResolution": "node",
        "module": "commonjs", 
        "target": "es6",
        "sourceMap": true,
        "outDir": "bin",
        "declaration": true,
        "noImplicitAny": true
    },
    "exclude": [
        "node_modules",
        "bin",
        ".vscode",
        "typings/browser.d.ts",
        "typings/browser/**"
    ]
} 
And build task in tasks.json:
{
    "version": "0.1.0",

    // The command is tsc. Assumes that tsc has been installed locally using npm install typescript
    "command": "${workspaceRoot}/node_modules/typescript/bin/tsc",

    // The command is a shell script
    "isShellCommand": true,

    // Show the output window only if unrecognized errors occur.
    "showOutput": "silent",

    // args is the HelloWorld program to compile.
    "args": [],

    // use the standard tsc problem matcher to find compile problems
    // in the output.
    "problemMatcher": "$tsc"
}
[EDIT]

I have done the following minor updates to your git repository to be able to debug it locally.

Add package.json in the root folder, and specify there tsc as dependency (I prefer local installations):
{
  "name": "123",
  "namelower": "123",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
  },
  "devDependencies": {
    "typescript": "latest"
  }
}
then go to your git "stackoverflow" root folder and run in command prompt: 
npm install
Change in tasks.json "command" line to:
"command": "${workspaceRoot}/node_modules/typescript/bin/tsc",
After doing these steps and building the project I was able to put a breakpoint in app.ts and VSCode stopped on it upon run (F5)

[UPDATE]

Version of tasks.json compatible with windows:
{
    "version": "0.1.0",
    "command": "tsc",

    "showOutput": "always",

    "windows": {
        "command": "node.exe"
    },

    "args": ["${workspaceRoot}\\node_modules\\typescript\\bin\\tsc.js"],

    "problemMatcher": "$tsc"    
}
Hope this helps.

                        
这篇关于Visual Studio代码 - 通过TypeScript调试节点JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！