如何从带有 Node 的 WebStorm 中的 JavaScript stacktrace 导航到原始 TypeScript 文件？答案

【问题标题】：How do I navigate to original TypeScript file from JavaScript stacktrace in WebStorm with Node?如何从带有 Node 的 WebStorm 中的 JavaScript stacktrace 导航到原始 TypeScript 文件？
【发布时间】：2017-03-03 14:04:25
【问题描述】：

我是 TypeScript 的新手。在 Mac 上，我使用 WebStorm 2016.2.4 for Node 和 TypeScript 2.0。

使用生成的映射可以很好地进行交互式调试，但运行时堆栈跟踪链接指向 JavaScript 文件，而不是原始 TypeScript 文件。

这是正常的和预期的吗？是否有我缺少的 WebStorm 功能可以将这些链接转换为原始 TypeScript 文件和行，或者这只是 TypeScript 开发人员必须忍受的？

【问题讨论】：

Typescript developers must suffer with 你应该可以在调试器中看到打字稿文件。如果在 Chrome 中说，您是否看到它尝试加载任何 .map 文件？生成的 javascript 文件是否有任何对 .map 文件的引用。我已经有一段时间没有使用 Webstorm 了，但它在调试器中运行时可能会保留内部地图文件，所以你可能需要确保 TypeScript 配置启用了地图文件。
谢谢，我应该提到这是针对服务器开发的，而不是浏览器。运行时堆栈跟踪当然是应用程序运行时，而不是在调试时。
哦，好的。我不确定 node.js 是否内置了源映射支持。但我刚刚看到 -> github.com/dmail-old/node-sourcemap 和其他......

标签： javascript node.js debugging typescript webstorm

【解决方案1】：

我通过需要模块 source-map-support/register 使用 TypeScript 源文件行号获得堆栈跟踪。这可以通过多种方式完成，例如在节点命令行上使用--require source-map-support/register，或者您可以在主程序中使用它。对于单元测试，我在我的mocha.opts 文件中有它：

--require source-map-support/register
--recursive

另一种方法是使用ts-node 包

【讨论】：

我提出了一个 Webstorm 问题，希望他们通过一个简单的复选框将其构建到 Webstorm 中。 youtrack.jetbrains.com/issue/WEB-44801
@burt-harris Webstorm 是 Jetbrains 的产品，回复：正在回答的问题。如果 Jetbrains 将其内置到他们的 IDE 中，就像他们做很多其他事情一样，那就太好了，正如打开的问题中所解释的那样。我参考了你的评论。
我提供的答案应该可以独立于 IDE 使用。我无法专门为 Webstorm 提供帮助。我使用 vscode。
这非常适合 webstorm。全局安装库，在启动配置的节点参数字段中添加-r source-map-support/register。
这很简单。在 30 年代我安装了source-map-support，将它添加到我的 TS 启动脚本，例如node -r source-map-support/register build 我可以看到 .ts 堆栈跟踪....漂亮