Xdebug Visual Studio Code

The following instructions should get you up and running with the XDebug in Visual Studio Code when using the Laradock PHP development environment for Docker.

Install Xdebug Visual Studio Code
Xdebug Visual Studio Code
Visual Studio Code Attach Debugger

The 'Listen for XDebug' configuration in launch.json is used to debug a script that was started from a browser session: (i) set your breakpoints in VSCode, (ii) start debugging with 'Listen for XDebug' configuration, (iii) start the scripts by initiating a request i the browser, (iv) observe VSCode if a breakpoint is triggered while the request is processed. Debugging is really important in any language. VSCode is an excellent editor.I decided to see how debugging works in VSCode on PHP language. And it turns out.

Download xdebug here: sure that you choose your version of PHPSettings for php.ini file:xdebugzendextension=' locati. The default value is 9000 (For Xdebug 3 it's 9003) and it is usually enough just to leave it as it is. Note: nginx server using FastCGI may block port 9000 by default. Change Xdebug port to 9001 both in php.ini and in Visual Studio settings. Note that restarting nginx will not reload php.ini! Debugging is a core feature of Visual Studio Code. In this tutorial, we will show you how to run and debug a program in VS Code. We’ll take a tour of the Run View, explore some debugging features, and end by setting a breakpoint. Tip: To use the debugging features demonstrated in this video for Node.js, you will need to first install Node.js.

Step 1. Enable Xdebug in the Laradock .env file

Edit the .env file in your laradock folder and set both of these settings to true.

Step 2. Retrieve the host IP

We’ll need to tell Xdebug the IP address of the remote host. From your laradock folder, type:

The response should look something like this:

From this, I can see my local IP address is: 129.168.1.129.

Step 3. Configure xdebug

Modify the php-fpm/xdebug.ini file in your Laradock folder with the following contents. Replace the IP address for the xdebug.remote_host setting with the IP address from step 2.

Modify the workspace/xdebug.ini file in your Laradock folder with exact same contents:

Step 4. Rebuild the PHP-FPM Container

Step 5. Restart your Laradock environment

Step 6. Install the PHP Debug Extension in Visual Studio Code

Creative cloud 2015 for mac. Add the php-debug extension by Felix Becker to your project.

Step 7. Add debug configuration to Visual Studio Code

In your VS Code project, add a .vscode/launch.json with these contents:

In the pathMappings section, replace “/Users/shawnhooper/work/project1” with the path where VS Code will find your project.

In order to use Xdebug, the first thing we’ll have to do is start the service in the PHP-FPM container.

From the laradock folder, run:

You should see a result like this come back, showing that Xdebug is enable:

In VSCode, set a breakpoint on where you’d like the debugging to start running. You can do this either by clicking to the left of the line number in the editor, or by pressing F9 to toggle the breakpoint on and/off.

To enable the listener in VS Code, click on the green “run” icon in the sidebar to display the debugger.

and then click on the Run button in the debugger’s sidebar.

Or just press F5 to start the debugger. You should see the listener enabled in the VS Code footer. The footer will turn orange, and show “XDebug listening to Laradock”

Now, if I navigate in my browser to the file containing the breakpoint, the debugger will stop when it hits it.

Install Xdebug Visual Studio Code

If you are a PHP developer who used to work with Microsoft technologies in the past, you would undoubtedly miss its Visual Studio editor with full debug support: F5 to run the debugger, F6 to step next, F7 to step into, F8 to step out, etc. It works like magic.

Do you miss it? I certainly do.

The good news is that there are a few open-source tools out there that can give PHP developers the same debugging experience.

A Brief History of PHP Debugging

Whenever we talk about PHP debugging, one thing always comes to mind: XDebug. I would not dream of coding anything in PHP without it. But it was a different story before.

Remember PHP var_dump()? It was the only tool of the trade when debugging PHP back in the day.

The first thing was to turn on display_errors. We would do this either in the php.ini file or at the beginning of the code:

We would also have indeed relied on our handy dandy echo command to watch variable values and then painstakingly remove them once done. It was pretty much how all PHP applications were troubleshot back then.

Enter XDebug.

XDebug is a PHP extension that provides debugging capabilities for programming IDE. It was first released in May 2002 by Derick Rethans. XDebug has become the de facto standard as it is the only debugging tool in existence for PHP. Thank you, Derick! My life has never been the same.

What can Xdebug do

Set/Remove breakpoints
Perform an automatic stack trace
Set a manual variable watch
Enable function call logging
Enable profiling
Allow remote debugging

How to Install XDebug

XDebug is essentially a file (an .so file on Linux and a .dll on Windows) that you must install on your server.

Before the install, I suggest starting with the XDebug installation wizard. It does an outstanding job of probing your PHP environment, then gives you tailored installation instructions.

To configure PHP to use XDebug, add the following in your php.ini.

Finally, to enable debugging, enter the following in your php.ini

Install XDebug From Your Mac

If you are on a Mac, the preferred technique is to use PECL command

I’m going to share a little trick I use to install XDebug on a Mac. Here’s the one-liner in OSX that enables the PHP XDebug extension.

This command does the following :

Finds the native Xdebug extension that comes with Xcode
Asks PHP which config file is loaded
Adds the Xdebug extension path to the config file
Restarts Apache.

Read the official XDebug installation guide: https://xdebug.org/docs/install

Finally, verify the installation by checking XDebug section in phpinfo() output.

XDebug in Visual Studio Code

Visual Studio Code is a free, open-source, cross-platform lightweight code editor. It is available for Windows, Linux, and OS X. You can download it here.

Now that we should have already installed XDebug on our server, we need to get the debug client installed in VS Code to set the breakpoints in the code that will be hit when PHP is processing the request. To do this, we need to get the “PHP Debug” Extension from VS Code. An easier way is to go to the Extensions tab, search for “PHP Debug”, and then click Install.

Once the installation is finished, be sure to restart VS Code before you start using it.

To add a breakpoint, click to the left of the line number once you have selected a line, press F9.

Then click the Debug icon on the left-side menu.

Be sure the “Listen to XDebug” option in the configuration dropdown is selected.

Finally, click the green “Play” icon or press F5 on the keyboard to start the debugging.

Now, open your web browser and visit the webpage where we set the breakpoints earlier. If everything has been set up correctly, as soon as the program hits the first breakpoint, you should be instantly switched back to VS Code.

Now you can use the buttons in the debug bar to continue with debugging. Learn to use keyboard shortcuts! The highlighted yellow line indicates where execution stopped in our PHP script.

Pay close attention to the VARIABLES and CALL STACK on the left-hand pane. They are like having a dynamic PHP var_dump() command at your disposal.

For the demo, I set a single breakpoint on the following line,

In reality, you can set as many breakpoints as you need. To STEP OVER to the next breakpoint, press F10 on your keyboard; to STEP INTO the current line breakpoint, press F11.

Final Thoughts