VSCode

Estos últimos meses al actualizar versiones de PHP me ocurría que el debug dejaba de funcionar en VSCode y hasta ahora no he podido trastear con ello para ver que estaba ocurriendo.

Precisamente, mirando el docker-compose de este blog al cual si funciona bien el Xdebug lo que vi es que en el docker-compose.override.yml lo tenía diferente respecto al que tengo en algunos proyectos donde no me fuciona.

Lo que he probado y funciona es añadir este código:

El otro día vi en un vídeo de programación el símbolo ≠ y me dije "a cómo lo puedo poner en VSCode", en realidad el símbolo ≠ se corresponde o con != o con !==, así que me puse a buscar como tenerlo en VSCode, se ve mejor con el símbolo aunque hayas escrito realmente !=.

Se tiene que instalar la fuente Fire Code.

sudo apt update && \
sudo apt install fonts-firacode

Una vez instalada en el archivo settings.json tenemos que añadir las siguientes líneas de código:

"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true,
"editor.fontWeight": "500" // Regular,

Y el código se visualizará en VSCode de la siguiente manera. 

Image

Con las últimas versiones de PHP 7.4 se ha cambiado de versión también en Xdebug, ahora las últimas versiones de php 7.4 y 8.x tiene Xdebug 3.x, y trae varios cambios respecto a la versión 2.x, vamos a ver como configurar el contenedor de Wodby 4 Drupal y el editor VSCode para poder depurar nuestro código.

Lo primero, en el archivo docker-compose.override.yml vamos a descomentar las siguientes opciones:

  php:
    environment:
#      SSH_AUTH_SOCK: /ssh-agent
#      # Read instructions at https://wodby.com/docs/stacks/php/local/#xdebug
      PHP_XDEBUG: 1
      PHP_XDEBUG_MODE: debug
#      PHP_IDE_CONFIG: serverName=my-ide
#      PHP_XDEBUG_IDEKEY: "my-ide"
#      PHP_XDEBUG_CLIENT_HOST: host.docker.internal # Docker 18.03+ Mac/Win
      PHP_XDEBUG_CLIENT_HOST: 172.17.0.1 # Linux
#      PHP_XDEBUG_CLIENT_HOST: 10.254.254.254 # macOS, Docker < 18.03
#      PHP_XDEBUG_CLIENT_HOST: 10.0.75.1 # Windows, Docker < 18.03
#      PHP_XDEBUG_LOG: /tmp/php-xdebug.log
      PHP_XDEBUG_REMOTE_AUTOSTART: 1
      PHP_XDEBUG_DEFAULT_ENABLE: 1
      PHP_XDEBUG_REMOTE_CONNECT_BACK: 0

Tenemos que regenerar el contenidor ejecutando: 

docker-compose up --build

Una vez configurado el contenedor tenemos que instalar el plugin de Xdebug para VScode, existen varios plugins de Xdebug para VSCode, yo he instado el creado por Felix Becker, tiene más de 4 millones de descargas, al instalarlo aparece en la barra de iconos de VSCode de la izquierda el icono de play/triangulo y un escarabajo..

Image

Al pinchar en el icono de Xdebug muestra el siguiente texto:

Image

Pincha en el enlace create a launch.json file, del listado de opciones del desplegable que se muestra seleccionamos PHP, y nos creará un archivo con el siguiente texto: