Step2: Configure PhpStorm. First, select the 'Edit configurations' item in the 'Run' menu. Then, add a new 'PHP Remote Debug' configuration. We will use the IDE key configured in your Vagrant and in your browser. To fully configure this debugger configuration, you will need to create what PhpStorm calls a server. Fill the correct hostname. 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. In addition to the browsers from the default list, you can configure custom browser installations.
Before you start
Debugging an application running on the built-in server
PhpStorm 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.
From the context menu of the editor or the selection, choose Debug <HTML_file_name>. PhpStorm generates a debug configuration and starts a debugging session through it. The file opens in the browser, and the Debug tool window appears.
To save the automatically generated configuration for further re-use, choose Save <HTML_file_name> from the context menu after the debugging session is over.
By default, a debugging session starts in a new window with a custom Chrome user data. To open a new Chrome instance with your familiar look-and-feel, configure Chrome in PhpStorm to start with your user data, see Starting a debugging session with your default Chrome user data for details.
Suppose you have a simple application that consists of an index.html file and an index.js file, where index.html references index.js. To start debugging this application using the built-in server, open index.html in the editor and choose Debug 'index.html' from the context menu:
PhpStorm creates a run/debug configuration automatically, and a debugging session starts:
To restart the new run/debug configuration, click in the upper right-hand corner of the PhpStorm window or choose Run Debug from the main menu:
Debugging an application running on an external web server
Run the application in the development mode. Often you need to run
npm startfor that.
When the development server is ready, copy the URL address at which the application is running in the browser - you will need to specify this URL address in the run/debug configuration.
Select the newly created configuration from the Select run/debug configuration list on the toolbar and click next to the list. The URL address specified in the run configuration opens in the browser and the Debug tool window appears.
See Debugging React Applications and Debugging Angular Applications for examples.
Debugging asynchronous code
Async call from <caller> is added in the Frames pane of the Debugger tab. PhpStorm displays a full call stack, including the caller and the entire way to the beginning of the asynchronous actions.
function ), then will move to line6.
The asynchronous debugging mode is turned on by default. To disable asynchronous stack traces, set
js.debugger.async.call.stack.depth in Registry to
PhpStorm supports debugging Service Workers and Web Workers. PhpStorm recognizes breakpoints in each worker and shows the debug data for it as a separate thread in the Frames pane on the Debugger tab of the Debug tool window.
Note that PhpStorm can debug only dedicated workers, debugging for shared workers is currently not supported.
Phpstorm Chromebook Download
Set the breakpoints in the Workers to debug.
If you are using Service Workers, make sure the Allow unsigned requests checkbox on the Debugger page is selected. Otherwise your service workers may be unavailable during a debug session:
Select the newly created configuration from the Select run/debug configuration list on the toolbar and click Debug .
The HTML file specified in the run configuration opens in the chosen browser and the Debug tool window opens with the Frames list showing all the Workers:
To examine the data (variables, watches, and so on) for a Worker, select its thread in the list and view its data in the Variables and Watches panes. When you select another Worker, the contents of the panes are updated accordingly.