antfroger/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Configuring xdebug to work with Windows 10 (WSL2), Docker and VS Code

Configuring your dev environment to be able to use xdebug when you're working on Windows 10 (with WSL2) and Docker with VS Code can be (a bit) tricky.

This is a quick reminder of how I've done that.
Configuring the environment


Install and configure xdebug in Docker
# Install xdebug according to the Docker image you're using
RUN pecl install xdebug
COPY xdebug.ini  $PHP_INI_DIR/conf.d/
(cf. the xdebug.ini file in this gist)


Setup VS Code
PHP Debug is the extension to debug PHP in VS Code.

Once installed and your project opened, create the configuration file .vscode/lauch.json

(cf. the lauch.json file in this gist)
Two impostant things here :

The port must match the one defined in xdebug.ini
pathMappings must associate the path of your app on Docker and the path of your VSCode project

(do not use an absolute or relative path. You must use the variables VSCode provides)


Configure Windows Defender Firewall
Even after starting debugging, breakpoints might never be hitten. That's because of Windows Defender Firewall.

It treats WSL as a public network by default and blocks access. This can be fixed by adding a rule. Just run (with Powershell):
New-NetFirewallRule -DisplayName "WSL" -Direction Inbound  -InterfaceAlias "vEthernet (WSL)"  -Action Allow
More about this issue here


Debug a request

Now that your environment is set up, it's time to debug!


Run a debugging session
In the left side panel of VSCode, select the "Debug view" (or just press Ctrl + Shift + D), make sure that the chosen configuration is the one you added in the file lauch.json. Then click on the little green triangle titled "Start debugging".


Add breakpoints wherever you want to debug your app


Refresh your browser!


Optional:

You can add Xdebug helper to debug in Chrome.
Yeah!

You're ready to create an awesone app!
Want to know more on debugging with xdebug?

Let's read the 'Step Debugging' doc

  
## lauch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            // I changed the port, by default xdebug 3 uses 9003
            "port": 5902,
            "pathMappings": {
                "/var/www/my-app": "${workspaceFolder}"
            },
            "hostname": "localhost"
        },
    ]
}

## xdebug.ini
zend_extension=xdebug

xdebug.mode=debug,develop
xdebug.client_host=host.docker.internal
xdebug.client_port=5902 #same port as in launch.json

#Uncomment this line to enable xdebug for each request
#xdebug.start_with_request=yes
	{
	"version": "0.2.0",
	"configurations": [
	{
	"name": "Listen for XDebug",
	"type": "php",
	"request": "launch",
	// I changed the port, by default xdebug 3 uses 9003
	"port": 5902,
	"pathMappings": {
	"/var/www/my-app": "${workspaceFolder}"
	},
	"hostname": "localhost"
	},
	]
	}
	zend_extension=xdebug

	xdebug.mode=debug,develop
	xdebug.client_host=host.docker.internal
	xdebug.client_port=5902 #same port as in launch.json

	#Uncomment this line to enable xdebug for each request
	#xdebug.start_with_request=yes