Pycharm
 
2023.3
快捷方式：Windows
获取 PyCharm
  1. 参考
  2. 运行/调试配置对话框
  3. JavaScript 调试

专业的
运行/调试配置：JavaScript 调试

最后修改时间：2023 年 8 月 24 日

仅适用于 PyCharm Professional：下载以尝试或 比较版本

所需插件：

Javascript and TypeScript, JavaScript Debugger - 这些插件仅在 PyCharm Professional 中可用，默认情况下启用。

创建：运行| 编辑配置| 添加新配置 | JavaScript 调试

使用此对话框创建一个配置，用于调试内置或外部 Web 服务器上运行的应用程序中的 JavaScript 以及调试 Dart Web 应用程序。

笔记

仅Google Chrome和其他基于 Chromium 的浏览器支持 JavaScript 代码的调试。

JavaScript 调试特定的配置设置

物品

描述

网址

  • 调试 JavaScript：

    在此字段中，指定引用要调试的 JavaScript 的 HTML 文件的 URL 地址。对于本地调试，请以http://localhost:<built-in server port> /<project root>格式键入 URL 。内置服务器端口（ 1024 或更高）在“设置”对话框的“调试器”页面上指定。

  • 调试 Dart Web 应用程序：

    在此字段中，指定引用要调试的 Dart 代码的 HTML 文件的 URL 地址，格式为：http://localhost:<内置服务器端口> /<项目名称> /<HTML 文件的相对路径> . 确保此 URL 地址中的端口与调试器页面上的内置服务器端口相同。

浏览器

从此列表中，选择 Chrome 或 Chrome 系列中的其他浏览器，您的应用程序将在其中进行调试。

对于 Dart 应用程序，Dart 代码将通过dart2js或dartdevc工具编译为 JavaScript 。当您运行或调试 Dart Web 应用程序时，会自动调用该工具。

确保加载脚本时检测到断点

选中此复选框可确保立即命中页面加载时执行的代码中的断点。请注意，这可能会减慢初始页面加载速度。

本地文件的远程 URL

  • 调试 JavaScript：

    仅当您手动创建永久调试配置时，PyCharm 才会显示此区域。对于自动生成的临时配置，不会显示该区域。

    在该区域中，将本地需要参与调试的文件映射到其在服务器上的副本的URL地址。

    • 文件/目录- 在此只读字段中，选择项目树中所需的本地文件或目录。

    • 远程 URL - 在此字段中，键入服务器上相应文件或文件夹的绝对 URL 地址。

    仅当项目根目录下的本地文件夹结构与服务器上的文件夹结构不同时，才需要这些映射。如果结构相同，PyCharm 本身会通过解析服务器上本地文件副本的 URL 地址来“检索”本地文件的路径。

  • 调试 Dart Web 应用程序：

    仅当URL字段中指定的端口与“设置”对话框的“调试器”页面上指定的内置 Web 服务器的端口不同时， PyCharm 才会显示此区域。

常用设置

当您编辑运行配置（但不是运行配置模板）时，您可以指定以下选项：

物品

描述

姓名

指定运行配置的名称，以便在编辑或运行时快速识别它。

允许多个实例

允许并行运行此运行配置的多个实例。

默认情况下，它是禁用的，当您在另一个实例仍在运行时启动此配置时，PyCharm 建议停止正在运行的实例并启动另一个实例。当运行配置消耗大量资源并且没有充分理由运行多个实例时，这非常有用。

存储为项目文件

保存带有运行配置设置的文件，以便与其他团队成员共享。默认位置是.idea/runConfigurations。但是，如果您不想共享.idea目录，则可以将配置保存到项目内的任何其他目录。

默认情况下，它是禁用的，PyCharm 将运行配置设置存储在.idea/workspace.xml中。

工具栏

运行/调试配置的树视图有一个工具栏，可帮助您管理项目中可用的配置以及调整默认配置模板。

物品

捷径

描述

添加按钮

AltInsert

创建运行/调试配置。

删除按钮

AltDelete

删除选定的运行/调试配置。请注意，您无法删除默认配置。

复制

