Phpstorm debug how to#
Phpstorm debug install#
Phpstorm debug full#
Phpstorm debug pro#

I should also mention that PhpStorm essentially takes over ChromeвЂ™s developer console when youвЂ™re debugging. In our case, with WordPressвЂ™ SCRIPT_DEBUG enabled, weвЂ™re able to load the unminified built files. There is an issue with WebStorm/PhpStorm and BrowserifyвЂ™s inline source maps, but there is a workaround. ItвЂ™s important to note that youвЂ™ll want to avoid minifying your built files locally during development and save minification for a final вЂbuildвЂ™ step.ДЄlternatively, if you have source maps enabled in your build process you may be able to add your breakpoints directly to your source JavaScript files.

So, if you have a /dist folder where your assets are stored, make sure the breakpoints are in these files, rather than in the source JS files. However, if you do use a build tool (like Grunt, Gulp or Webpack) youвЂ™ll have to make sure your breakpoints are in the files that are output by the build process.

If youвЂ™re not using a build tool in your workflow, youвЂ™re all set. A really important thing to note here is that your breakpoints have to be placed in the JavaScript files that the browser loads. To do that weвЂ™ll need to use some breakpoints. If all went well we should now be all set up to debug us some JavaScript.

Phpstorm debug pro#

IвЂ™m using the WP Migrate DB Pro admin page, but you could just as easily use a front-end URL for your own setup.ДЇurthermore, if the URL matches the PHPStorm project youвЂ™ve currently got open, that should be all you need to get up and running! Otherwise, you can map a domain or URL to your current project by using the вЂњRemote URLвЂќ section of the debug configuration. In this screen weвЂ™ll enter our name for this debug configuration and select a starting URL. WeвЂ™ll start by clicking on the вЂњ+вЂќ button and selecting вЂњJavaScript DebugвЂќ. To do this, letвЂ™s click on вЂњRunвЂќ in the top menu bar, and then click on вЂњEdit ConfigurationsвЂќ. In order to enable remote debugging of JavaScript, youвЂ™ll need to create a permanent debug configuration. ItвЂ™s a little confusing, but I had the best success following the instructions for a remote server.

Phpstorm debug install#

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.

Phpstorm debug full#

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?

Phpstorm debug how to#

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.