Depuración en local (por Flywheel): una guía para principiantes

Que surjan problemas en un sitio web o incluso dentro de la instalación local de un sitio web puede ser estresante. Después de todo, los problemas de rendimiento del sitio o los errores pueden provocar un tiempo de inactividad del sitio. Y el tiempo de inactividad del sitio puede significar pérdida de tráfico, oportunidades perdidas e incluso pérdida de ingresos.

Afortunadamente, existen numerosas soluciones de depuración para identificar y reparar problemas del sitio. Pero, ¿cómo puede saber qué funcionará mejor para su situación?

En Local, hay un enfoque múltiple disponible para la depuración. Aquí, analizaremos las opciones de depuración predeterminadas incluidas con Local, así como formas de identificar errores y complementos adicionales que puede usar para detectar y solucionar problemas de manera más rápida y eficiente.

¿Qué es Xdebug en local?

Antes de que podamos discutir cómo depurar en Local, primero debemos hablar sobre Xdebug, la herramienta de depuración presente en Local y algunas de sus características más notables.

Xdebug es en realidad una extensión de PHP que simplifica el proceso de depuración. Principalmente, hace que el formato de la función var_dump () sea más limpio y agrega más advertencias y avisos sobre errores específicos. De esa manera, hace que la experiencia del usuario sea más intuitiva.

En caso de que no lo sepa, var_dump() es una parte útil de PHP que revela rápidamente qué es lo que está mal en su código. Pero la distinción aquí es que si no tenía Xdebug a mano, el código producido cuando llama a var_dump() sería mucho más difícil de leer. Además, tendrías que formatear tu PHP de una manera muy particular incluso cuando llames a var_dump() en primer lugar.

Xdebug está disponible en Local porque ofrece una mayor profundidad de información sobre los errores cuando surgen. También viene con un depurador de pasos que agiliza el proceso de depuración, especialmente para problemas más grandes. El depurador de pasos funciona al permitirle evaluar su código paso a paso en puntos de interrupción específicos. Esto le permite evaluar el código en secciones más pequeñas y localizar problemas más fácilmente.

Y la mejor parte es que Xdebug está habilitado en Local de forma predeterminada, por lo que ni siquiera tiene que modificar ninguna configuración para comenzar. Simplemente abra Local y listo.

Cómo depurar un sitio web en local

Puede depurar un sitio web en Local de varias maneras clave. Estos son los pasos principales que discutiremos:

1. Identificación de errores de la consola del navegador
2. Uso del monitor de consultas
3. A través de Xdebug y VS Code
4. Con Xdebug y PhpStorm
5. Uso de Xdebug para la depuración por pasos

Sumerjámonos.

1. Identificar los errores de la consola del navegador

El primer paso en la depuración es usar la consola del navegador, que forma parte de todas las herramientas de desarrollo del navegador. Esto le permite detectar errores en las páginas web sin necesidad de herramientas especiales. Simplemente inicie Local, acceda a la página en cuestión con el navegador de su elección y use la consola para detectar errores. Lo que sigue es un desglose de cómo acceder a la consola del navegador en varios navegadores.

Si está utilizando Chrome...

1. Abra DevTools yendo a Más herramientas > Herramientas para desarrolladores mientras se encuentra en el menú del navegador Chrome. Alternativamente, presione Ctrl/Cmd+Shift+I .
2. Haga clic en la pestaña Consola .
3. Si hay algún error presente, debería ser visible ahora. Si no, recarga la página web para generarlos.
4. Tome nota del tipo de error, dónde se encuentra y su número de línea dentro de la consola del navegador.

Si estás usando Firefox…

1. Abra las herramientas de desarrollo del navegador yendo a Más herramientas > Herramientas de desarrollo web en el menú de Firefox. Ctrl/Cmd+Shift+I también funciona aquí.
2. Haga clic en la consola pestaña. Alternativamente, también puede acceder a la consola directamente a través de Más herramientas > Consola del navegador .
3. Cualquier error ahora debería ser visible. Si no, recarga la página.

Si está utilizando Safari...

1. Active las Herramientas para desarrolladores yendo a Preferencias > Avanzado en el menú Safari. Option+Cmd+I es tu amigo aquí.
2. Marque la casilla junto a Mostrar el menú Desarrollar en la barra de menú . Luego, cierre el cuadro de diálogo.
3. Haga clic en Desarrollar > Mostrar consola de errores . Mismo trato que el anterior.

Armado con esta información, puede volver al sistema de archivos configurado en Local y encontrar el código específico que causa los problemas y luego implementar una solución. Utilice el botón Ir a la carpeta del sitio para acceder a la ubicación de sus sitios web locales.

2. Use Query Monitor para solucionar problemas de rendimiento del sitio

También puede identificar y reparar problemas del sitio web directamente en WordPress. De hecho, el complemento Query Monitor es una opción fantástica para depurar e identificar problemas de rendimiento, específicamente. Esto lo convierte en un par útil con las herramientas de depuración locales integradas y es especialmente útil para detectar problemas de complementos y temas de terceros.

Puede instalar el complemento como cualquier otro. Simplemente vaya a Complementos > Agregar nuevo y búsquelo por nombre. Encuéntrelo en la lista y haga clic en Instalar ahora , luego en Activar una vez que se haya descargado.

Qué puede decirle Query Monitor

Después de instalar el complemento, debería ver una nueva opción de menú en la parte superior del panel de control de WordPress.

