Debugging PHP and JavaScript code at the same time

Posted on by Maarten Balliauw

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

Comments below can no longer be edited.

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

  1. Simon says:

    July 8, 2014

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

    • Simon says:

      July 8, 2014

      Found it. Had to check PHP -> Debug -> Xdebug: Can accept external connections

  2. Luke Patterson says:

    August 9, 2014

    This is awesome, but please please keep the screen position the same for the js/php debug tabs’ “Resume” actions. Scenario: I am debugging both js and php at the same, time, with breakpoints in each, and I have my mouse placed over php debug tab’s “Resume” action, and I’m clicking away as I work through breakpoints… ok, so then I hit a javascript breakpoint… and guess where my mouse is hovering – over the js “Rerun” action! Ha! I just restarted my debugging session when all I wanted to do was “Resume”. I know I can use the keyboard shortcuts and all, but sometimes I just like to click through, and usually I’m paying attention to the code and it’s annoying (as much as something as relatively small in the grand scheme of things can be) to keep ping-ponging my eyes back and forth between the editor and debug actions.

    Other than that, great job!


Subscribe for updates