WebStorm 2025.2 Help

运行/调试配置:JavaScript 调试

创建: 运行(U) | 编辑配置(E) | 添加新配置| JavaScript 调试

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

JavaScript 调试专用配置设置

项目

描述

URL

  • 调试 JavaScript:

    在此字段中,指定引用要调试的 JavaScript 的 HTML 文件的 URL 地址。 对于 本地调试 ,请以以下格式输入 URL: http://localhost:<built-in server port>/<project root> 内置服务器端口 (1024 或更高)可在 Web 浏览器及预览 页面的 设置 对话框中指定。

  • 调试 Dart Web 应用程序:

    在此字段中,按以下格式指定引用待调试 Dart 代码的 HTML 文件的 URL 地址: http://localhost:<built-in server port>/<project-name>/<relative path to the HTML file> 。 确保此 URL 地址中的端口与 内置服务器端口Web 浏览器及预览 页面上指定的端口一致。

浏览器

从该列表中选择 Chrome 或其他 Chrome 系浏览器以调试您的应用程序。

对于 Dart 应用程序,将使用 dart2jsdartdevc 工具将 Dart 代码编译为 JavaScript。 在 运行或调试 Dart Web 应用程序时会自动调用此工具。

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

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

本地文件的远程 URL

  • 调试 JavaScript:

    仅在手动创建永久调试配置时,WebStorm 才会显示此区域。 对于自动生成的临时配置,此区域不会显示。

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

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

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

    仅当项目根目录下的本地文件夹结构与服务器上的文件夹结构不一致时才需要这些映射。 如果结构相同,WebStorm 会通过解析服务器上副本的 URL 自动“获取”本地文件路径。

  • 调试 Dart Web 应用程序:

    仅当 URL 字段中指定的端口与在 Web 浏览器及预览 页面的 设置 对话框中指定的内置 Web 服务器端口不同时,WebStorm 才会显示此区域。

通用设置

编辑运行配置(而非运行配置模板)时,您可以指定以下选项:

项目

描述

名称(N)

为运行配置指定名称,以便编辑或运行时能快速识别。

允许多个实例(U)

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

默认情况下,此选项处于禁用状态。当您在已有实例正在运行时启动此配置,WebStorm 会建议停止正在运行的实例并启动另一个。这在运行配置占用大量资源且没有必要同时运行多个实例时非常有用。 这在运行配置占用大量资源且没有必要同时运行多个实例时非常有用。

存储为项目文件(S)

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

默认情况下它处于禁用状态,WebStorm 会将运行配置设置存储在 .idea/workspace.xml 中。

工具栏

运行/调试配置的树状视图具有工具栏,可帮助您管理 项目 中可用的配置,并调整默认配置模板。

项目

快捷键

描述

添加按钮

Alt+Insert

创建运行/调试配置。

移除按钮

Alt+Delete

删除所选的运行/调试配置。请注意,无法删除默认配置。 请注意,无法删除默认配置。

复制

Ctrl+D

创建所选运行/调试配置的副本。请注意,可以复制默认配置。 请注意,您可以复制默认配置。

保存配置

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

移动到新目录/创建新目录

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

要创建文件夹,请选择某个类别中的配置,点击 目录 ,然后指定文件夹名称。 如果仅聚焦于一个类别,则会创建一个空文件夹。

然后,若要将配置移动到某个文件夹、在文件夹之间或移出文件夹,可以使用拖拽操作或点击 上移下移 按钮。

要取消分组,请选择一个文件夹并点击 移除配置

排序配置

点击此按钮以按字母顺序对配置进行排序。

启动前

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

项目

快捷键

描述

添加按钮

Alt+Insert

点击此图标以添加以下可用任务之一:

  • 启动Web 浏览器 :选择此选项以启动浏览器。 在打开的对话框中,选择浏览器类型并提供启动 URL。 另外,指定是否要使用 JavaScript 调试器启动浏览器。

  • 运行外部工具 :选择以运行外部应用。 在打开的对话框中,选择您要运行的一个或多个应用。 如果尚未在 WebStorm 中定义,请添加其定义。 有关更多信息,请参阅 外部工具外部工具

  • 运行另一个配置 :选择该选项以执行另一个运行/调试配置,并在当前配置开始之前等待其完成。 如果您希望并行运行多个配置,请使用 compound run/debug configuration

  • 运行File Watcher :选择此选项以使 WebStorm 应用所有当前活动的 File Watchers

  • 运行远程外部工具 :添加一个 remote SSH external tool

  • 运行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 configuration settings

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

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

    • 如果取消选中 检查错误 复选框,编译器将显示所有检测到的错误,但仍会启动运行配置。

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

移除按钮

Alt+Delete

点击此图标以从列表中移除所选任务。

编辑

Enter

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

方法上移

方法下移

Alt+Up

Alt+Down

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

显示此页面

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

激活工具窗口

默认情况下,选中此复选框,启动运行/调试配置时将打开 RunDebug 工具窗口。

否则,如果未选中该复选框,则工具窗口将隐藏。 但是,在配置运行时,您可以按 Alt+4Alt+5 手动打开相应的工具窗口。

最后修改日期: 2025年 9月 26日