专业的

运行和调试 TypeScript

1. 配置内置调试器，如配置 JavaScript 调试器中所述。

2. 要启用源映射生成，请打开tsconfig.json并将sourceMap属性设置为，如创建 tsconfig.json 文件true中所述。

3. 在 TypeScript 代码中配置和设置断点。

4. 在开发模式下运行应用程序。通常你需要npm start为此而奔跑。

   大多数情况下，在此阶段 TypeScript 被编译为 JavaScript 并生成源映射。有关更多信息，请参阅将 TypeScript 编译为 JavaScript。

   当开发服务器准备就绪时，复制应用程序在浏览器中运行的 URL 地址 - 您需要在运行/调试配置中指定此 URL 地址。

5. 转到“运行”| 编辑配置。或者，从工具栏的列表中选择编辑配置。

   

   在打开的“编辑配置”对话框中，单击工具栏上的“添加”按钮 ( )，然后从列表中选择“JavaScript 调试” 。在打开的“运行/调试配置：JavaScript 调试”对话框中，指定运行应用程序的 URL 地址。可以按照上述步骤 3中的说明从浏览器的地址栏中复制此 URL 。

   

6. 从工具栏上的选择运行/调试配置列表中，选择新创建的配置并单击它旁边的。运行配置中指定的 URL 地址将在浏览器中打开，并显示调试工具窗口。

   您可能需要刷新浏览器中的页面才能使调试工具窗口中的控件可用。

7. 在“调试”工具窗口中，照常进行：单步执行程序、停止和恢复程序执行、挂起时检查程序、查看实际的 HTML DOM、在控制台中运行 JavaScript 代码片段等。

1. 确保您的计算机上有Node.js。

2. 确保在设置中启用Node.js插件。按打开 IDE 设置，然后选择插件。单击“已安装”选项卡。在搜索字段中，输入Node.js。有关插件的更多信息，请参阅管理插件。CtrlAlt0S

3. 要启用源映射生成，请打开tsconfig.json并将sourceMap属性设置为，如创建 tsconfig.json 文件true中所述。

1. 转到“运行”| 编辑配置。或者，从工具栏的列表中选择编辑配置。

   

   在打开的“编辑配置”对话框中，单击工具栏上的“添加”按钮 ( )，然后从列表中选择Node.js。

2. 在打开的“运行/调试配置：Node.js”对话框中，指定要使用的 Node.js 解释器。

   在JavaScript 文件字段中，指定从启动它的应用程序的主文件生成的编译文件。

1. 将 TypeScript 代码编译为 JavaScript。有关更多信息，请参阅将 TypeScript 编译为 JavaScript。

2. 如上所述创建Node.js运行/调试配置。

3. 从工具栏上的“运行/调试配置”列表中，选择新创建的Node.js配置，然后单击其旁边的 。

1. 将 TypeScript 代码编译为 JavaScript。有关更多信息，请参阅将 TypeScript 编译为 JavaScript。

2. 必要时在 TypeScript 代码中设置断点。

3. 如上所述创建Node.js运行/调试配置。

4. 从工具栏上的“选择运行/调试配置”列表中，选择新创建的Node.js配置，然后单击其旁边的 。调试工具窗口打开。

5. 执行将触发带有断点的代码执行的步骤。

6. 切换到 PyCharm，其中调试工具窗口的控件现已启用。

• 在嵌入式终端( ) 中，键入：AltF12

  npm install --save-dev ts-node

1. 转到“运行”| 编辑配置。或者，从工具栏的列表中选择编辑配置。

   

   在打开的“编辑配置”对话框中，单击工具栏上的“添加”按钮 ( )，然后从列表中选择Node.js。将打开“运行/调试配置：Node.js”对话框。

2. 在节点参数字段中，添加--require ts-node/register.

3. 指定要使用的 Node.js 解释器。

   如果您选择项目别名，PyCharm 将自动使用Node.js页面上的节点解释器字段中的项目默认解释器。在大多数情况下，PyCharm 会检测项目默认解释器并填写字段本身。

   您还可以选择另一个已配置的本地或远程解释器，或者单击并配置一个新解释器。

4. 在JavaScript 文件字段中，指定要运行或调试的 TypeScript 文件。根据您的工作流程，您可以明确地或使用宏来执行此操作。

   • 如果您要始终启动相同的 TypeScript 文件，请在打开的对话框中单击并选择该文件。默认情况下，运行/调试配置获取所选文件的名称。

   • 如果您需要启动不同的文件，请键入$FilePathRelativeToProjectRoot$. 使用此宏，PyCharm 将始终在活动编辑器选项卡中启动文件。

5. 如有必要，请在“应用程序参数”字段中指定任何其他参数ts-node（例如，--project tsconfig.json）。

6. 保存配置。

根据您在运行/调试配置中指定 TypeScript 文件的方式，执行以下操作之一：

• 如果您明确键入了文件名，请从工具栏上的列表中选择所需的配置，然后单击列表旁边的 或按。ShiftF10

• 如果您指定了宏，请打开要在编辑器中运行的 TypeScript 文件，从工具栏上的列表中选择新创建的配置，然后单击或按。ShiftF10

PyCharm 在“运行”工具窗口中显示输出。

1. 在要调试的 TypeScript 文件中，根据需要设置断点。

2. 根据您在运行/调试配置中指定 TypeScript 文件的方式，执行以下操作之一：

   • 如果您明确键入了文件名，请从工具栏上的列表中选择所需的配置，然后单击列表旁边的 或按。ShiftF9

   • 如果您指定了宏，请在编辑器中打开要调试的 TypeScript 文件，从工具栏上的列表中选择新创建的配置，然后单击列表旁边的 或按。ShiftF9