Debugging PHP and JavaScript code at the same time

Debugging JavaScript and PHP with PhpStormWhen developing PHP applications for the web, chances are we’re also using a good amount of JavaScript with it. Using PhpStorm, we can debug the PHP code running on the server and inspect what is happening while it’s running. We can also debug the JavaScript running in the browser by starting a JavaScript debugging session from our IDE. But what if we want to do both at the same time? Is that even possible? Well, yes, it is! Here’s how.

The first thing we want to do is listen for incoming PHP debug connections. Toggle the Listen for PHP Debug Connections button in the toolbar so PhpStorm will react on incoming connections from Xdebug or Zend Debugger.

Next, we can start a JavaScript debug session from the context menu: Debug | somefile.php will launch the browser with the JavaScript debugger enabled. We can then use the PhpStorm debugger bookmarklets or one of the Browser Debugging Extensions to start a PHP debugging session from the same browser window. And then, magic happens! PhpStorm will let us debug both JavaScript and PHP at the same time! The IDE will switch between the debuggers as necessary.

JavaScript and PHP debugger at the same time in PhpStorm

Learn more about how to debug JavaScript and PHP simultaneously in PhpStorm in our tutorial. Don’t have PhpStorm yet? Give the latest PhpStorm 8 EAP a go. Your feedback is welcome through the issue tracker, by posting in the comments below, or in our forums!

Develop with pleasure!
– JetBrains PhpStorm Team

This entry was posted in Cool Feature and tagged , , , , . Bookmark the permalink.

2 Responses to Debugging PHP and JavaScript code at the same time

  1. Simon says:

    ‘Listen for PHP Debug Connections’ is disabled. How can I enable it? I had a run config setup, but I deleted it, but still I cant enable it.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">