Al pasar el cursor sobre él, aparecerá una lista desplegable de herramientas y opciones de Query Monitor. Al elegir cualquiera de ellos, se abrirá un menú en la parte inferior donde puede obtener más detalles sobre la página actual.

Entre otras cosas, Query Monitor le brindará una descripción general del rendimiento de su página, que incluye:

• Uso máximo de memoria. Esta herramienta le muestra cuánta memoria se utiliza para generar una página en un momento dado.
• Tiempo de generación de página. Le muestra la cantidad de tiempo que tarda en generarse una página.
• Tiempo de consulta de la base de datos. Por último, esta herramienta le muestra cuánto tiempo tardó la base de datos en responder a las solicitudes de temas o complementos.

Más allá de los problemas de rendimiento, este complemento también puede identificar errores y avisos de PHP, al igual que lo hace Xdebug. Sin embargo, sus esfuerzos se centran en temas y complementos de terceros. Lo que es conveniente aquí es que si hay errores presentes, aparecerá una nueva pestaña dentro de la herramienta correctamente llamada Errores de PHP que enumerará cada error con su amenaza de seguridad. También le indicará la línea de código donde aparece el error y el código o aviso de error específico.

Ahora bien, esto es realmente útil para los sitios web que ya están activos o en las últimas etapas de prueba. Sin embargo, si todavía se encuentra en la etapa de desarrollo local, usar Xdebug en Local será su mejor opción.

3. Configuración de Xdebug y VS Code para la depuración

De vuelta en Local, puede utilizar Xdebug de varias maneras para realizar la depuración del sitio local. Para obtener más por su dinero, por así decirlo, puede agregar el poder de VS Code a la ecuación.

VS Code es un editor de código de código abierto con herramientas ampliadas y una interfaz de usuario más intuitiva. Hace que el proceso de depuración línea por línea sea mucho más intuitivo y agradable a la vista.

En realidad, puede conectar VS Code al depurador de pasos Xdebug con gran efecto. Aquí se explica cómo configurarlo para su uso dentro de Local:

1. Descargue VS Code e instálelo según las instrucciones del desarrollador.
2. Descargue e instale una extensión del depurador de PHP. La documentación de Local recomienda la extensión PHP Debug para esta tarea.
3. En Local, haga clic en Complementos > Xdebug + VS Code .
4. Haga clic en Instalar complemento .
5. Una vez hecho esto, presione Habilitar y reiniciar .
6. Abra un sitio en Local y luego haga clic en la pestaña Utilidades .
7. Haga clic en Agregar configuración de ejecución a VS Code .
8. VS Code se iniciará y podrá iniciar el proceso de depuración.

Si no prefiere VS Code, puede usar otra herramienta de edición para la tarea.

4. Configuración de Xdebug y PhpStorm para la depuración

Otra opción es usar PhpStorm con Xdebug. Puede agregarlo a Local a través de un complemento y funcionará junto con el depurador de pasos Xdebug. La instalación y configuración es muy similar al proceso descrito anteriormente para VS Code. Para usarlo, realice los siguientes pasos:

1. Descargue e instale PhpStorm.
2. En Local, haga clic en Complementos > Xdebug + PhpStorm .
3. Haga clic en Instalar complemento .
4. Nuevamente, habilite y reinicie después de que haya terminado.
5. Abra cualquier sitio en Local y haga clic en Utilidades pestaña.
6. Haga clic en Agregar configuración de ejecución a PhpStorm .
7. Con PhpStorm activo, establezca puntos de interrupción haciendo clic en el canal en la línea de código específica donde desea que se produzca el punto de interrupción.
8. Haga clic en Reproducir para iniciar el proceso de depuración.

Si desea más orientación a través del proceso de depuración, la depuración por pasos es siempre una opción.

5. Uso de Xdebug para la depuración de pasos

Step Debugging es una herramienta súper útil y parte de Xdebug que esencialmente lo ayuda a través del proceso de depuración. Funciona con VS Code y PhpStorm (así como con muchos otros IDE y editores de texto) para proporcionar herramientas, pasos y protocolos de depuración detallados pero fáciles de seguir.

En Local, no tiene que hacer nada para configurar Xdebug; está habilitado automáticamente de forma predeterminada. Aunque hay instrucciones de configuración más complejas si tiene un entorno de prueba complicado (con varios sistemas contribuyendo a la vez), supondremos que solo necesita realizar la depuración, en un sistema, en una instalación de Local por ahora.

Para usar la depuración por pasos, todo lo que necesita hacer es seguir los pasos descritos en las dos secciones anteriores. La función funciona con VS Code o PhpStorm. Una vez que todo esté configurado, establecerá automáticamente puntos de interrupción y reproducirá el código uno por uno. Esto ofrece una forma intuitiva de ejecutar su código, ver los errores y corregirlos a medida que surgen.

Depuración en local simplificada

Como puede ver, la depuración en Local es en realidad un proceso bastante sencillo que requiere una configuración mínima para comenzar. La herramienta de depuración principal ya está presente de forma predeterminada. Todo lo que necesita hacer es configurar su editor de texto o IDE preferido, configurar uno o dos complementos, y ya está todo listo. Por supuesto, deberá realizar las correcciones de errores reales para que su sitio web esté en plena forma. Pero al menos, el proceso de depuración en sí se puede ejecutar con facilidad y con un mínimo de complicaciones.

¿Cuáles son sus herramientas preferidas para depurar en Local? Nos encantaría escuchar sus comentarios en los comentarios a continuación.