516 | Cómo detectar problemas con plugins y temas (modo pro)

En el episodio 516 de WordPress Semanal te enseño a usar una herramienta que ya tienes instalada en tu ordenador para detectar problemas con plugins y temas antes de que te exploten en la cara. Vamos allá. Hola, hola, soy Gonzalo Navarro y Bienvenidos al episodio 516 de WordPress Semanal, el podcast en el que aprendes a crear y gestionar tus propias webs con WordPress en profundidad. Hoy te voy a hablar de la consola del navegador que depende de tu perfil. Te puede sonar más o menos técnico, pero si bien es una ventana que parece solo para programadores, cualquier usuario de WordPress la puede y debe aprovechar. No necesitas saber código, solo necesitas saber dónde mirar y qué significan los mensajes que WordPress deja ahí para, ya digo, los desarrolladores, pero que en esencia están escritos en un lenguaje bastante comprensible. Así que vamos a ver a lo largo de este episodio como tú, independientemente del nivel que tengas, si eres un usuario básico de WordPress, intermedio o avanzado, puedes sacarle provecho. Pero antes, como siempre, novedades y recursos interesantes. Por un lado tenemos el nuevo vídeo de la zona código, donde te enseño a añadir un campo en formato desplegable en el checkout de WooCommerce para que preguntes cómo nos conociste, para que los que estén comprando en tu tienda online puedan decirte de forma opcional u obligatoria, esto lo puedes configurar tú si te conocieron en redes sociales, buscando en Google, recomendación de alguien, lo que tú quieras, porque tú vas a poner las opciones. Y la gracia de este snippet es que solo le va a aparecer a la gente en su primera compra, porque no tiene mucho sentido que alguien que compra de forma recurrente le estés preguntando cómo nos conociste. Además, te va a guardar la información para que tú después, cuando estés en la parte de administración de tu tienda online y te vayas a pedidos, para que ahí veas lo que ha marcado la gente. Como siempre, esto es un vídeo enfocado para gente que no sabe desarrollo. Simplemente te explico cómo copiarlo, cómo puedes modificar estas opciones que te he dicho a tu antojo y cómo y dónde pegarlo para que esto empiece a funcionar sin necesidad, ya digo, de que tengas conocimientos avanzados de nada, ni que instales un plugin que a lo mejor te trae mil funcionalidades cuando tú solo quieres esta pequeña cosita. Así que ya lo tienes en las notas del episodio disponible. Recuerda que si vas a Gonzalo es 516, que es el número de este episodio, vas a tener todo lo que comento en formato texto y los enlaces. Además te voy a dejar ahí en la parte de recursos recomendados un taller gratuito muy relacionado con lo que vamos a ver hoy, donde te enseño a descubrir plugins lentos o que ofrecen mal rendimiento antes si quieras de que los instales o si ya los tienes instalados, cómo inspeccionar en busca de esto, en busca de si es un plugin pues que te va a traer más problemas que otra cosa. Ya digo, es gratuito, pero si eres ya un usuario registrado en la web simplemente tienes que iniciar sesión y podrás verlo, no hace falta que te registres de nuevo, pero ya digo que si lo haces será gratuito. Te voy a dejar también el curso de las Chrome DevTools, es decir, las herramientas para desarrolladores de WordPress, que lo que vamos a hablar hoy es una parte de una parte de todo lo que puedes hacer con estas herramientas, que es básicamente cuando tú abres una cosa que se llama inspeccionar o inspector desde el navegador, en concreto desde Chrome, pero también funciona similar en otros navegadores, pues tienes una serie de herramientas y de opciones que para los que usamos webs son súper valiosas. Y como siempre está enfocado para el usuario medio de WordPress, si sabes código, pues a lo mejor le puedes sacar un poquito más de jugo, pero si no, también es una herramienta muy útil y que recomiendo conocer. Además te dejo el enlace a la newsletter de WordPress semanal o si no puedes ir a gonzalonabarro, es lista y ahí te apuntas cada semana recibes una sección de actualidad con lo más relevante no solo del mundo web, sino también del marketing, del SEO, de la inteligencia artificial. Un poco mi punto de vista sobre esa noticia. Un tema de la semana donde te voy a explicar algo muy útil y al grano que puedas aplicar en tus webs con WordPress y una sección llamada Vida freelance donde te comento cosas que me pasan en mi trabajo del día a día, gestionando clientes o creando contenido en torno a WordPress. Y esto en cuanto a las novedades. Vámonos ahora con el plugin de la semana que se llama Fatal Error Notify y como su nombre indica, este plugin te envía un email cada vez que se produce un error fatal en tu web, y a diferencia de algunos servicios de monitorización que solo te avisan si la web está completamente caída, en este caso detecta errores en cualquier página o proceso. Yo no siempre recomiendo tenerlo, pero hay veces en los que sí que quieres estar muy al tanto de todos estos pequeños fallos que pueden ir ocurriendo y que así estés al tanto antes de que tus visitantes te lo reporten de nuevo, Fatal Error Notify pero te lo dejo en las notas del episodio, Recuerda Gonzalo Navarro es 516. Venga, pues ahora sí, vámonos con el tema central del episodio, cómo detectar problemas con plugins y temas gracias a la consola del navegador. Y lo primero, ¿Qué es esto de la consola y cómo puedes abrirla? Bueno, es simplemente una pestaña dentro de las herramientas de desarrollo que todos los navegadores traen de serie, Chrome, Firefox, Edge, Safari. Todas la incluyen. Y para abrirla pues lo puedes hacer o botón derecho en cualquier sitio de la página y darle a inspeccionar y luego irte a una pestaña que pone consola o si estás en Windows pulsando F o en Mac, comando Alt I de Inspector y también te lo abre, al menos en Chrome, creo que en otros navegadores cambian, pero vaya, ábrelo con el botón derecho inspeccionar y si no, pues buscas la combinación de teclas correspondiente de tu navegador y tu sistema operativo. ¿Bueno, y qué vemos ahí en esa parte de la consola? Pues vamos a ver mensajes que el código de tu web genera mientras, mientras corre, mientras está funcionando, mientras ocurren las tareas. Y muchos de estos avisos, sobre todo si estamos hablando de trabajar con webs, con WordPress, van a incluir el nombre del plugin o el tema que está provocando ese fallo, que a veces ya digo, es un error grande, pero otras veces es un pequeño aviso o un posible error que hay en el futuro. Ahora hablaremos un poco más de los tipos de mensajes que hay y además puedes ver una pequeña descripción del problema en cuestión. Por eso digo que no necesitas entender el código, simplemente interpretar el texto del mensaje, que eso sí, va a estar en inglés. Ahora, ¿Qué tipos de mensajes podemos encontrar en la consola? Pues lo primero que tienes que saber es que la consola la podemos abrir independientemente de la página en la que estamos, puede ser que estemos en la parte frontal de nuestra web y queramos inspeccionarla, pues a ver cómo carga algo, a ver si hay un problema de carga o de error en el momento de cargar esa página en concreto, una landing, tu carrito, la página de inicio, lo que sea, pero también lo puedes hacer en la zona de administración de tu web, con lo cual vamos a poder ver errores relativos a esa parte. Después te voy a dar un ejemplo real y muy específico. ¿Pero qué tipos de mensajes Como decía, podemos encontrar? Principalmente tres. Cuando veas un error en rojo es que algo ha fallado, esto puede ser un plugin que intenta hacer algo y no puede, puede ser simplemente un script que no carga, un script es simplemente un trozo de código que ejecuta algo y en estos casos, cuando es un error en rojo, son los más urgentes. Muchas veces puedes encontrarte con errores en rojo, que eso, que son urgentes pero que todo funcione aparentemente bien porque ese error digamos, no está rompiendo lo que tú quieres hacer en ese momento. Después tenemos las advertencias que están en amarillo y que esto es que algo funciona pero no por mucho tiempo, como cuando tu coche te avisa de la luz del aceite que no te va a dejar tirado en ese momento, pero si no lo solucionas puede que te llegue a dejar tirado. Esto es un poco lo mismo, son advertencias y quizás en la siguiente actualización puede entrar en conflicto, si el error es de un plugin puede entrar en conflicto con esa versión de WordPress, algo así, o en algunos casos puedes tener la advertencia meses y que luego realmente no pase nada, pero está bien revisarlo por si acaso, ya digo, tiene incidencia. Y después tenemos avisos de deprecated, que esto es que algo se va a dejar de utilizar. Estos avisos pueden aparecer en amarillo, en gris, depende, y son los más interesantes para anticiparte, porque en el caso de WordPress, que es lo que nos interesa, los genera cuando un plugin o un tema usa funciones que van a desaparecer en futuras versiones, esto es lo que quiere decir deprecated. ¿Que se ha marcado como obsoleta? Pues pasa con versiones de PHP, con versiones de jQuery, es decir, con código que se actualiza y las versiones anteriores ya se consideran obsoletas. También pasa con la API de WordPress, que ya digo, Ahora te voy a hablar de un ejemplo muy concreto relacionado con esto. Entonces, un mensaje de este tipo puede decir algo así La función, lo que sea, está obsoleta Desde la versión 6.8 de WordPress, usa la versión X en su lugar. ¿Y muchas veces incluso te va a incluir el nombre del archivo del plugin o el tema, lo que sea que está provocando esto? Porque estos son mensajes destinados a los desarrolladores, pero nosotros, como somos unos adelantados, abrimos la consola y lo podemos leer. Ya digo, está en inglés, pero como ves es un texto normal. Entonces, ¿Qué hacemos con esta información? ¿Cómo nos anticipamos a problemas antes de que ocurran? Por ejemplo, más allá de intentar darles soluciones, si es que de verdad estamos viendo un error, y entonces abrimos la consola y decimos, vale, el error puede venir de aquí porque estoy viendo que un fallo con el plugin no sé cuántos. Más allá de esto, podemos anticiparnos, sobre todo, como digo, con estos avisos de deprecated, que son tu mejor aliado para adelantarte. Entonces, sobre todo cuando veas que WordPress va a sacar una versión grande, que estas son las que tienen solo dos números, por ejemplo 60.6.16.26.570, las pequeñas son 6.1.1 6.1.2 las que tienen ya tres numeritos son versiones pequeñas, pero las grandes versiones son las que tienen solo un número punto y otro número. Entonces, en este sentido, cuando WordPress hace estos cambios, puede cambiar o eliminar funciones internas. Si un plugin o tema sigue usando funciones antiguas, pues WordPress va a avisar en la consola, entonces tú lo puedes ver y ese aviso va a ser una advertencia, te avisa antes de que se produzca la actualización, no siempre, pero suele hacerlo. Y entonces lo que hoy es simplemente una advertencia, pues mañana puede ser un error que rompa algo de tu web o que tú no entiendas por qué algo ha dejado de funcionar o lo que sea. Un ejemplo muy esto se va a publicar el día 18 de febrero, el día 19 sale WordPress 7.0, creo que el día 19, salvo que lo retrasen por algo, pero la fecha oficial era esa. Entonces, con WordPress 7.0 el editor de entradas va a empezar a funcionar siempre dentro de un iframe, que esto nos da un poco igual, pero lo hace para aislarlo y que el rendimiento sea mejor. Hasta ahora ha funcionado parcialmente así. Esto es importante para nosotros en la parte frontal no nos afecta, pero para los desarrolladores que crean plugins que interactúan con el editor de bloques de WordPress, pues si no se han adaptado a este cambio que es básicamente que se usa otra API, una versión nueva, pues pueden dar problemas. Entonces ahora mismo WordPress ya está avisando de esto, de hecho tengo un vídeo que te voy a recomendar un taller que he grabado a propósito de esto, donde te guío por el proceso de cómo hacer esta investigación, cómo detectar problemas de compatibilidad y cómo anticiparte a ellos utilizando la consola y vemos el ejemplo este de WordPress 7.0 y como ya algunos plugins que aún no se han adaptado a esto pues tienen este problema y lo vemos ahí, incluso puede pasar con themes, además vemos otro tipo de errores que no tienen que ver con esto de 7.0 y como esos errores aunque se estén mostrando funciona todo bien porque aunque la versión sea obsoleta puede seguir funcionando correctamente, hay veces que conviven distintas versiones y aunque te recomiendan dejar de utilizar la obsoleta todo sigue funcionando, entonces también es cuestión de que tú vayas probando y ahora veremos qué puedes hacer de forma un poquito más avanzada con esta información. Como te decía, al inspeccionar esto vamos a ver eso, errores con la versión de WordPress, pero también puede que suban los requisitos mínimos de PHP y de mysq que es lo que se usa para la base de datos y ahí puedes ver cosas como por ejemplo si tu hosting cumple con esos requisitos o no, si tus hosting no los cumples o no tienes configurado tu servidor así pues no vas a poder actualizar o si por ejemplo ves que tienes varios avisos de deprecated, de obsoleto en un mismo plugin, pues es señal de que ese plugin necesita una actualización ya sea porque tú no lo has actualizado desde la parte de administración o porque el plugin ya no lo está actualizando, entonces ahí puede darte una mala señal acerca del mismo. Ahora, ¿Qué hacemos exactamente cuando detectamos un problema? Bueno, lo primero es que estos avisos de deprecated no significa que tu web se haya roto como hemos dicho y es muy muy habitual que se vean errores, entonces si vemos un error rojo de un plugin concreto, lo primero que yo haría es ver si hay una actualización disponible. Si ya estás en la última versión y ese error persiste, yo escribiría el desarrollador incluye una captura de la consola y así te ahorras tiempo y no le tienes que estar explicando tampoco tanto. Copia y pega el texto y luego aparte mándale la captura de la consola. Esto si ve errores en rojo, si ves errores deprecated, esto que te pone la palabra deprecated que es que algo está obsoleto, entonces contacta al desarrollador y pregúntale si están trabajando en la compatibilidad con la próxima versión de WordPress, si ese es el caso y así van a saber que los usuarios están al tanto y que no pueden estar ahí con esos errores, porque la gente se da cuenta y sobre todo si lo haces, si es un plugin gratuito y lo pones en el foro de WordPress, como queda ahí público, pues también tienen esa necesidad de ponerse con ello. Luego si un plugin lleva meses sin actualizarse y la consola muestra varios warnings, es el momento de plantearte alternativas. Esto es un aviso claro de que quizás este plugin deje de ser mantenido. Esto puede ocurrir sobre todo con plugins gratuitos, puedes hacer lo mismo, escribir, si ves que no te hacen ni caso, pues yo ya buscaría una alternativa. Luego si el aviso viene del tema del thing, aplica la misma lógica, comprueba si hay actualización, contacta con el autor o si no, valora el cambio. Si ves que no hay actualizaciones o no corrigen o no contestan a soporte desde hace mucho. Venga, vamos a hacer algo práctico que puedes hacer ahora mismo yéndote a tu web y te recomiendo que abras en el navegador, que abras el inspector y que vayas a la consola y ahí mira a ver qué aparecen. Revisa tanto el frontend, es decir, la parte frontal, lo que ven tus visitantes, como el backend, el escritorio de WordPress, la parte de administración, porque los avisos pueden y van a ser seguramente diferentes en cada uno. Ten en cuenta que dependiendo donde estés, por ejemplo, si no tienes el editor de bloques, si no estás editando una página, una entrada, no vas a ver errores relativos al editor, vas a ver errores relativos a otras cosas, entonces esto es importante también. Si de primeras no los ves con el inspector abierto, recarga la página porque eso va a hacer que ahí sí se empiece a registrar los errores de la consola y puedas ver exactamente lo que se va arrojando ahí. Si ves mensajes en rojo, copia y pégalos. Si ves estos deep recated de obsoletos, identifica qué plugin es o qué tema los provoca y como te he dicho, los puedes ir investigando y con esto pues ya lo tienes, puedes ir haciéndolo yo que sé, cuando hagas el mantenimiento de tu web. Obviamente si detectas algún fallo pues ahí vas a poder ver información en esa pestaña. Pero si quieres como digo aprender a hacer esto paso a paso con un ejemplo realmente, pues te dejo el vídeo donde te guío por todo el proceso. Recuerda en Gonzalo es 516, ahí te dejaré el enlace y si no en la sección de recursos de la web vas a tener este taller en vídeo fantástico. Espero que te haya gustado el episodio. Nada más por este episodio nos seguimos escuchando. Adiós.