We already cover how to debug PHP in another article, so I’ll focus on JavaScript here.
#Phpstorm blog code
Once you’ve set up the JavaScript debugger, you’re all set, and you can start debugging your PHP and JavaScript code in the same session. Even if you try to edit the available list of browsers and enable Firefox it won’t come up as an option. As mentioned earlier, this needs to be a Chromium-based browser. You can select the browser you want to use for JavaScript debugging from the browser dropdown. This will create the new JavaScript Debug Configuration, and ask you to enter a “Name” and “URL”.
#Phpstorm blog plus
Next, click the plus sign in the top left to add a new configuration and then select JavaScript Debug from the select box. This opens the “Run/Debug Configurations” dialog. From the PhpStorm menu, click Run and then Edit Configurations. The PhpStorm documentation goes in-depth, but I’ll cover the basics here.įirst, you create a JavaScript debugging configuration. You can then configure the PhpStorm JavaScript debugger. I personally use Brave, but any other Chromium browser should work.
#Phpstorm blog install
JavaScript debugging in PhpStorm is only supported on Chrome or Chromium-based browsers, so to keep things consistent you’ll need to install and enable the Chrome Xdebug helper for the local site you are debugging. To the Workshopįor PHP debugging, you’ll need to set up PhpStorm to debug your PHP scripts with Xdebug, which also requires you to install the Xdebug browser extension. Removing the random string and/or setting up source maps for your scripts help, but it’s not always possible.Ĭonvinced yet? Let’s dive in. The browser debuggers won’t save breakpoints when you refresh the page if there is a cache-busting string appended to the URL in a script tag. This highlights the second advantage of the PhpStorm debugger: having breakpoints reliably saved between page refreshes. Being able to debug and inspect everything going on in one place is a huge plus. However, if you’re dealing with an application that uses PHP and JavaScript, it’s distracting to keep switching to an external debugger outside the IDE. Web browsers like Google Chrome, Firefox, and Safari have their own JavaScript debuggers. You have to wait for the build task to complete to see your output, costing even more time. Not only that, modern JavaScript projects often use build tools like Grunt, Gulp, webpack, or npm scripts. This is painfully slow, causing you to lose valuable time. You could try adding a console.log() call at the point where the asynchronous request is made, but you generally have to add a few to see what’s going on at different points in execution. First, you have to rule out if the issue lies with JavaScript. You’ll know how painful this can be if you’ve ever had to debug a WordPress asynchronous request handled by either admin-ajax.php or the WP REST API. One of the biggest advantages of setting this up alongside the PHP debugger is that it’s possible to debug both JavaScript and PHP during the same session! PhpStorm also ships with a JavaScript debugger, which is just as straightforward to set up and use. It reminds me of my Delphi/Visual Basic days when the development IDE had a built-in step debugger you could turn on by setting a few breakpoints and running the application code. PhpStorm supports advanced Xdebug features like remote debugging, but one of my favorite features is the zero-configuration debugging setup. Why Use the PhpStorm Debugger?īuilt by JetBrains, PhpStorm is in my opinion - and the opinion of many of my colleagues - the best IDE for PHP development. How is this magic even possible? In this article, I’ll show you how it works, how to use it to debug JavaScript and PHP code at the same time, and how you can debug modern JavaScript frameworks like React or Vue.
PHP is a backend language, and JavaScript is (for me) a frontend language. What I didn’t know until very recently was that it’s also possible to debug JavaScript using the same setup, which blew my mind! Ever since I discovered how to configure PhpStorm with Xdebug for debugging, it’s been my go-to solution for hunting down difficult to reproduce bugs.
0 kommentar(er)
