Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

In PhpStorm, toggle the Listen for PHP Debug Connections button in the toolbar. Alternatively use the Run | Start listen for PHP Debug Connections menu.

Tip

We do not have to setup set up any Run/Debug Configurations for this. As outlined in Zero-configuration Web Application Debugging with Xdebug and PhpStorm, Listen for PHP Debug Connections will make PhpStorm accept incoming debugger connections initiated by Xdebug or Zend Debugger.

...

Depending on preference and/or application requirements, we can use PhpStorm's built-in webserver to run our application locally, or make use of any other webserver running locally or on a remote machine.

2.1. (option 1) Using the built-in webserver

Starting the The JavaScript debugger in PhpStorm can be done started from the editor or from the Project tool window, using the Debug | <filename> context menu. If the selected file is a PHP file, two entries will be available. It is important to select the first one in this case, which will start the JavaScript debugger.

...

When using a local webserver such as Apache or Nginx, or when developing on a remote web server or a Vagrant machine, we can start the JavaScript debugger using a Run/Debug configuration. We can create one from the toolbar or the Run | Edit Configurations... menu.

  • Using the + button in the toolbar, add a new JavaScript Debug configuration.
  • Enter the full URL to the page we want to debug on the webserver.
  • Optionally, provide some mappings so PhpStorm can determine where to find local files relative to the remote URL. This will only be required when we have a different project structure locally and on the remote server. Note that if you are Deploying PHP applications with PhpStorm, mappings will be reused from the deployment configuration.

Once that is configured, we can start the JavaScript Debug session from the toolbar.

...

Tip

To start a PHP debugging session, we will make use of the approach outlined in Zero-configuration Web Application Debugging with Xdebug and PhpStorm aproach.

From the browser, we can use the PhpStorm debugger bookmarklets or one of the Browser Debugging Extensions to start a PHP debugging session.

...

This will instruct the PHP server to make a connection to PhpStorm and open the debugger. Note that the IDE may initially ask you to provide the necessary path mappings. Once the debugger is attached, we will be able to debug both JavaScript and PHP at the same time. PhpStorm will switch between the debuggers as necessary.

...

  • Using the + button in the toolbar, add a new JavaScript Debug configuration.
  • Enter the full URL to the page we want to debug on the webserver. Make sure to append the XDEBUG_SESSION_START=some-session-name URL parameter, e.g. ?XDEBUG_SESSION_START=phpstorm

Once that is configured, we can start our combined PHP and JavaScript debugging session by. To do that:

  • Listen listen for PHP debug connections;
  • Start start the newly created Debug configuration.

5. Troubleshooting

I can not cannot place breakpoints in the JavaScript parts of a .php file

...

We can then place PHP breakpoints in the .php file, and set JavaScript breakpoints in the .js file.

...