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

Tener problemas en un sitio web o incluso en la instalación local de un sitio web puede ser estresante. Después de todo,Problemas de rendimiento del sitioLos errores pueden provocar que el sitio se quede fuera de servicio, lo que puede significar pérdida de tráfico, oportunidades 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?

EnLocalHay un enfoque multifacético disponible para la depuración. Aquí, analizaremos las opciones de depuración predeterminadas incluidas con Local, así como las formas de identificar errores y los 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 sobreXdebug, la herramienta de depuraciónPresente en Localy algunas de sus características más destacables.

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

En caso de que no lo sepas, var_dump()es un fragmento útil de PHP que revela rápidamente qué está mal en tu código. Pero la diferencia aquí es que si no tenías Xdebug a mano, el código producido cuando llamasvar_dump() Sería mucho más difícil de leer. Además, tendrías que formatear tu PHP de una manera muy particular incluso al llamarvar_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 por pasos que agiliza el proceso de depuración, especialmente para problemas más grandes. El depurador por 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.

Reproductor de video00:0000:0000:45Utilice las teclas de flecha arriba/abajo para aumentar o disminuir el volumen.

Y lo mejor es que Xdebug está habilitado en Local de manera predeterminada, por lo que ni siquiera tienes que modificar ninguna configuración para comenzar. Solo abre Local y listo.

Cómo depurar un sitio web en local

Puedes depurar un sitio web en Local de varias formas clave. Estos son los pasos principales que analizaremos:

1. Identificación de errores en 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

Vamos a sumergirnos en ello.

1.Identificar errores de la consola del navegador

El primer paso para depurar es utilizar la consola del navegador, que es parte de todoherramientas para desarrolladores de navegadoresEsto le permite detectar errores en páginas web sin necesidad de herramientas especiales. Simplemente inicie Local, acceda a la página en cuestión con el navegador que prefiera y use la consola para detectar errores. A continuación, se detalla cómo acceder a la consola del navegador en varios navegadores.

Si estás usando Chrome…

1. Abra DevTools yendo aMás herramientas Herramientas para desarrolladoresmientras está en el menú del navegador Chrome. Alternativamente, haga clic enCtrl/Cmd+Mayús+I.
2. Haga clic en elConsolapestaña.
3. Si hay algún error, debería ser visible ahora. Si no es así, vuelva a cargar la página web para generarlo.
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 para desarrolladores del navegador yendo aMás herramientas Herramientas para desarrolladores webmientras esté en el menú de Firefox.Ctrl/Cmd+Mayús+IFunciona aquí también.
2. Haga clic en elConsola pestaña. Alternativamente, también puedes acceder a la consola directamente a través deMás herramientas Consola del navegador.
3. Ahora debería ser visible cualquier error. Si no es así, vuelva a cargar la página.

Si estás usando Safari…

1. Active las herramientas para desarrolladores yendo aPreferencias Avanzadasmientras esté en el menú Safari.Opción+Cmd+IEs tu amigo aquí.
2. Marque la casilla junto aMostrar el menú Desarrollo en la barra de menúLuego, cierre el cuadro de diálogo.
3. Hacer clicDesarrollar Mostrar consola de errores. El mismo trato que el anterior.

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

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

También puedes identificar y reparar problemas de sitios web directamente en WordPress. De hecho,Monitor de consultasEl complemento es una opción fantástica para depurar y para identificar problemas de rendimiento, en particular. Es un complemento útil con las herramientas de depuración local integradas y es especialmente útil para detectar problemas con complementos y temas de terceros.

Puedes instalar el complemento como cualquier otro. Simplemente ve aComplementos Agregar nuevoy búsquelo por nombre. Encuéntrelo en la lista y haga clicInstalar ahora, entoncesActivaruna vez que se haya descargado.

Lo que Query Monitor puede decirle

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

Al pasar el cursor sobre él, se mostrará una lista desplegable de herramientas y opciones de Query Monitor. Al seleccionar cualquiera de ellas, se abrirá un menú en la parte inferior donde podrá 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 determinado.
• Tiempo de generación de página.Le muestra la cantidad de tiempo que tarda una página en generarse.
• Tiempo de consulta de 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, de forma muy similar a lo que hace Xdebug. Sin embargo, sus esfuerzos se centran en temas y complementos de terceros. Lo conveniente aquí es que si hay errores, aparecerá una nueva pestaña dentro de la herramienta con el nombre apropiadoErrores de PHPque 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 de error específico o el aviso.

Esto es realmente útil para sitios web que ya están activos o en la última etapa de pruebas. Sin embargo, si todavía estás en la etapa de desarrollo local, usar Xdebug en Local será tu mejor opción.

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

En Local, puedes usar Xdebug de distintas maneras para realizar la depuración de sitios locales. Para obtener más por tu dinero, por así decirlo, puedes agregar el poder de VS Code a la ecuación.

VS Code es un software de código abiertoeditor de códigoCon herramientas ampliadas y una interfaz de usuario más intuitiva, el proceso de depuración línea por línea resulta mucho más intuitivo y agradable a la vista.

De hecho, puedes conectar VS Code al depurador de pasos de Xdebug para lograr un gran efecto. Aquí te mostramos cómo configurarlo para usarlo dentro de Local:

1. DescargarCódigo VSe instálelo según las instrucciones del desarrollador.
2. Descargue e instale una extensión de depuración de PHP. Localdocumentaciónrecomienda elDepuración de PHPextensión para esta tarea.
3. En Local, haga clic enComplementos Xdebug + VS Code.
4. Hacer clicInstalar complemento.
5. Una vez hecho esto, pulsaHabilitar y reiniciar.
6. Abra un sitio en Local y luego haga clic en elUtilidadespestaña.
7. Hacer clicAgregar configuración de ejecución a VS Code.
8. Se iniciará VS Code y luego podrás comenzar el proceso de depuración.

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

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

Otra opción es usar PhpStorm con Xdebug. Puedes agregarlo a Local mediante un complemento y funcionará junto con el depurador de pasos de Xdebug. La instalación y configuración es muy similar al proceso descrito anteriormente para VS Code. Para usarlo, realiza lo siguiente:siguientes pasos:

1. Descargar e instalarTormenta de Php.
2. En Local, haga clic enComplementos Xdebug + PhpStorm.
3. Hacer clicInstalar complemento.
4. De nuevo,Habilitar y reiniciardespués de que esté hecho.
5. Abra cualquier sitio en Local y haga clic en elUtilidades pestaña.
6. Hacer clicAgregar 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 ocurra el punto de interrupción.
8. Hacer clicJugarpara iniciar el proceso de depuración.

Si desea más orientación durante el proceso de depuración, la depuración por pasos es siempre una opción.

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

Depuración por pasoses una herramienta muy útil y parte de Xdebug que básicamente te guía durante el proceso de depuración. Funciona con VS Code y PhpStorm (así como con muchos otros IDE y editores de texto) para brindar herramientas, pasos y protocolos de depuración detallados y fáciles de seguir.

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

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

La depuración local es más sencilla

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 listo. Por supuesto, deberá realizar las correcciones de errores reales para que su sitio web esté en óptimas condiciones. 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 tus herramientas preferidas para depurar en Local? Nos encantaría conocer tus comentarios a continuación.