Configure Remote Debugging With Xdebug On Visual Studio Code Using Docker For Mac

Here are step by step how to enable PHP debugging on Visual Studio Code, this feature is very useful to figure out what’s currently happen on the script execution.

Debugging With Visual Studio Code

Dockerfile

In this example I’m going to build my own image from php:7.1-apache Docker image and enable xdebug extension.

The php.ini file only contain xdebug module configuration:

[xdebug]
xdebug.remote_enable=1
xdebug.remote_host=docker.for.mac.localhost
xdebug.remote_connect_back=0
xdebug.remote_autostart=1
xdebug.remote_connect_back=0
xdebug.remote_handler=dbgp
xdebug.max_nesting_level=250

Docker Compose

My development environment has dependency to mariadb so I’ll spin up my container using docker-compose.

To run both container (web and mariadb) I’m using the following command:

docker-compose -f docker-compose-xdebug.yml up

Visual Studio Code PHP Debug Plugin

Since we are using Visual Studio Code then we must install PHP Debug plugin. If you are still new with Visual Studio Code, you can refer to this link on how to install a plugin.

Launch Configuration

Now we need to setup launch configuration file in Visual Studio Code. Go to debug menu on left sidebar then click config button.

A window will coming up and open the launch.json file, add these lines into it:

...
"configurations":[
{
  "name": "Listen for XDebug",
  "type": "php",
  "request": "launch",
  "log": true,
  "pathMappings": {
  "/var/www/html": "/Users/afrimadonidinata/Code/php/my_project"
  }
}
...

Start Debugging

Here are steps to debugging:

1. Open the file you want to debug and place breakpoint to specific line
2. Click start debug button (green right arrow)
3. Call the php script from browser or CLI