如何让 TypeScript 源文件显示在节点检查器中？答案

【问题标题】：How do i get TypeScript source files to show up in node inspector?如何让 TypeScript 源文件显示在节点检查器中？
【发布时间】：2018-02-28 15:57:59
【问题描述】：

我正在使用 typescript 2.3 开发一个 node express 应用程序。

我使用 tsc 编译

我希望能够使用节点检查器（现在与节点 6.3+ 捆绑在一起）调试我的 TypeScript 代码

我在 tsConfig.json 中打开了 sourceMaps

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["es2017"],
    "module": "commonjs",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noResolve": false,
    "noEmitOnError": false,
    "noImplicitAny": true,
    "declaration": true,
    "sourceMap": true,
    "inlineSources": true,
    "outDir": "dist/",
    "moduleResolution": "node",
    "skipLibCheck": true
  },
  "include": [
    "src/**/*.ts",
    "test/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

当通过 fish.controller.js 的 WebUI 连接时，我还看到以下内容

exports.FishController = FishController;
//# sourceMappingURL=fish.controller.js.map
});

问题是我在节点检查器窗口中看不到实际的 TypeScript 源文件或映射文件。

我已确保它们存在：

$ ls -l

-rw-r--r--  1 xxx  staff    945 Sep 19 14:32 fish.controller.d.ts
-rw-r--r--  1 xxx  staff   5318 Sep 19 14:32 fish.controller.js
-rw-r--r--  1 xxx  staff   8528 Sep 19 14:32 fish.controller.js.map

如何包含 TS 文件并设置断点？

【问题讨论】：

您可以在此处阅读源映射如何进行调试：andrewconnell.com/blog/…
没有直接关系，但我能够通过配置 Chromium 远程会话，然后在 tsconfig.json 中提供 "mapRoot": "dist/" 选项来让 webstorm 调试器工作

标签： node.js typescript express node-inspector

【解决方案1】：

你可以尝试设置sourceMap: false 而是添加

"inlineSources": true, "inlineSourceMap": true

到您的 tsconfig.json 的compilerOptions？

这会将您的源代码和 sourceMap 添加到已编译的 JS 文件中。 Chrome 检查器应该能够提取源代码。

【讨论】：