Debugging an application

Create a debug configuration of the type JavaScript Debug: On the main menu, choose Run | Edit Configuration, then in the Edit Configurations dialog, click on the toolbar and select JavaScript Debug from the pop-up list.

Choose the newly created configuration in the Select run/debug configuration drop-down list on the tool bar and click the Debug toolbar button . The HTML file specified in the run configuration opens in the chosen browser and the Debug tool window appears.

Example

Suppose you have a simple application that consists of an index.html file and a MyJavaScript.js file, where index.html references MyJavaScript.js. Let's now deploy our simple application to a local web server, see Managing Files on Web Servers. In this example it is Apache:

When using a local web server, such as Nginx or Apache, as in our example, or the web server is on a remote host, you need to create a Run/Debug configuration to start the JavaScript debugger. To do that, click the drop-down list at the upper right-hand corner of the PhpStorm window and choose Edit Configurations. Alternatively, choose Run | Edit Configurations on the main menu: In the Run/Debug Configurations dialog box that opens, click and choose JavaScript Debug from the list: Specify the URL you are running your application at: In our example, the local project structure and file structure on the server are the same so no mappings are required.

Now we can start debugging: choose the new run/debug configuration from the drop-down list in the upper right-hand corner of the PhpStorm window, and then click to the right of the list:

Configuring mappings

Mappings set correspondence between files on a web server and their local copies.

When do I need mappings?

When your application is deployed and running on a remote web server.

When you have defined several resource root folders in addition to the project root.

In most cases, PhpStorm sets path mappings automatically by reusing mappings from the deployment configuration. If your application structure is complicated, additional manual configuration is required.