Phpstorm запустить в браузере
В этом руководстве описывается отладка JavaScript-кода в PhpStorm. Все действия, описанные здесь, были воспроизведены с корректными ожидаемыми результатами на PhpStorm 2016.1.2.
Ты когда-нибудь задумывался, что происходит в памяти браузера и DOM при работе с JavaScript? С помощью PhpStorm можно заниматься отладкой JavaScript-кода и выполнять его поэтапно, проверяя переменные (и даже изменяя их) во время выполнения скрипта. Давай посмотрим, как это делается.
Помимо отладки JavaScript-кода, c помощью PhpStorm можно заниматься и отладкой PHP-кода.
1. Установка расширения для браузера Google Chrome
Для отладки JavaScript-кода в PhpStorm используется расширение JetBrains IDE Support для браузера Google Chrome. Это расширение обеспечивает связь между тем, что происходит в IDE, и тем, что происходит в браузере, и наоборот. Если расширение не установится автоматически при первом запуске сеанса отладки, то тебе придётся установить его вручную.
Также указанное расширение имеет функцию Live Edit. Это позволяет тебе в режиме реального времени, без перезагрузки страницы, видеть изменения при редактировании кода на PHP, JS, HTML, CSS. Ты правишь что-то в IDE — результат моментально отображается в браузере.
Если браузер закрыт при запуске сеанса отладки в IDE, то PhpStorm автоматически запустит его. Если расширение не установлено при запуске сеанса отладки, то PhpStorm предупредит об этом.
Установить расширение для браузера Google Chrome можно следующим образом:
-
Открой Chrome, перейди к настройкам и выбери раздел Extensions или в адресной строке браузера набери:
После установки расширения, можно заняться отладкой JavaScript-кода в PhpStorm.
2. Установка точек останова
В редакторе PhpStorm можно установить точки останова. Точки останова — это строки кода, в которых отладчик приостанавливает выполнение программы и позволяет увидеть, что происходит внутри JavaScript-кода. Ты можешь установить или удалить точки останова, щёлкнув в любой строке кода c левой стороны от редактора или поместив курсор на строку кода использовать горячие клавиши Ctrl + F8 ( Cmd + F8 на Mac OS X). IDE показывает точку останова, как большую красную точку с левой стороны от редактора.
Нажми здесь, чтобы загрузить комплект файлов проекта для этого руководства.
3. Запуск сеанса отладки
После добавления точек останова, ты можешь начать сеанс отладки. Это можно сделать, с помощью панели инструментов или создав конфигурацию отладки JavaScript-кода, с помощью главного меню PhpStorm [Run → Edit Configurations. ] . Также ты можешь использовать контекстное меню файла, который нуждается в отладке, выбрав пункт Debug .
Последний способ создаст конфигурацию отладки за тебя, а также запустит браузер.
4. Отладка
После запуска сеанса отладки, PhpStorm приостанавливает выполнение программы в точке останова и выделяет строку исходного кода, которая ещё не обработана интерпретатором.
Затем в IDE открывается окно инструмента Debug , с помощью него ты можешь перемещаться по работающему коду и проверять значения переменных.
4.1. Пошаговое выполнение кода
С помощью иконок на панели инструментов или горячих клавиш ты можешь перемещаться по коду:
- Step Into ( F7 ) — выполнение следующего выражения, таким способом их можно проверять одно за другим.
- Step Over ( F8 ) — выполнение следующего выражения в целом, без перехода вглубь стека выполнения.
- F9 — выполнение выражений до следующей точки останова.
4.2. Наблюдение
Если нужно проверить значение определённой переменной в разных частях программы, то ты можешь добавить эту переменную в список наблюдений, с помощью панели Watches . Таким образом, запустив сеанс отладки и выполняя код пошагово, ты сможешь видеть, какие значения имеет переменная в разных частях программы. Эта возможность помогает фокусироваться и анализировать только нужные переменные.
4.3. Параметры точек останова и условные точки останова
Представь, что ты занимаешься отладкой цикла. Если поместить точку останова внутри тела цикла, то она будет срабатывать на каждой итерации. А тебя, например, интересует только то, что происходит в коде для конкретной итерации, тогда можно сделать точку останова условной точкой останова.
Для этого с помощью главного меню IDE [Run → View Breakpoints] или горячих клавиш Ctrl + Shift + F8 ( Cmd + Shift + F8 на Mac OS X) можно открыть диалоговое окно Breakpoints и настроить точки останова. Можно указать условие, при котором точка останова является допустимой, где отладчик должен приостановить выполнение программы. Например, когда переменная итератора i равна 3, как показано ниже:
4.4. Изменение переменных при выполнении кода
При отладке также полезна возможность, которая позволяет изменять переменные прямо во время выполнения кода. Например, ты можешь изменить переменную для тестирования конкретного условия. Переменные можно редактировать во время выполнения с помощью пункта контекстного меню Set value. ( F2 ) на панели Variables окна инструмента Debug .
После установки нового значения любой переменной, можно продолжить отладку кода.
Используя пункт контекстного меню Evaluate Expression. , ты можешь выполнить любое выражение во время сеанса отладки. Это полезно использовать для быстрой проверки условия, вызова другой функции и так далее.
5. Карты кода *
Отладчик JavaScript также позволяет тебе работать с картами кода. Это очень удобно при использовании минифицированного JavaScript-кода или таких языков, как CoffeeScript или TypeScript, которые компилируются в JavaScript.
Например, при использовании минифицированной версии jQuery ты можешь начать отладку и перейти к его исходному коду. PhpStorm при наличии соответствующей карты кода распознает и покажет тебе исходный код jQuery, а не минифицированную версию.
При работе с языками, которые компилируются в JavaScript, также используется идея карт кода. Ты можешь установить точки останова в коде CoffeeScript или TypeScript и запустить сеанс отладки. Отладчик будет знать, как сопоставить выполняемый JavaScript-код с исходным файлом. Он отобразит точки останова в CoffeeScript или TypeScript, даже если браузер фактически выполняет код на JavaScript.
6. Плагин Spy-js *
Также в PhpStorm для отладки JavaScript-кода можно использовать плагин Spy-js. Он позволяет заниматься отладкой без точек останова и профилированием без специальных инструментов. Spy-js использует исторические данные исполнения, чтобы предоставить отладочную информацию после запуска кода. Более подробную информацию о плагине Spy-js ты можешь найти в блоге PhpStorm.
Пункт является опциональным при изучении руководства: Отладка JavaScript в PhpStorm.
Integrate installations of Web browsers with PhpStorm, activate or deactivate launching Web browsers from PhpStorm .
Specify whether a browser will be launched by running its executable file or through the default system command .
Appoint the default PhpStorm browser in which PhpStorm will open HTML files upon request by default, that is, when no browser is specified explicitly
Enable the browser popup for opening HTML or XML files in the browser.
Configure when a page should be reload automatically in the browser or in the built-in preview.
Browsers
In this section, specify which browsers will be available for previewing HTML output. The section shows the browsers from the predefined list and the previously configured custom browser installations, if any.
PhpStorm is shipped with a predefined list of most popular browsers that you may install and launch automatically from the IDE during running, debugging, or previewing the output of an HTML file. PhpStorm presumes that you install browsers according to a standard procedure and assigns each installation an alias which stands for the default path to the browser's executable file or macOS application.
If in your actual browser installation the path to the executable file is different, you need to specify it explicitly in the Path field.
In addition to the predefined browsers, you can configure as many custom browser installations as you need using the controls on the toolbar.
Select this checkbox to enable the use of the respective browser from PhpStorm. The browser will be added to the context menu of the Open in Browser menu item and its icon will be displayed in the browser icons popup.
If this checkbox is cleared, the corresponding browser icon will not appear in the icons toolbar or popup.
In this column, specify the browser name.
In this column, specify the family to which the browser belongs.
In this column, specify the path to the executable. If the browser was installed according to a standard installation procedure, most likely the alias in the Path field points at the right location. If it does not, click and select the actual path in the dialog that opens. In the dialog that opens, select the path to the executable file of the corresponding browser.
Toolbar
Click this button to add a custom browser to the list.
Click this button to delete the selected customer browser from the list. Note that you cannot delete the browsers from the predefined list.
Click this button to specify a custom profile for Firefox or a browser of the Chrome family. The button is available only when Firefox and Chrome are selected.
In the Firefox Settings dialog, specify the Firefox browser profile to use for previewing output:
Path to "profiles.ini" : in this field, specify the location of the profiles.ini file, which determines the Firefox profile to be used.
Profile : from this list, select the desired predefined profile to use. Learn more at Firefox browser profile.
In the Chrome Settings dialog:
Command line options : In this field, enter the command-line options to launch an instance of Chrome. If you need more space, click , or press Shift+Enter to open the editor box. Learn more about Chrome command-line options by opening chrome://flags in Chrome .
Use custom user data directory : Select this checkbox to define a user-specific Chrome profile settings to use and specify the location of the user data directory in the PhpStorm settings.
Use these buttons to move the selected browser up or down in the list. The order of browsers is important for rendering external resources and previewing files with Web contents.
Click this button to create a copy of the selected browser.
Default Browser
In this section, specify the default PhpStorm browser that will be used by default for rendering external resources and previewing files with Web contents. This browser will be referred to as Default in the context menu when you choose View | Open in Browser from the main menu or Open in Browser from the context menuu of a file.
System default : Select this option to accept your operating system default Web browser as default for PhpStorm.
First listed : Select this option to have PhpStorm launch the first browser in the list. Change the order or browsers using the and icons on the toolbar.
Custom path : Select this option to specify another Web browser as default for PhpStorm. Type the path to the executable file of the browser or click and select the path in the dialog that opens.
Configure the browser icons popup in the editor
In this area, configure whether you want PhpStorm to show a popup with enabled browsers in HTML or XML files. This popup is used to preview the output of the current file.
By default, the browser icons popup appears only in HTML files. In XML files, the popup by default does not show up to help you read and edit your code without distraction. Use the For HTML files and For XML files checkboxes to have the popup displayed or hidden depending on the current file type.
Reload behaviour
In this area, specify the actions that trigger reloading HTML pages automatically in the browser or in the built-in preview. Learn more from Preview an HTML file in a browser.
From the Reload page in browser and Reload page in built-in preview lists, select the actions that will trigger automatic reload of pages in web browsers and in the built-in preview.
By default, On Save is selected, so after you open an HTML file in the browser or in the built-in preview, PhpStorm automatically reloads the page every time this HTML file (or any linked JavaScript or Style Sheet file) is saved manually or automatically, see Save and revert changes.
The built-in server can only serve static content like HTML, JavaScript and CSS. To use it with PHP files, you need a local PHP interpreter specified for your project. When the interpreter is configured, PhpStorm will automatically start the PHP Built-In Web Server and redirect all PHP requests to it as soon as you run your PHP application. To run your PHP application, either open a file in the browser or create a dedicated run/debug configuration and launch it.
For more details on working with deployment servers, refer to the Deployment section.
Open a file in a web browser
To open a file that is intended to be rendered by a web browser (HTML, XML, JSP, and so on), do one of the following:
Right-click a file and select Open in Browser .
From the main menu, select View | Open in Browser .
Use the browser popup in the top right part of the editor window. Click the browser button to open the web server file URL, or Shift+Click it to open the local file URL.
The Open in Browser action is not available for other file types. However, you can still execute it using Find Action Ctrl+Shift+A .
You can also preview HTML and PHP files via the built-in preview in the dedicated editor tab.
PhpStorm built-in preview
PhpStorm built-in preview makes your work faster as you no longer need to switch to the browser and refresh the pages. The preview is opened in a separate editor tab and reloaded automatically as you type or when you save the changes, depending on the reload behavior.
Open the PhpStorm built-in preview
From the main menu, select View | Open in Browser , and then select Built-in Preview from the list.
Alternatively, hover your mouse pointer over the code to show the browser icons popup, and click .
Configure the built-in web server
To customize the parameters of the built-in web server, in the Settings/Preferences dialog ( Ctrl+Alt+S ), go to Build, Execution, Deployment | Debugger .
Use this spin box to specify the port on which the built-in web server runs. By default this port is set to 63342 through which PhpStorm accepts connections from services. You can set the port number to any other value starting with 1024 and higher.
Can accept external connections
If this checkbox is selected, then the files on the built-in server running on the specified port are accessible from another computer.
If this checkbox is cleared (by default), then the debugger listens only to local connections.
Allow unsigned requests
For security reasons, any request to a page on the built-in server from outside PhpStorm is by default rejected and the authorization popup is displayed.
To access the requested page, click Copy authorization URL to clipboard and paste the generated token in the address bar of the browser.
However this behavior may be annoying, for example, it may block your debugging session if manual intervention is impossible. To suppress displaying the authorization popup, select the Allow unsigned requests checkbox.
Use the PHP built-in web server on macOS
On macOS, you may get the php-cgi not found error when trying to use the built-in server. This indicates that PhpStorm is configured to use the PHP interpreter bundled with macOS, which does not contain the php-cgi module.
To be able to use the PHP built-in web server, do the following:
Install an alternative PHP interpreter with the php-cgi module included. The most common options are as follows:
Appoint the newly installed PHP interpreter for use in PhpStorm as described in Configure local PHP interpreters.
Эта заметка является вольным переводом достаточно старой записи из блога PhpStorm с незначительными дополнениями.
На данный момент очень популярной системой контроля версий (VCS) является Git, совместная разработка на её основе возможна также с помощью веб-сервиса GitHub.
В этой заметке будет рассмотрено несколько интеграций с GitHub, доступных в IDE. Эта функциональность доступна во многих продуктах компании JetBrains:
Также следует отметить, что кроме указанных здесь интеграций PhpStorm обеспечивает полную поддержку Git: фиксацию изменений и обновление файлов, каталогов или всего проекта, списки изменений, поддержку ревизий, и так далее.
Узнать больше об этих функциях ты сможешь в более ранней заметке Обзор VCS.
1. Необходимые условия
Прежде чем ты продолжишь, убедись, что PhpStorm знает путь к исполняемому файлу Git. Если с этим возникли трудности, то ознакомься с этой справкой PhpStorm. Также проверь, что ты уже зарегистрировал учётную запись в GitHub. Затем ты можешь добавить её через главное меню IDE [File → Settings… → Version Control → GitHub] в настройках PhpStorm. Таким образом, тебе не придётся предоставлять данные своей учётной записи GitHub время от времени.
Все действия, описанные здесь, были воспроизведены с корректными ожидаемыми результатами при следующем технологическом окружении:
2. Создание репозитория на GitHub
Всякий раз, когда ты приступаешь к новому проекту на GitHub, есть небольшая проблема выбора, с чего начать. Есть два варианта развития событий:
- Начать с кодирования, а затем запушить (push) исходный код на GitHub.
- Создать проект на GitHub, клонировать его локально, а затем начать кодировать.
В любом случае PhpStorm поддерживает оба варианта.
Как только твой проект будет готов к публикации на GitHub, ты можешь использовать главное меню IDE [VCS → Import into Version Control → Share Project on GitHub] для начала публикации проекта.
Далее IDE предоставит тебе возможность добавить файлы для начальной фиксации, стоит отметить, что этот шаг можно пропустить.
Затем если всё в порядке, в правом нижнем углу PhpStorm ты увидишь следующее уведомление:
Отлично! Теперь твой проект опубликован на GitHub. Отныне ты можешь использовать любую другую команду из главного меню VCS для работы со своим репозиторием. Подробнее об этом читай в этом посте.
3. Клонирование репозитория c GitHub
Что делать, если ты хочешь продолжить работу над существующим проектом, размещённом на GitHub? Как правило, тебе нужно открыть браузер и перейти на страницу репозитория, чтобы скопировать URL, который поможет тебе клонировать проект с помощью Git. А если ты помнишь URL репозитория, то можешь сразу перейти к его клонированию. Почему бы не клонировать проект с GitHub прямо из PhpStorm?
Это легко можно сделать с помощью следующего пункта главного меню IDE: [VCS → Checkout from Version Control → Git] . Используй его и ты получишь список всех репозиториев, к которым у тебя есть доступ согласно твоей учётной записи GitHub. Затем выбери нужный репозиторий и клонируй его в текущий проект PhpStorm.
После нажатия кнопки Clone (Клонировать), ты получишь всё содержимое хранилища локально и сразу можешь приступать к написанию кода. Позже используй традиционные команды Git из меню VCS для работы с репозиторием.
4. Создание фрагмента кода на GitHub
GitHub Gist — это простой способ поделиться фрагментами кода с другими. Также с его помощью можно создавать, просматривать и комментировать кусочки кода.
Gist (гист) — это фрагмент, кусочек или паста кода. GitHub Gist — это часть веб-сервиса GitHub, которая предназначена для хранения или обмена фрагментами кода между людьми. В основе этого сервиса также лежит VCS Git, что делает возможным коллективную работу над кодом, поддержкой форков и версионности.
Зачем копировать и вставлять код из IDE на страницу в GitHub Gist, если для этого тебе достаточно лишь сделать клик правой кнопкой мыши?
В любом файле, открытом в IDE, ты можешь выделить код, затем сделать клик правой кнопкой мыши и выбрать пункт Create Gist… из контекстного меню. Также есть возможность добавить описание и при желании сделать гист приватным или анонимным.
5. Открытие файла в браузере на GitHub
Тебе когда-нибудь хотелось увидеть все детали файла, над которым ты работаешь? Сделай клик правой кнопкой мыши на нужном файле и выбери пункт Open on GitHub из контекстного меню.
Откроется браузер по умолчанию и страница GitHub с выбранным файлом. Она позволит тебе видеть историю файла, исследовать ветви и многое другое, всё доступно через веб-интерфейс сервиса GitHub.
6. Использование трекера задач в GitHub
Работа над проектом часто означает работу с трекером задач (системой отслеживания ошибок). И поскольку GitHub имеет свой трекер, давай рассмотрим, как он интегрируется с PhpStorm. Для этого в первую очередь тебе необходимо выполнить небольшой шаг настройки IDE.
После ты можешь работать с трекером задач GitHub и соотносить коммиты исходного кода с конкретными проблемами. Попробуй создать новую задачу. Для этого в главном меню выбери [Tools → Tasks & Contexts → Open Task…] или просто нажми Alt + Shift + N . Откроется диалоговое окно, в котором можно выбрать существующую задачу или создать новую.
Когда определился с задачей, нажми Enter . Откроется окно Open Task . Оно содержит ряд опций, которые ты можешь использовать на свое усмотрение.
После внесения некоторых правок существует возможность указать PhpStorm, что их следует добавить в changelist (список изменений) для выбранной задачи. Чтобы сделать это используй пункт главного меню [Tools → Tasks & Contexts → Add changelist for 'task name'] .
Changelist (список изменений) — это набор изменений в файлах, который представляет собой логическое изменение исходного кода. Другими словами — это группировка правок по какому-то признаку. Изменения, указанные в списке изменений, сохраняются в репозитории только после коммита (пуша).
Многие функции GitHub интегрированы в PhpStorm. Эта интеграция позволяет тебе комфортно решать несколько задач, которые обычно выполняются либо в командной строке, либо с помощью браузера. Таким образом, ты становишься более продуктивными, потому что в твоей работе происходит меньше переключения контекста.
В окне инструмента REST Client можно указать:
Когда ты нажимаешь кнопку Run на панели инструментов окна REST Client (или нажимаешь Ctrl + Enter ), запрос будет выполнен и откроется вкладка Response (ответ). Там ты увидишь тело ответа, которое может быть представлено в одном из 4-х форматов:
- HTML — стандартизированный язык разметки документов во Всемирной паутине.
- XML — расширяемый язык разметки.
- JSON — текстовый формат обмена данными, основанный на JavaScript.
- RAW — необработанные данные, без какого-либо форматирования.
Ещё можно экспортировать ответ в xml-файл или открыть его в браузере. Ниже пример ответа в формате HTML:
Ниже пример ответа, возвращающего JSON:
На вкладке Cookies показаны ключи и значения всех куки-файлов, которые были возвращены удалённым сервером. Куки могут быть изменены или удалены. При последующих запросах они будут отправлены на сервер.
1.1. Создание заголовка авторизации
Для некоторых конечных точек (запросов) потребуется авторизация. Ты можешь добавить заголовок Authorization вручную при создании запроса. Например, при использовании какого-либо сервиса, может потребоваться токен, полученный через OAuth-авторизацию.
Для использования базовой аутентификации PhpStorm может помочь тебе сгенерировать заголовок. Для этого на панели инструментов окна REST Client нажми на иконку Generate Authorization Header (создать заголовок авторизации). Откроется окно, в котором ты сможешь ввести имя пользователя и пароль, для которых IDE сгенерирует заголовок.
1.2. Куки-файлы
Как ты видел в предыдущем примере, куки-файлы, возвращаемые удалённым сервером, будут видны на вкладке Cookies и могут быть отредактированы. Также можно добавить собственные значения куки, если это необходимо для тестирования сервиса.
С помощью иконки Add или сочетания клавиш Alt + Insert ( Cmd + N на Mac OS X), ты можешь добавить новую запись куки, в которой можно указать:
- имя куки-файла,
- значение куки-файла,
- домен,
- путь,
- дата истечения срока действия куки-файла.
Этот функционал очень удобно использовать в тех случаях, когда REST сервис требует наличия определённых куки-файлов или использует их для получения данных сессии.
Тот факт, что встроенный REST клиент поддерживает создание куки-файлов и добавление куки-файлов из ответа сервера, полезен при создании запросов, предназначенных для сервера, использующего сессии. Например, конечная точка основана на PHP и содержит функцию session_start() , которая позволяет использовать данные из сессии. А куки-файл, который идентифицирует пользователя, сохраняется и отправляется обратно на сервер при каждом последующем запросе.
2. Повторное использование запросов
PhpStorm отслеживает запросы, выполненные с помощью встроенного REST клиента. Ранее выполненные запросы можно запускать вновь, а также импортировать или экспортировать.
2.1. Последние запросы
При выборе запроса из списка Recent Requests , вкладки Request и Cookies заполнятся значениями, которые были использованы в запросе ранее.
2.2. Импорт и экспорт запросов для повторного использования
Запросы хранятся в XML-файле, который можно редактировать при необходимости. Ты также можешь добавить эти экспортированные запросы в VCS, чтобы члены твоей команды могли воспользоваться ими во время разработки или для тестирования определённых вещей. Ниже представлен пример экспортированного запроса, который использует GitHub API и ищет код пользователя (организации) JetBrains, который содержит слово PhpStorm :
У разработчиков PhpStorm отличное чувство юмора! Куки-файлы в экспортированном запросе хранятся в опции с именем biscuits .
Импорт сохранённых запросов можно выполнить через иконку Import Request , расположенную также на панели инструментов. Стоит лишь выбрать нужный XML-файл и PhpStorm обновит вкладки Request и Cookies , используя значения из сохранённого запроса.
3. Настройка параметров прокси-сервера
Читайте также: