It’s a little confusing, but I had the best success following the instructions for a remote server. Then you’ll need to install the Jetbrains Chrome extension so that Chrome and PhpStorm can talk to each other.įor the purposes of this post, we’re going to go over Remote Debugging as my local dev sites all use separate local domains and to PhpStorm they are ‘remote’. Things seem to work best with Chrome, though there is a Firefox configuration as well. The next thing you’ll want to do is make sure you’re using the Chrome web browser. It goes over the main steps required to get things up and running. The first thing you’ll want to do is check out the Jetbrains documentation on configuring the JavaScript debugger. As we’ll soon see, both JavaScript and PHP can be debugged during the same session. Removing the random string and/or setting up source maps for your scripts would help with this, but it’s not always possible.įinally, the biggest advantage of the PhpStorm JavaScript debugger is it’s integration with the Xdebug PHP debugger. The Chrome debugger won’t save breakpoints between page loads if there is a cache busting string appended to the URL in a script tag. The second advantage is having breakpoints reliably saved between page refreshes with the PhpStorm debugger. If you have a grunt or gulp task that compiles your scripts this is a helpful addition. The first advantage of the PhpStorm debugger is that it allows you to define tasks or scripts to run before debugging is started. I’ve used the Chrome debugger in the past but I prefer the PhpStorm debugger for a few reasons. However, for me it always felt disjointed to use an external debugger not in my IDE. It’s also a pretty simplistic way to view your JavaScript code and doesn’t give you the full picture.Ĭhrome does have a decent debugger built into the developer console. You have to wait for the build task to complete to see your output – losing valuable seconds of your day. The issue with this method arises when you use build tools, like we do with WP Migrate DB Pro. What I would normally do is jam in a console.log() call at the point where I wanted to know a value, and fire up Chrome’s console to see what’s what. Have you ever found yourself with a complex JavaScript file or method and you needed to know the value of a variable at some point during the script execution? I know I have, especially when ‘ grokking‘ a new codebase or function. Let’s get to it! Why Use the PhpStorm Debugger? 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. VCS integration and color highlighting of code changes.I won’t go over the full list of features, but some of the things I find helpful daily are:

Since I started with Delicious Brains last July, I’ve become a big fan of PhpStorm.

Phpstorm debug