如何在Jetbrain IDE中使用断点调试TypeScript？

Question

我有一个Angular前端，并用Typescript后端表示。我要调试双方。在如何在Jetbrain IDE（Webstrom，PhpStorm等）中使用断点调试TypeScript时，我找不到清晰的分步教程/视频。在Google上，我找到了Vscode的教程。 我知道第一步是通过在tsconfig.json中设置"sourceMap": true,来生成源映射，但是接下来呢？

Answer 1

这是从设置全新的TypeScript项目到在WebStorm中进行调试的分步说明：

1. 创建一个小项目

   mkdir ts
   cd ts 
   npm install --save typescript source-map-support
   ./node_modules/.bin/tsc --init`
   

2. 确保在sourceMap中将true设置为tsconfig.json。

3. 创建一个简单的 index.ts ：

   let i = 1;
   let j = 2;
   let k = i + j;
   console.log(k);
   

4. 在WebStorm中打开项目。打开index.ts。等待WebStorm完成对项目的索引编制：

1. 打开WebStorm首选项。找到左侧的“ TypeScript”部分。确保正确填写“节点解释器”和“ TypeScript”字段。启用“ TypeScript语言服务”复选框，并让WebStorm“在更改时重新编译”。点击“确定”。

1. 在“运行”工具栏中，单击“添加配置”：

1. 创建一个新的“ Node.js”配置：

   

   • 使用“ index.js”作为“ JavaScript文件”。这应该是您希望执行的编译文件。
   • 使用--require source-map-support/register作为“节点参数”。这使您能够在WebStorm中进行调试时获得正确的行。

1. 单击“确定”。

2. 通过在给定行左侧的侧面板上单击，在index.ts中创建新的断点：

1. 在“运行”工具栏中，现在单击“调试”按钮。确保在其左侧的下拉菜单中选择了运行配置：

1. 将打开Debug工具窗口，在断点处停止：