No developer enjoys debugging web applications. But we all know that if we want quality software debugging is a crucial aspect of development. While .Net and Java developers often have IDEs that contain full debugging support, PHP developers may sometimes feel left out. Sure, there are quite a few commercial applications that help with debugging PHP. But these commercial applications are usually quite expensive and operating system dependent. Luckily there are a few open source tools out there that will give PHP developers the same debugging experience without the use of an expensive IDE.
Microsoft has recently released an open source code editor named Visual Studio Code. Visual Studio Code runs on Linux, Windows, and OSX and also features integrated debugging for almost any programming language. While Code does not feature out of the box debugging for all languages, extensions have been developed for most of the popular languages including PHP.
Installing Visual Studio Code
To get started first visit https://code.visualstudio.com to download and install Visual Studio Code. Once Code is installed and running you will need to install the PHP debugging extension. To do this, choose “View” on the toolbar and select “Command Palette”. In the drop down box type “ext install” and press enter.
Then type “PHP Debug” and choose the extension aptly named “PHP Debug” and press enter.
Once the debugging extension is installed Visual Studio Code will restart.
Installing Xdebug PHP extension
The next step is to install the Xdebug PHP extension. To do this visit https://xdebug.org/download.php and follow the instructions. If the downloading of these files and modification of your php.ini seems too daunting you can also visit https://xdebug.org/wizard.php. This wizard allows you to paste the contents of a phpinfo() call and it will then give you exact instructions on what files to download, where to place them, and what needs to be added to you php.ini file to install the extension correctly.
Visual Studio Code debugging setup
Now we need to setup Visual Studio Code to allow debugging. In Visual Studio Code, select “File” and then “Open Folder” and choose the folder containing your PHP code. Choose the Debug View from the left hand side and then click the Debug button to configure our debugging environment.
(Debug View) 
(Debug)
The first time the Debug button is selected it will create a debugging configuration file. For our purposes we can just leave it as is and not worry about it again. Click the Debug button again and if everything is setup correctly Visual Studio Code will now be in debugging mode!
Debugging! Finally!
For the debugger to be useful we now need to add some breakpoints in our code. To create a breakpoint simply click in the gutter next the line you want to create a breakpoint on.
Like most debuggers, breakpoints in Visual Studio Code are indicated by a red dot. If we now load the page in the browser the execution of the page will stop at our breakpoint and we can inspect the current state of the page.
(Paused at breakpoint)
(Local and global variables)
(Call stack)
This is a trivial example but it shows some of the debugging tools available for PHP in Visual Studio Code. The setup may seem a little complex but just remember that it only has to be done once. And the time spent in setup will more than be saved when it comes to time to debug your code. Happy debugging!
17 Responses
Great guide, but I have one utterly noob question (in terms of PHP, I am an experienced developer and have used VS Code a fair bit).
How do I see the “output of a phpinfo() call” in ordere to correctly onstall X-Debug? I have installed XAMPP, started Apache (on port 8080), installed php-debug.
and created a file called test.php with
phpinfo();
but I don’t know how to run it.
I have “php.validate.executablePath”: “C:/xampp/php/php.exe” in my settings.json
I have a build task
{ “version”: “0.1.0”,
“command”: “php”,
“args”: [
“-S”, “127.0.0.1:8080”,
“-t”, “${workspaceRoot}”
]
what do I need to do to run test.php and get the call results to use to install X-Debug?
Thanks for the simple and clear explanation! Now I’m able to set breakpoint in .php. But VSCode asks for server.js (or app.js) – I get stuck again, don’t know how to go from server.js into the php function. Please explain the auto generated “debugging configuration file.” Thanks!
Goodday. Please, I followed the instructions above. But my breakpoints are skipped when I debug. Any thoughts??
thank you, better debugging == better productivity
Thank you so much for publishing this. You are the only one who shows what to do to get the xdebug to work after configuring it!
This visual code is really good and the way you explained all thisis awesome, I will try it now .thanks for such a good post
You are right .net has several debugging applications but I as not aware about this visual studio code and I think this will help me a lot thanks ..
Amazing Article Helped Me Lot.
Great information this what i am looking for. thanks a lot..
wonderful. am able to install successfully with your structured installation instructions.
i have a query, how can i see the outcome of the phpcode line wise?
pl. suggest
Thank you. This article really helped my to config my VSC. I just start to learn PHP, and really need to debug my projects.
Thanks for such a nice article, but how do I enable debugging for Magento 2?
It would be helpful if you can help me with this.
I use Codelobster IDE for PHP debugging – http://www.codelobster.com/php_debugger.html
Thanks alot
This really helped me alot
Thanks for such a nice article, now i am able to debug. Many Thanks.
Not able to debug php in Visual Studio code using xampp in window 10 OS
this no longer works this way with xdebug version 3… so this is not going to work for ubuntu 20.04+ or debian 10+ folks.