Instalación de Xdebug, Parte 2: El IDE

Ahora que Xdebug está instalado con su instalación local de PHP, es hora de conectarlo al IDE. Esto nos brinda todas las ventajas que Xdebug tiene para ofrecer.

Es decir, nos permite:

• establecer puntos de interrupción,
• paso a través de nuestro código,
• y observa las variables

Todo el tiempo el programa se está ejecutando. Esto significa que mientras se procesa una página, podemos establecer puntos en nuestra base de código donde podemos ver qué está haciendo el servidor con nuestro código.

Entonces, claro, aunque se llama depuración para eliminar errores, también puede dar una idea de cómo se ejecuta una aplicación, tema o complemento basado en WordPress y puede ayudarnos a comprender mejor el núcleo de WordPress.

Instalación de Xdebug en el código de Visual Studio

En este punto, debe tener el siguiente entorno configurado en su máquina local:

• Valet (que incluye Nginx y MySQL y herramientas relacionadas )
• WordPress
• código de estudio visual
• xdebug

Las tareas restantes para todo lo anterior implican vincular Xdebug con Visual Studio Code para obtener una representación literal de cómo funciona WordPress (y, por lo tanto, nuestro trabajo), qué está haciendo, etc. siempre que se esté ejecutando en el navegador.

Dicho esto, comencemos.

1 Instalación de las extensiones necesarias

Primero, asegurémonos de que la Extensión de depuración de PHP esté instalada en Visual Studio Code. Desde el menú Extensiones en la barra lateral del IDE, busque PHP Debug, y debería ver una pantalla como la siguiente.

Si la extensión aún no está instalada, continúe e instálela. Es posible que deba reiniciar Visual Studio Code para que la nueva extensión surta efecto.

A partir de aquí, hay algunos ajustes de configuración adicionales que debemos verificar antes de intentar depurar cualquier código.

2 Configuración de Xdebug (¡aún más!)

Recordemos de la publicación anterior que necesitábamos incluir Xdebug en nuestro archivo php.ini . Específicamente, tuvimos que agregar la siguiente línea de código para habilitar Xdebug:

zend_extension="/usr/local/lib/php/pecl/20160303/xdebug.so"

Ahora tenemos que hacer un poco más de trabajo.

1. necesitaremos agregar una línea de configuración al archivo php.ini al que se hace referencia en la última publicación ,
2. necesitaremos configurar un script de demostración para asegurarnos de que haya una sección Xdebug adecuada,
3. necesitaremos configurar Visual Studio Code

Afortunadamente, todo lo anterior son tareas relativamente rápidas. Primero, la línea de configuración que querrá agregar a su archivo es la siguiente:

[XDebug]
xdebug.remote_enable = 1
xdebug.remote_autostart = 1

A continuación, configure un script de demostración y conéctelo con Valet. Puede hacer esto fácilmente creando un directorio en su escritorio, creando algo como test.php y luego agregando phpinfo(); al archivo

Después de eso, vincule el directorio y reinicie Valet. Nombré mi ejemplo de directorio y dejé caer un archivo test.php en el directorio.

Permitiendo que todo esté configurado correctamente, debería poder cargar el archivo en su navegador y ver algo como lo siguiente:

Y ahora necesitamos configurar Xdebug. Entonces, suponiendo que todo lo anterior haya ido bien y que las extensiones estén correctamente instaladas y funcionando, trabajar con Visual Studio Code debería ser fácil.

Naturalmente, necesitaremos un script de demostración que podamos probar, así que he escrito algo que es trivial pero que le dará una idea de qué esperar al establecer puntos de interrupción y qué no.

<?php

// First, set a sample name.
$exampleName = 'alice';
echo $exampleName;

// Next, change the name and display it.
if ('alice' === $exampleName) {
    $exampleName = 'bob';
}
echo $exampleName;

Ahora dirijamos nuestra atención al IDE. En Visual Studio Code, haga clic en el icono Depurar que está justo encima del icono de Extensiones y justo debajo del icono de Control de código fuente .

En la barra lateral en la parte superior, notará que hay un botón de reproducción. Al lado hay una lista desplegable. Puede leer "Sin configuración". Si ese es el caso, y voy a suponer que lo es, hay algunos pasos muy específicos que deberá seguir para asegurarse de que la depuración funcione correctamente.

1 Abra el directorio del script

Deberá asegurarse de estar en el directorio del script en Visual Studio Code.

Es decir, no es suficiente asegurarse de que solo tiene un archivo abierto. Visual Studio Code necesita saber desde qué directorio está trabajando (porque crea un directorio .vscode oculto dentro del directorio principal).

2 Crear la configuración de lanzamiento

La configuración de inicio predeterminada debería funcionar de inmediato, pero se basa en el paso anterior.

Una vez que haya abierto un directorio (en mi caso, el que contiene test.php) en Visual Studio Code, inicie la paleta de comandos (puede hacerlo a través de un acceso directo que varía de un sistema operativo a otro o usando el menú Ayuda y luego seleccione Paleta de comandos).

Una vez que aparezca, ingrese > launch.json y le dará la opción de ver el archivo launch.json. Fuera de la caja, debería verse así :

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "port": 9000
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 9000
        }
    ]
}

En este punto, el menú Depurar debería tener algo como Iniciar secuencia de comandos actualmente abierta junto al icono de reproducción. Si no es así, te dará la opción de seleccionar algo como PHP (ya que tenemos la extensión instalada).

Si es así, seleccione esa opción.

3 Establecer algunos puntos de interrupción

Ahora es el momento de ver el depurador en acción. En este punto, continúe e inicie una ventana del navegador con su script de prueba.

El mio es sencillo:

Después de eso, ingrese a su IDE y luego haga clic en el panel izquierdo a la izquierda del número de línea. Esto establecerá algunos puntos de interrupción.

Aquí hay un ejemplo:

Ahora haga clic en el botón Reproducir para el depurador. Inmediatamente, debería notar que la barra de estado se vuelve naranja y algunos controles de depuración (para Continuar, Entrar, Salir, Reiniciar y Detener). No estamos interesados ​​en estos en este momento, ya que los analizaremos más a fondo en la próxima publicación.

Observe también que su panel izquierdo tiene información sobre variables, relojes, etc. Si ha establecido puntos de interrupción en sus variables locales, notará que $exampleName está resaltado pero probablemente no inicializado.

Haga clic en el botón Reproducir en los nuevos controles que han aparecido y debería ejecutarse hasta el siguiente punto de interrupción.

La línea ahora se resaltará y, en el panel de depuración, se le dará un valor a $exampleName . En mi caso, esta es Alice.

Puedes seguir jugando con esto tanto como quieras para tener una idea de cómo funciona el depurador.

La próxima vez, capturas de pantalla

La depuración es poderosa, pero puede ser desalentadora en muchos sentidos. A partir de la próxima publicación, comenzaré a compartir algunos screencasts que explican cómo:

• depurar funciones y variables,
• cambiar valores sobre la marcha,
• trabajar con la consola de depuración,
• y más.

Estos tomarán un poco más de tiempo porque serán videos que describen cómo hacer esto, pero el beneficio debería ser grande.

Si aún no ha tenido la oportunidad de ponerse al día con todo el contenido de esta serie, se lo recomiendo encarecidamente.

📣 Una nota para las ventajas de los miembros

Tenga en cuenta, sin embargo, que antes de la próxima publicación sobre screencasts y la próxima entrega de esta serie, tengo algunos anuncios que hacer específicamente para los miembros del sitio que incluyen descuentos en software basado en WordPress.

Cubriré más sobre eso la próxima semana.