The Delicious Brains site has a tutorial posted from author Peter Tasker showing you how to debug Javascript and PHP at the same time directly in your PHPStorm IDE.

Since I started with Delicious Brains last July, I’ve become a big fan of PhpStorm. It really is the bee’s knees. I won’t go over the full list of features, but some of the things I find helpful daily are: Cmd+clicking into method definitions, VCS integration and color highlighting of code changes, code bookmarks, and of course, Xdebug integration

In this post I want to expand on what Iain already covered with PhpStorm and Xdebug and show you how to level up your JavaScript debugging skills with PhpStorm.

The tutorial starts with a section explaining why using the PHPStorm debugger could be more beneficial and provide a more integrated workflow. It then starts in on the setup, showing how to set up the extension for Chrome so that it can talk to the IDE for the Javascript side complete with screenshots (and screencasts). With the two integrated the next step is to add a breakpoint in the code and what the results look like when it's executed and thrown.

The post finishes up covering the integration of the debugger with Xdebug allowing for the complete debugging of your application in one place.