Run applications
With WebStorm, you can run entire applications, single scripts, or tests right from the editor, using the context menu or gutter icons. 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.
All the run configurations that are currently available in a project, are shown in the Select Run/Debug Configuration list.
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 icon in the Run tool window and in the Run/Debug Configuration Selector toggles to .
You can configure some tools (for example, npm scripts) to be launched before running. In this case, WebStorm runs the tools, and after success will run the application. Otherwise, the application starts immediately.
Quick way
Run from the editor
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.
WebStorm has a built-in web server that can be used to preview and debug your application. 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.
In the editor, open the HTML file with the JavaScript reference, hover your mouse pointer over the code to show the browser icons bar: , and then click the icon that indicates the desired browser. See Preview output of HTML files.
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.
WebStorm creates a temporary run/debug configuration of the type JavaScript Debug which you can later save, see Saving a temporary configuration as permanent.
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.
WebStorm creates a temporary run/debug configuration of the type Node.js .
To run a test, click the gutter icon next to it or press Ctrl+Shift+F10 . The gutter icon changes depending on the state of your test, see Performing tests and framework-specific pages under Testing JavaScript.
To run an npm, Yarn, or pnpm script:
Open package.json , click in the gutter next to the script, and choose Run <script_name> , see Running and debugging scripts from package.json.
Run the current file
On top of running applications from the editor, you can run single files using a dedicated option on the toolbar. The run and debug buttons are active and allow you to instantly run the currently opened file.
In the editor, open the file that you want to run.
Click next to the Current File option on the toolbar.
You can access other runners from the submenu as well: expand the list and click the right arrow next to Current File . From the menu that opens, you can debug the code, run it with coverage, or open the run configuration to specify more options.
Customizable way
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.
On the main toolbar, select the run/debug configuration you are going to use.
Click or press 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.
Use the Ctrl+F shortcut to search for text occurrences in the console output.
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 or press Shift+F10
If you re-run an application, the output of the previous run is lost. To preserve the output of an application, click the Pin Tab button on the toolbar of the Run tool window. When a tab is pinned, new sessions are opened in another tab.
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 on the toolbar. Alternatively, press Ctrl+F2 and select the process to stop.
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.
Only the output is suspended. Pausing the output does not affect the execution of the program.
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.
Пример создания простейшего приложения на языке JavaScript в IDE WebStorm
Данный пример демонстрирует создание простейшего приложения на языке JavaScript в интегрированной среде WebStorm. По данному примеру можно получить программный каркас для изучения синтаксиса и основных возможностей JavaScript и его интеграции с HTML/CSS.
Содержание
- 1. Условие задачи
- 2. Выполнение
- 2.1. Создание проекта в IDE WebStorm
- 2.2. Создание пустого проекта
- 2.3. Создание HTML-файла
- 2.4. Запуск HTML-файла
- 2.5. Добавление кода JavaScript
- 2.5.1. Код JavaScript в тексте main.html . Вывод сообщения на странице веб-браузера с помощью метода document.write()
- 2.5.2. Вывод сообщения в отдельном окне. Метод alert()
- 2.5.3. Вызов кода JavaScript, который был сформирован в отдельном файле
- 2.5.4. Подключение файла на языке JavaScript
- 2.5.5. Написание кода JavaScript в файле hello.js
- 2.5.6. Подключение JavaScript кода к файлу main.html
Поиск на других ресурсах:
1. Условие задачи
Используя сочетание языков программирования HTML и JavaScript разработать программу, которая выводит на экран сообщение «Hello, world!». Программу разработать в интегрированной среде WebStorm.
Продемонстрировать различные способы вывода сообщения:
- в документе веб-браузера;
- в отдельном диалоговом окне.
Программный код JavaScript должен быть реализован двумя способами:
- непосредственно в документе HTML;
- в отдельном файле hello.js , подключаемом к документу HTML.
2. Выполнение
2.1. Создание проекта в IDE WebStorm
Для разработки приложений на языках JavaScript, HTML&CSS хорошо подходит интегрированная среда разработки WebStorm от компании JetBrains.
После запуска интегрированной среды откроется окно приглашения, приблизительный вид которого изображен на рисунке 1.
Для создания нового проекта нужно выбрать команду Create New Project .
Рисунок 1. Окно «Welcome to WebStorm»
В результате откроется окно «New Project» , изображенное на рисунке 2.
Рисунок 2. Окно выбора типа нового проекта
Система предлагает следующие виды проектов:
- Empty Project – пустой проект;
- Angular CLI – реализация проекта на основе npm-модуля (JavaScript Package Manager), предназначенного для регистрации программного обеспечения из терминала. Более подробно о npm-модуле можно прочитать по следующей ссылке ;
- AngularJS – проект с использованием фреймворка с открытым кодом AngularJS;
- Bootstrap – проект на основе открытого бесплатного фреймворка Bootstrap, используемого для front-end разработки сайтов. Получить подробную информацию о данном фреймворке можно по ссылке ;
- Cordova App – приложение с использованием платформы для разработки мобильных приложений Apache Cordova;
- HTML5 Boilerplate – проект, основанный на использовании популяного шаблона с поддержкой HTML/CSS/JavaScript;
- Meteor App – проект на основе веб-фреймворка MeteorJS, использующего Node.js;
- Node.js , Node.js Express – проекты на основе платформы с открытым кодом Node.js, предназначенной для создания сетевых приложений. Подробную информацию о фреймворках можно получить здесь и здесь;
- React App – проект на основе JavaScript-библиотеки React с открытым программным кодом, которая используется для создания пользовательских интерфейсов в больших веб-приложениях, использующих данные, изменяющиеся со временем без перезагрузки страницы;
- React Native – проект на основе React-архитектуры, предложенной компанией Facebook. Подробную документацию об архитектуре React Native можно получить здесь;
- Vue.js – проект на основе JavaScript фреймворка с открытым кодом Vue.js, который используется для создания пользовательских интерфейсов. Подробную информацию о данном фреймворке можно получить здесь ;
- Yeoman – проект на основе набора приложений Yeoman (Yo), позволяющий генерировать (создавать) проекты на любом языке, в том числе и JavaScript. Более подробно о Yeoman можно прочитать здесь .
2.2. Создание пустого проекта
В нашем случае, пока не нужно использовать дополнительные библиотеки или фреймворки. Поэтому при создании проекта нужно выбрать Empty Project (рисунок 3).
В поле Location: устанавливается папка, в которой будут размещаться файлы проекта. В нашем случае устанавливается папка
По желанию можно установить другую папку.
Рисунок 3. Выбор пустого проекта в окне New Project
После выбора кнопки Create откроется окно среды WebStorm, как показано на рисунке 4.
Рисунок 4. Окно интегрированной среды WebStorm
2.3. Создание HTML-файла
Чтобы запустить и протестировать код программы на JavaScript, сначала необходимо создать файл на языке HTML, который будет запускаться в некотором браузере. Для создания HTML-файла можно использовать один из двух способов:
- кликнуть правой кнопкой мышки на имени проекта Hello и в контекстном меню выбрать последовательность команд New->HTML File (рисунок 5);
- в главном меню выбрать последовательность команд File->New->HTML File (рисунок 6).
Рисунок 5. Команда контекстного меню New->HTML File
Рисунок 6. Выбор команды создания HTML-документа из главного меню
После вызова команды создания HTML-файла откроется окно New HTML File (рисунок 7), в котором нужно задать имя main (или другое) и выбрать версию языка HTML 5 file . Свой выбор необходимо зафиксировать нажатием клавиши Enter.
Рисунок 7. Указание имени HTML-файла и версии HTML 5
В результате, в главном окне среды WebStorm будет создана заготовка на языке HTML, который имеет следующий текст
На рисунке 8 изображен вид окна среды WebStorm после добавления HTML-файла.
Рисунок 8. Проект Hello после добавления файла main.html
2.4. Запуск HTML-файла
Как известно, файлы HTML открываются в веб-браузере. В нашем случае запуск HTML-файла выполняется одним из двух способов:
- щелчком мышки на кнопке с изображением веб-браузера (рисунок 9);
- выбором последовательности команд Run->Run…->main.html (если файл main.html запускается впервые) или Run->main.html (если файл main.html запускается повторно) как показано на рисунке 10.
После вызова команды запуска файла main.html откроется один из выбраных браузеров с пустой страницей.
Рисунок 9. Список браузеров, которые могут выполнить (открыть) файл main.html
Рисунок 10. Запуск файла main.html впервые (команда Run… ) и повторно (команда Run ‘main.html’ )
2.5. Добавление кода JavaScript
В файле main.html код программы на JavaScript вписывается между тэгами
В наиболее общем случае код может быть вписан одним из трех способов:
1. Непосредственно в html-файле. В этом случае код на JavaScript размещается между тегами
2. В файле с расширением *.js , который также подключается между тегами
3. Непосредственно в html-файле с помещением кода в атрибут события HTML-элемента.
В данной теме рассматриваются первые два случая.
2.5.1. Код JavaScript в тексте main.html . Вывод сообщения на странице веб-браузера с помощью метода document.write()
Вид файла main.html в случае включения в него кода JavaScript, выводящего сообщение «Hello, world!», следующий
Здесь между тэгами <script>…</script> вписана строка
которая выводит сообщение. Теперь можно запустить файл main.html в веб-браузере и проверить работу программы.
2.5.2. Вывод сообщения в отдельном окне. Метод alert()
Можно вызвать окно для отображения сообщения «Hello, world!». В этом случае используется вызов метода alert() . Модифицированный фрагмент кода файла main.html имеет вид:
2.5.3. Вызов кода JavaScript, который был сформирован в отдельном файле
Если размер кода JavaScript велик, то целесообразно разместить (структурировать) его в одном или нескольких отдельных файлах.
Чтобы в HTML-файле вызвать код программы на JavaScript, размещаемый в файле, нужно использовать строку вида
- myfile.js – название подключаемого файла.
2.5.4. Подключение файла на языке JavaScript
Процесс добавления файла на JavaScript подобен созданию HTML-файла. Также существует 2 способа подключения JavaScript-файла в проект:
- с помощью контекстного меню (рисунок 11);
- с помощью вызова последовательности команд File->New->JavaScript File (рисунок 12).
Рисунок 11. Добавление JavaScript-файла к проекту из контекстного меню
Рисунок 12. Команды главного меню для добавления JavaScript-файла в проект
В результате откроется окно уточнения New JavaScript file , в котором нужно задать имя файла (рисунок 13) и нажать клавишу Enter. В нашем случае указывается имя hello . В результате система создаст файл с именем hello.js . Расширение *.js означает, что файл создается на языке JavaScript.
Рисунок 13. Указание имени файла hello.js
После создания файла в окне Project , отображающего структуру проекта, появится файл hello.js (рисунок 14).
Рисунок 14. Отображение файла hello.js в структуре проекта
Файл JavaScript добавлен, теперь можно переходить к созданию кода.
2.5.5. Написание кода JavaScript в файле hello.js
С помощью мыши или клавиатуры можно переключаться между файлами hello.js и main.html .
В файле hello.js можно писать программный код (скрипт) на языке JavaScript. В нашем случае вписывается строка вывода сообщения в отдельном окне:
На рисунке 15 отображено окно редактора WebStorm с кодом JavaScript.
Рисунок 15. Окно редактора WebStorm с программой на JavaScript
Для вывода сообщения в главном документе веб-браузера в файле hello.js можно использовать метод document() по следующему образцу
2.5.6. Подключение JavaScript кода к файлу main.html
Для того чтобы выполнять скрипт, размещаемый в файле hello.js , нужно в файле main.html вписать следующий код
Здесь имя исполняемого JavaScript-файла задается с помощью атрибута hello.js .
После корректировки, полный код файла main.html будет выглядеть так:
Подобным образом в код HTML-файла можно добавлять любое количество файлов на языке JavaScript.
How to run JavaScript in WebStorm
I’m new at this so apologies in advance if I’m missing something obvious, but I’m not able to figure out how to run JavaScript in WebStorm. The WebStorm documentation says to simply open the HTML file in the browser, but that doesn’t seem to work. For what it’s worth, everything is working up on codepen.io.
Here’s the HTML (for a simple weather app):
And here’s the script (still in draft, as it needs to be expanded to, among other things, link to images covering all values for ‘weather’):
Как открыть / отладить текущий файл, используя встроенный веб-сервер в WebStorm?
Есть ли способ создать конфигурацию запуска, которая откроет файл , который редактируется, в браузере, используя встроенный веб-сервер WebStorm ( http://localhost:63342/ ) и начнет отладку?
2 ответа
Вам не нужна настройка запуска, но развертывание по умолчанию На месте:
Обратите внимание, что имя конфигурации сервера (LOCAL) находится в жирным шрифтом, что означает, что оно по умолчанию (может быть установлено в меню правой кнопки мыши или значок).
Настройте сопоставления следующим образом:
где проект — это название вашего проекта.
Теперь вы можете использовать View | Preview file in ( Alt + F2 ) и включите Live Edit , если необходимо.
Обратите внимание, что это полезно для предварительного просмотра и не запускает отладку JavaScript. Чтобы отлаживать скрипты на странице, щелкните правой кнопкой мыши в файле и используйте действие Отладка в контекстном меню Run или файла или соответствующий ярлык на клавиатуре: