19.2.23

XDebug en WSL2 (Ubuntu): Configurandolo y depurando desde Visual Studio Code en el Windows anfitrión

 

Para este proceso lo primero es que tienes que tener instalado Apache y PHP en Ubuntu WSL. Si no lo tienes instalado... complicado.

Se presupone que el proyecto en sí lo tienes directamente almacenado en WSL y que lo editas con Visual Studio Code desde Windows usando una ruta como la siguiente (vsc es el comando de visual studio code):

vsc \\wsl$\ubuntu\var\www\html\proyecto

La carpeta de Windows (anfitrión): \\wsl$\ubuntu\var\www\html\proyecto; equivale a /var/www/html/proyecto en Ubuntu/WSL2. Ten en cuenta que las rutas Windows y Ubuntu/WSL2 son diferentes.

Pasos a Realizar en Ubuntu/WSL2

1) Instalar xdebug en Ubuntu/WSL2.

  apt install php-xdebug

2) Localiza la IP del Windows anfitrión en la red privada:

 

3) [a realizar en WSL] Usando la IP anterior, averigua el nombre de la máquina anfitrión Windows usando el comando HOST :

4) [a realizar en WSL] Configurar xdebug en Ubuntu/WSL. Ve a la carpeta /etc/php/8.1/mods-available (esta carpeta puede cambiar en función de la versión de PHP), y edita xdebug.ini:

 

5) [a realizar en WSL] Reinicia apache2

6) [a realizar en WSL] Comprueba la configuración cargando un script php que contenga:

<?php
xdebug_info();

Tendría que salir algo así:

Donde aparezca también el nombre de la máquina anfitriona como máquina cliente:

Pasos a Realizar en Windows/Visual Studio Code

En VSC tendrás que instalar la extensión PHP Debug de Xdebug:

Nombre: PHP Debug
ID: xdebug.php-debug
Descripción: Debug support for PHP with Xdebug
Versión: 1.31.1
Editor: Xdebug
Vínculo de VS Marketplace: https://marketplace.visualstudio.com/items?itemName=xdebug.php-debug

Después tendrás que añadir una configuración de depuración en launch.json (en el proyecto) o settings.json (a nivel global) para que se inicie el depurador conectando con WSL:

Aquí la parte más enrevesada es la del pathMappings y es necesario ponerla bien porque las rutas en WSL son diferentes a las rutas en Windows. 

La configuración anterior parte de la base de que el proyecto lo tienes en la máquina Ubuntu/WSL2 y que desde Windows se accedería así:

\\wsl$\ubuntu\var\www\html\proyecto

La ruta anterior sería el ${workspaceFolder}. El ${workspaceFolder}en Ubuntu/WSL2 equivaldría a:

/var/www/html/proyecto

En la ruta anterior ${workspaceFolderBasename} será el nombre de la carpeta del proyecto sin ruta absoluta.

Si tus rutas a proyecto son diferentes entonces debería agregar o modificar el pathMappings.