WebStorm 2021.2 Help

Run applications运行应用程序

With WebStorm, you can run entire applications, single scripts, or tests right from the editor, using the context menu or gutter icons. 使用WebStorm,您可以使用上下文菜单或图标从编辑器中直接运行整个应用程序、单个脚本或测试。If you need to pass some parameters to your application or launch a tool, for example, an npm script, before running, create a language- or framework-specific Run/Debug Configuration and invoke it.如果需要在运行前向应用程序传递一些参数或启动工具(例如npm脚本),请创建特定于语言或框架的运行/调试配置并调用它。

All the run configurations that are currently available in a project, are shown in the Select Run/Debug Configuration list.项目中当前可用的所有运行配置都显示在“选择运行/调试配置”列表中。

Learn more from Run/debug configurations.运行/调试配置中了解更多信息。

If you want to see the list of all currently running applications, select Run | Show Running List from the main menu. 如果要查看当前运行的所有应用程序的列表,请从主菜单中选择“运行”|“显示运行列表”。Refer to the Show running processes section for details.有关详细信息,请参阅显示正在运行的进程部分。

After a run session starts, the Icons toolwindows tool window run icon in the Run tool window and in the Run/Debug Configuration Selector toggles to Active run icon.运行会话启动后,运行工具窗口和“运行/调试配置选择器”中的Icons toolwindows tool window run图标切换为Active run icon

Quick way捷径

If you are not going to pass any parameters to your program, and your program does not require any specific actions to be performed before start, you can run it right from the editor.如果您不打算向程序传递任何参数,并且程序在启动前不需要执行任何特定操作,则可以直接从编辑器中运行它。

  • To run client-side JavaScript code in the browser, open the HTML page that references it.要在浏览器中运行客户端JavaScript代码,请打开引用它的HTML页面。

    WebStorm has a built-in web server that can be used to preview and debug your application. WebStorm有一个内置的web服务器,可用于预览和调试应用程序。This server is always running and does not require any manual configuration. 此服务器始终在运行,不需要任何手动配置。All the project files are served on the built-in server with the root URL http://localhost:<built-in server port>/<project root>, with respect to the project structure.所有项目文件都使用根URL http://localhost:<built-in server port>/<project root>提供给内置服务器,因项目结构而异。

    • In the editor, open the HTML file with the JavaScript reference, hover your mouse pointer over the code to show the browser icons bar: the WebStorm icon Chrome Firefox Safari Opera Internet Explorer Edge, and then click the icon that indicates the desired browser. 在编辑器中,打开带有JavaScript引用的HTML文件,将鼠标指针悬停在代码上以显示浏览器图标栏:the WebStorm icon Chrome Firefox Safari Opera Internet Explorer Edge,然后单击指示所需浏览器的图标。See Preview output of HTML files.请参见HTML文件的预览输出

    • Alternatively:或者:

      Open the HTML file with the JavaScript reference in the editor or select it in the Project tool window, and then select Run <HTML file name> from the context menu.在编辑器中打开带有JavaScript引用的HTML文件,或在“项目”工具窗口中选择它,然后从上下文菜单中选择“运行<HTML文件名>”。

      Run client JavaScript

      WebStorm creates a temporary run/debug configuration of the type JavaScript Debug which you can later save, see Saving a temporary configuration as permanent.WebStorm创建一个JavaScript调试类型的临时运行/调试配置,您可以稍后保存该配置,请参阅将临时配置保存为永久配置

  • To run a script, open it in the editor or select it in the Project tool window, and then select Run <script file name> from the context menu.要运行脚本,请在编辑器中打开它或在“项目”工具窗口中选择它,然后从上下文菜单中选择“运行<脚本文件名>”。

    Run script

    WebStorm creates a temporary run/debug configuration of the type Node.js.WebStorm创建Node.js类型的临时运行/调试配置。

  • To run a test, click the gutter icon next to it or press Ctrl+Shift+F10. 要运行测试,请单击测试旁边的檐槽图标或按Ctrl+Shift+F10The gutter icon changes depending on the state of your test, see Performing tests and framework-specific pages under Testing JavaScript.排水沟图标根据测试的状态而变化,请参阅测试JavaScrip下的执行测试和特定于框架的页面。

    Run single test from the editor
  • To run an npm, Yarn, or pnpm script:要运行npm、Yarn或pnpm脚本,请执行以下操作:

    Learn more from Running and debugging scripts.通过运行和调试脚本了解更多信息。

Use a run/debug configuration使用运行/调试配置

If you are going to pass parameters to your program, add VM options (for example, to allow remote debugging), or otherwise customize the startup of your program, use a run/debug configuration.如果要向程序传递参数、添加VM选项(例如,允许远程调试)或自定义程序的启动,请使用运行/调试配置

  1. Create a run/debug configuration.创建运行/调试配置

  2. On the main toolbar, select the run/debug configuration you are going to use.在主工具栏上,选择要使用的运行/调试配置。

    Run configuration selector
  3. Click The Run button or press Shift+F10.单击The Run button或按Shift+F10

When the application starts, you can view its output and interact with it in the Run tool window. 当应用程序启动时,您可以在运行工具窗口中查看其输出并与之交互。Every run/debug configuration creates a separate tab when you run it.每个运行/调试配置在运行时都会创建一个单独的选项卡。

Tabs in the Run tool window

To learn more about tool windows and how to manage them, see the Tool windows topic.要了解有关工具窗口以及如何管理它们的更多信息,请参阅工具窗口主题。

Re-run applications重新运行应用程序

  • On the toolbar of the Run tool window, click the Rerun button or press Shift+F10

    Re-run button

Stop and pause applications停止和暂停应用程序

When you stop a program, its process is interrupted and exits immediately. 当您停止一个程序时,它的进程将被中断并立即退出。When you pause a program, it continues running in the background, but its output is suspended.当您暂停程序时,它将继续在后台运行,但其输出将挂起。

Stop a program停止程序

  • In the Run tool window, click the Stop button on the toolbar. 在“运行”工具窗口中,单击工具栏上的the Stop buttonAlternatively, press Ctrl+F2 and select the process to stop.或者,按Ctrl+F2并选择要停止的进程。

Pause a program暂停程序

  • Right-click in the Run tool window and select Pause Output from the context menu. 在“运行”工具窗口中单击鼠标右键,然后从关联菜单中选择“暂停输出”。Use the same toggle to resume the program.使用相同的切换恢复程序。

    Pause output

Show running processes显示正在运行的进程

You can view the list of all active run or debug sessions and navigate between them.您可以查看所有活动运行或调试会话的列表,并在它们之间导航。

  • From the main menu, select Run | Show Running List. 从主菜单中,选择“运行”|“显示运行列表”。In the top-right corner of the editor, WebStorm shows a list with all active applications.在编辑器的右上角,WebStorm显示了一个包含所有活动应用程序的列表。

Last modified: 21 July 2021