Versions Compared

Key

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

...

1. Listen for PHP debug connections

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 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.

...

Starting the JavaScript debugger in PhpStorm can be done 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 in complex setups.

...

In the previous steps, we started the JavaScript and PHP debugger separately. When using Xdebug, we can pass a XDEBUG_SESSION_START URL parameter to our server to start PHP debugging simultaneously with JavaScript debugging. We can do this using a custom Run/Debug configuration which can be created 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. Make sure to append the XDEBUG_SESSION_START=some-session-name URL parameter, e.g. ?XDEBUG_SESSION_START=phpstorm

...

  • Listen for PHP debug connections
  • Start the newly created Debug configuration

5. Troubleshooting

...

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

...

The current version of PhpStorm does not support setting both PHP and JavaScript breakpoints in one file. For example, no JavaScript breakpoints can be set in the following code:

Code Block

<?php
// ...
?><!doctype html>
<html lang="en">
<head>
    <script>
        /* javascript code */
    </script>
</head>
<body>
</body>
</html>

To be able to debug the PHP and JavaScript code simultaneously, it's best to move the JavaScript code into a separate .js file and reference it from the HTML:

Code Block

<?php
// ...
?><!doctype html>
<html lang="en">
<head>
    <script src="index.js"></script>
</head>
<body>
</body>
</html>

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

Align
alignright

HTML
<a href="http://twitter.com/share" class="twitter-share-button" data-text="Debugging PHP and JavaScript code at the same time" data-count="horizontal" data-via="phpstorm" data-hashtags="">Tweet</a><script charset="local" type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<span id="fb-root"></span><script charset="local" type="text/javascript" src="http://connect.facebook.net/en_US/all.js#appId=225642620794980&xfbml=1"></script><fb:like href="http://confluence.jetbrains.com/display/PhpStorm/Debugging+PHP+and+JavaScript+code+at+the+same+time" send="false" layout="button_count" width="150" show_faces="false" style="position:relative;margin-left:-20px;top:-5px;"></fb:like>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<g:plusone size="medium"></g:plusone>