Ctrl0D

创建所选运行/调试配置的副本。请注意，您创建默认配置的副本。

保存配置

仅当您选择临时配置时才会显示该按钮。单击此按钮可将临时配置保存为永久配置。

移入新文件夹/创建新文件夹

移入新文件夹/创建新文件夹。您可以通过将运行/调试配置放入文件夹中来对它们进行分组。

要创建文件夹，请选择类别中的配置，单击文件夹，然后指定文件夹名称。如果仅关注某个类别，则会创建一个空文件夹。

然后，要将配置移入文件夹、文件夹之间或移出文件夹，请使用拖动 或提升和下移按钮。

要删除分组，请选择一个文件夹并单击删除配置。

对配置进行排序

单击此按钮可按字母顺序对配置进行排序。

发布前

在此区域中，您可以指定在启动所选运行/调试配置之前要执行的任务。任务按照它们在列表中出现的顺序执行。

物品

捷径

描述

添加按钮

AltInsert

单击此图标可添加以下可用任务之一：

  • 启动 Web 浏览器：选择此选项可启动浏览器。在打开的对话框中，选择浏览器类型并提供起始 URL。另外，指定是否希望使用 JavaScript 调试器启动浏览器。

  • 运行外部工具：选择运行外部应用程序。在打开的对话框中，选择一个或多个要运行的应用程序。如果 PyCharm 中尚未定义，请添加其定义。有关详细信息，请参阅外部工具和外部工具。

  • 运行另一个配置：选择执行另一个运行/调试配置并等待其完成后再开始当前配置。如果要并行运行多个配置，请使用复合运行/调试配置。

  • 运行文件观察程序：选择此选项可以让 PyC​​harm 应用所有当前活动的文件观察程序。

  • 运行远程外部工具：添加远程 SSH 外部工具。

  • 运行 Grunt 任务：选择此选项可运行 Grunt 任务。

    在打开的Grunt 任务对话框中，指定定义所需任务的Gruntfile.js，选择要执行的任务，并指定要传递给 Grunt 工具的参数。

    指定 Node.js 解释器的位置、要传递给它的参数以及grunt-cli包的路径。

  • 运行 Gulp 任务：选择此选项可运行 Gulp 任务。

    在打开的Gulp 任务对话框中，指定定义所需任务的Gulpfile.js，选择要执行的任务，并指定要传递给 Gulp 工具的参数。

    指定 Node.js 解释器的位置、要传递给它的参数以及gulp包的路径。

  • 运行 npm 脚本：选择此选项来执行 npm 脚本。

    在打开的NPM 脚本对话框中，指定npm run/debug 配置设置。

  • 编译 TypeScript：选择运行内置 TypeScript 编译器，从而确保您对 TypeScript 代码所做的所有更改都反映在生成的 JavaScript 文件中。在打开的TypeScript 编译设置对话框中，选中或清除检查错误复选框以配置编译器在检测到任何错误时的行为：

    • 如果选中“检查错误”复选框，编译器将显示所有错误，并且运行配置将不会启动。

    • 如果清除“检查错误”复选框，编译器将显示所有检测到的错误，但仍会启动运行配置。

  • 生成 CoffeeScript 源映射：选择此选项可为您的CoffeeScript源生成源映射。在打开的对话框中，指定 CoffeeScript 源文件的位置。

删除按钮

AltDelete

单击此图标可从列表中删除选定的任务。

编辑

Enter

单击此图标可编辑选定的任务。在打开的对话框中进行必要的更改。

方法向上

方法向下

Alt0↑

Alt0↓

单击这些图标可将所选任务在列表中上移或下移一行。任务按照它们在列表中出现的顺序执行。

显示此页

选择此复选框可在实际启动运行/调试配置之前显示运行/调试配置设置。

激活工具窗口

默认情况下，此复选框处于选中状态，并且当您启动运行/调试配置时，将打开“运行”或“调试”工具窗口。

否则，如果清除该复选框，工具窗口将被隐藏。但在配置运行时，您可以通过按或自行打开相应的工具窗口。Alt04Alt05

也可以看看

程序

参考

概念