394 | Potencia tu WordPress con 10 trucos de las Chrome DevTools

En el episodio 394 de WordPress semanal te hablo del potencial de las herramientas para desarrolladores de Chrome, cómo funcionan, en qué te benefician y 10 trucazos que te van a encantar. Vamos allá. Hola, hola, soy Gonzalo Navarro y Bienvenidos al episodio 394 de WordPress Semanal, el podcast en el que aprendes a crear y gestionar tus propias webs con WordPress en profundidad. Y hoy te voy a hablar de cómo puedes aprovechar las herramientas para desarrolladores de Chrome o las Chrome Dev Tools o la zona de inspeccionar dentro del navegador de Chrome para potenciar tu página web con WordPress. Primero te las definiré, te diré qué es esto por si realmente no lo has usado nunca o lo has escuchado pero realmente no sabes qué puedes hacer con esto. Después te voy a convencer de utilizarlo con cinco ventajas que creo que hay si aprendes a utilizarlas, a manejarte con ellas y que desde luego te van a poner por delante de la mayoría, porque mucha gente ni siquiera se acerca a esta zona de herramientas. Y por último terminamos con 10 trucos que no son demasiado conocidos pero que son muy útiles cuando estás utilizando las herramientas de Chrome. Ya digo, todo enfocado siempre a mejorar tu web o aplicar posibles optimizaciones, analizar errores, en fin. Ahora vamos a ver qué incluye todo esto, pero antes, como siempre, novedades y más allá del nuevo vídeo de la zona código, que tenemos un vídeo nuevo y que podéis ir a él en Gonzalo Navarro es código o directamente ir al menú de la parte de código. Ya se acumulan más de 340 vídeos en los que te enseño a modificar tu web sin utilizar plugins y sin que sepas desarrollo. Simplemente ves el vídeo, copias el código y lo pegas. Pero me quería centrar en la gran novedad del mes, que además estoy súper contento porque hace muy poquito que acabo de terminar de grabar el curso y creo que os va a encantar. Y no es otro, oh sorpresa, que el curso de las herramientas para desarrolladores de Chrome. Ahí os explico paso a paso y en 8 clases en formato vídeo cómo sacar provecho de lo más importante, lo que aplica a nosotros que creamos y gestionamos webs con WordPress relacionado con las Chrome DevTools o herramientas para desarrolladores de Chrome, por supuesto. Vemos cómo moverte por toda esta zona, cómo configurar los ajustes básicos si es que quieres modificar algunas cosas, cómo trabajar con la parte de HTML, cómo trabajar con la parte de CSS para que hagas tus cambios, cómo trabajar por la zona de peticiones, por ejemplo, para que busques errores 404 en tu web, para que veas qué problema hay si una redirección no funciona, en fin, todo lo que tiene que ver con las consultas que se hacen desde tu web. Vamos a repasar también en un vídeo toda la parte de seguridad y de cookies, puedes ver los certificados de seguridad que tiene tu web o cualquier otra, revisar toda la zona de cookies para, por ejemplo, analizar qué cookies se cargan en tu web y después las puedas coger y ponerlas en la política de privacidad o en la política de cookies. Vemos la pestaña de grabaciones, que te adelanto es uno de los trucos que te comento en el episodio de hoy, es súper interesante, puedes grabar cualquier acción que ocurra en tu web, todo lo que tiene que ver con el rendimiento, cómo analizar el tiempo de carga de tu web de la mejor forma posible, todas las opciones que tienes directamente desde el navegador sin que tengas que irte a herramientas externas. Y terminamos con una clase pues un poco también enfocada a trucos. Básicamente he puesto una clase final con cosas que me parecen interesantes y que no entran o que no dan para una clase entera, así que las he agrupado en esta última clase para que no os quedéis sin ellas. Muchas ganas de que veáis el curso, era uno de los cursos más votados, el más votado, digamos, hasta ahora. Ahora someteré de nuevo a votación las propuestas que los que estáis apuntados, los miembros, me vais haciendo para que en la comunidad privada de Telegram pues vayáis votando y digáis pues quiero que éste salga antes y así los voy sacando. Este sería ya el curso 79, así que imaginad la cantidad de formación que tenéis disponible en GonzaloNabarro es, ya sabéis, si aún no sois miembros, pues vais a eso, a gonzalonabarro es, Ahí tenéis todo lo que incluye la membresía, que básicamente es formación de los cursos, los vídeos cortitos de la zona, código, acceso a la comunidad privada de Telegram, acceso a soporte conmigo, directamente conmigo, personalizado y encima es un regalo, porque todo esto lo tiene disponible por solo 10 euros al mes, sin permanencia. Incluso si quieres probarlo te doy 15 días. Y si en esos 15 días no te gusta, oye Gonzalo, no, esto no es lo mío, pues no pasa nada, te devuelvo el dinero y sin preguntas. Voy a dejar el enlace al curso y a todo lo que voy comentando, pero ya sabes que si vas a GonzaloNovarro es. Pues ahí lo tienes todo directamente y facilito. Fantástico. Una vez vistas las novedades, vámonos ahora con el plugin de la semana que se llama Simple Social Icons. Este te puede sonar porque ya lo he comentado en el pasado, hace bastante tiempo. Lo que pasa que visitando o investigando en la zona de plugins, que yo siempre estoy por ahí mirando a ver qué cositas hay, me di cuenta de que tiene otro dueño y además a los dueños los conozco. Es la empresa Ozone Press de dos desarrolladores españoles, Nawai Badiola y Esther Sola, porque esto antes era de Estudio Press, la empresa que está detrás de Genesis. Y entonces vi que ahora lo tenía Ozone Press y le escribí a Nawai por Twitter y le digo, oye, he visto qué tal que tenéis esto, y me dice, sí, mira, aquí tengo un episodio del podcast, que por cierto os voy a dejar enlazado, donde explicamos la historia. Pero básicamente es que ellos son parte, o al menos Nawai de Genesis Shapers, que es como desarrolladores que trabajan alrededor del ecosistema Genesis y se reúnen y demás. Y ya en 2022, que yo no sabía, en abril, que yo no sabía que fue hace tanto tiempo, o al menos a lo mejor lo vi en su momento pero no me acordaba, uno de los cofundadores de Studio Press comentó en la reunión que querían traspasar algunos de sus plugins a otros autores de confianza. Entonces ellos, los de Awesome Press, Nawai y Esther, eligieron 4 plugins y entre ellos está este de Simple Social Icons, que es un plugin bastante pop, popular, está activo en más de 100.000 webs con WordPress y básicamente te permite insertar iconos sociales que tienen buen rendimiento y que es como muy sencillito. Y bueno, lo comento porque me parece interesante este proceso en el que se pasó los plugins de esto de StudioPress, se lo pasaron algunos autores, en este caso los de osompress, que cogieron cuatro y este es uno de ellos. Y luego si queréis escuchar el episodio en el que lo comentan es interesante. Por un lado los de Studio Press tuvieron que poner al día los plugins, es decir, corregir todos los errores, añadir OsonPress a la marca de Stering Hawaii como colaboradores y traspasarle los repositorios de GitHub, que es básicamente donde está todo el código, pues traspasárselos. Y luego por parte de ellos tenían que quitar todo lo que tuviese que ver con la marca studiopress, explicar el cambio en el changelog donde se van poniendo todos los cambios en un plugin, cambiar los autores, por supuesto, de Studio Press a Ozonepress, mantener los contribuidores antiguos, es decir, todos los que han contribuido al plugin tienen que estar ahí porque contribuyeron en su momento y por supuesto añadirse ellos y bueno, y explicar un poco el proceso en un post. Bueno, me pareció interesante, así que por eso os dejo dejo este plugin que de hecho está muy bien, ya digo, está activo en un montón de webs y me alegra que lo estén llevando la gente de Ozone Press, porque eso quiere decir que el plugin va a seguir. Lo que estaba pasando con estos plugins de Estudio Press es que estaban la mayoría un poco abandonados, así que bueno, los que no conocierais el plugin, pues ahora lo conocéis y los que no conocíais la historia, pues lo mismo. Por cierto, el podcast en el que comentan todo esto se llama Freeland de. Pero vamos, os voy a dejar el enlace en las notas del episodio. Perfecto, pues ahora sí, vámonos con el tema central del episodio. Cómo aprovechar las herramientas para desarrolladores de Chrome y potenciar tu web con WordPress. Vamos a empezar definiendo qué son las Chrome DevTools. Fíjate que a veces digo herramientas para desarrolladores de Chrome y a veces digo Chrome DevTools. Es lo mismo, una cosa es en inglés y otra en español. En inglés es un poquito más corto, así que la mayoría de las veces la voy a decir así Chrome DevTools. Bien, ¿Qué son? Básicamente son una colección de herramientas de desarrollo web integradas en el navegador de Google Chrome. Pero que esto de herramientas de desarrollo web no te asuste, porque no tienes que ser desarrollador o desarrolladora para aprovecharlas. Si trabajas con WordPress a secas saber utilizarlas, al menos algunas de ellas, quizás las menos técnicas, pueden darte una ventaja enorme y te las resumo en cinco. Cinco ventajas de aprender a utilizar las Chrome DevTools que te pondrán por delante de la mayoría. Número uno, tu productividad se puede ir por las nubes. Puedes tener muchísima más productividad gracias a, por ejemplo, la capacidad de editar en vivo ciertas partes de tu web y ver cómo va quedando, o por ejemplo, depurar o investigar errores en tiempo real, porque puedes hacer procesos, simularlos y ver desde el punto de vista de las herramientas o desde la parte de las herramientas por qué ocurren esos errores o dónde ocurren. Segunda gran ventaja, vas a tener una capacidad de optimización web mucho más completa y rápida gracias a herramientas de mejoras del rendimiento que te aporta en este caso Chrome. Por ejemplo, puedes analizar directamente la velocidad de carga de tu web en el navegador, no tienes por qué irte a herramientas externas, puedes grabar procesos que ocurren en tu web y analizar cuánto tarda ese proceso en terminar, por ejemplo una compra, cuánto tarda el usuario o un usuario medio en comprar en tu web. Todo esto lo puedes medir directamente desde tu navegador. Tercera gran ventaja, puedes diseñar de forma mucho más efectiva gracias a las funciones de responsive, por ejemplo, ver tu web en todos los tamaños en dispositivos específicos y además ir editando en vivo cada una de esas partes. Cuarta gran ventaja, si sigues las anteriores, vas a ahorrar dinero seguro, porque vas a poder solucionar problemas e implementar mejoras por tu cuenta. Te sorprendería de la de cosas que puedes llegar a hacer aprendiendo a utilizar las herramientas del navegador de Chrome. ¿Y que te ahorran? Pues cuando digo dinero también hablo de tiempo, porque al final pegarte tres horas en Google buscando estás perdiendo dinero, estás perdiendo tiempo, estás perdido todo. Entonces, sabiendo utilizar partes clave de las herramientas de Chrome vas a dar con soluciones de forma mucho más rápida. Y quinta y última, vas a aprender muchísimo, vas a aprender lo que no está en los escritos, porque puedes experimentar desde el propio navegador con estas herramientas un montón de cosas en tu web sin romper nada, pruebas diseños nuevos, quitas cosas, añades cosas, pones estilos y todo es digamos cosmético. Es algo que haces desde el navegador que tú vas viendo las posibles mejoras y cambios que hagas, pero no se hacen efectivos en la web hasta que tú después vayas, entres en la web y lo hagas. Bueno, si no te he convencido con estas cinco ventajas, vamos a ver si estos 10 trucos poco conocidos pero muy útiles de las herramientas de Chrome acaban por convencerte. Truco número uno, con las herramientas para desarrolladores de Chrome puedes descubrir las cookies que usa tu web para ponerlas en tu política de privacidad, o en tu política de cookies mejor dicho. Truco número 2, puedes grabar un proceso de tu web, por ejemplo un proceso de compra, como te he dicho antes, un proceso de suscripción a la newsletter, un proceso de contacto, Esto por ejemplo lo vemos en el curso, grabamos el proceso de rellenar el formulario de contacto de mi web y luego además te enseño a por ejemplo quitar un paso, ¿Para que? Para forzar un error. Entonces al rellenar el formulario le puedes dar a reproducir y tú estás viendo en vivo, es decir, tu navegador se mueve solo y estás viendo cómo se hace el proceso de contacto y cuando llega un paso en el que hay un error, pues te lo muestra y luego tú puedes descargar esa grabación y enviársela por ejemplo a tu desarrollador o si llevas webs para clientes, puedes explicarle a tu cliente cómo se hace esta grabación, que es bastante sencilla, yo te la explico en el curso de hecho, entonces tu cliente te dice, tengo este fallo, no sé qué, no sé cuánto, en lugar de explicártelo por email, de llamarte por teléfono, no sé qué, lo hace en la web, hace el proceso que le da el fallo grabándolo con las herramientas de Chrome, lo descarga, te lo envía y tú lo puedes reproducir exactamente igual como le ocurre a él, y es mucho mejor verlo que además no sólo lo ves el navegador moviéndose solo, sino que lo ves con los pasos como una especie de esquema a nivel de las herramientas de Chrome, con lo cual esto es súper útil. Truco número 3, si estás editando enlaces, hay una manera, imagínate que tú estás editando de un enlace el color del enlace, pero también estás editando lo que ocurre cuando pones el ratón por encima del enlace y que también estás editando lo que ocurre una vez el enlace así sido pulsado. Pues estos estados, cuando tú estás por ejemplo probándolo desde el navegador de Chrome. El problema es que para verlos pues tienes que hacer clic, por ejemplo en el enlace y esto ya te saca de dónde estabas. Pero hay una opción, es un truquito que también te explico en el curso, para forzar estos estados y ver cómo quedarían sin tener que hacer la acción en sí y que te saque de dónde estás en ese momento. Truco número 4. Te has vuelto loco haciendo cambios. Porque ya he dicho que puedes experimentar a lo loco, puedes hacer un montón de cosas. Pues es muy útil irte a una pestaña que se llama calculados y ahí tienes todos los cambios que has hecho, por ejemplo los cambios de CSS, que esto es muy habitual, te pones a hacer pruebas, cambios de CSS, pum, pum, pum. Y ahora dices, uf, he cambiado tantas cosas que ahora no me acuerdo que he cambiado. Pues tienes todos los cambios disponibles para copiar y pegar, ya digo, en la zona de calculados. Truco número 5. Puedes desactivar la caché mientras trabajas en las Chrome DevTools. Esto, si estás en la pestaña de red, por ejemplo, es muy útil, que esto es donde vas viendo todas las peticiones que se hacen, las peticiones HTTP que se llama, pues si se hace una petición a las fuentes de Google, si se hace una petición a tu propio servidor para que se descarguen los archivos de tu web. Todo esto lo vas viendo y vas viendo lo que tarda cada cosa y puedes ir filtrando, ver los archivos CSS, ver las imágenes, ver los archivos que te dan error, es decir, que no se encuentran los error 404, por ejemplo. Pues muchas veces para ver todas estas cosas bien, mejor, sin que afecten cosas que no deben afectar, puedes desactivar la caché desde las propias opciones de Chrome, de las herramientas de Chrome, Vamos. Truco número 6. Carga una página como si fueses Google. ¿Para qué es útil esto? Esto es útil sobre todo cuando te huele que algo pasa en tu web raro, que te la han podido hackear, que dejas de tener visitas, que no estás posicionado y luego tú entras a tu web y tú la ves bien, no ves nada raro. Pero claro, hay un tipo de hackeo que es súper habitual, en el que lo ponen de forma que tú no te das cuenta. A lo mejor tu web, en lugar de mostrarse tu web empieza a mostrar anuncios de Viagra, anuncios de salas de juego, este tipo de cosas prohibidas por Google, al menos prohibida anunciarse, pues tú no lo ves. Sin embar Cuando Google accede con su bot, sí lo ve, con lo cual la web te la funde, te la quita de las primeras posiciones donde las tuvieras y es un desastre. Pues si te hueles esto, hay una forma de hacerte pasar por Google y desde las herramientas de Chrome puedes hacerlo. Esto también lo explico en el curso, no lo digo porque hay que por audio, es que es complicado, pero vamos, si no lo puedes, si no estás en el curso o lo que sea, lo puedes buscar también en Google cómo se hace. Truco número 7 limpia las cookies de una sola web para no tener que borrar todo tu historial. Este truco de hecho lo publiqué en Twitter, lo explico por supuesto en el curso, pero también lo publiqué en Twitter hace un par de días o así. Por cierto, si no me sigues en Twitter es gonna es mi usuario, últimamente estoy más activo, por si te interesa. Y esto está genial, esto de limpiar las cookies de una sola web, porque es un rollo. Cuando vas a limpiar las cookies porque hay un problema en cualquier web y tienes que irte al historial y borrar, pues borras la última hora porque no quieres borrar todas las contraseñas y toda la caché y todo lo que tienes guardado. Pues con esto lo borras solo de una web y así pues no tienes problemas con el resto de webs en las que seguramente no quieras borrar las cookies. Truco número 8. Antes te decía que puedes medir la velocidad de carga en tu web, pero ¿Qué pasa si estás en local? Pues también puedes hacerlo. Por ejemplo, si tú te vas a PageSpeed, a la página de PageSpeed, tú no puedes poner en la zona de URL para analizar una web que tengas en local, porque como está en tu ordenador, Google no puede llegar a ella, sus servidores no pueden llegar a ella. Sin embargo, si usas las herramientas de medición del propio navegador, de las propias herramientas de Google Chrome, si la puede analizar porque la estás utilizando en tu propio navegador. Entonces ahí puedes hacerte una muy buena idea del rendimiento de carga de tu web. No es el definitivo, porque una vez lo subas a un servidor en vivo, el servidor va a hacer. Va a tener su impacto, pero sí que puedes medir el rendimiento del resto de cosas. Truco número 9, bueno, no sé si sabes que creo que sí que lo he comentado a lo largo del episodio. Hay una opción dentro de las herramientas de Chrome que te permite ver tu web pues en formato tablet, en formato móvil, en el tamaño que tú quieras y lo puedes hacer por dispositivos. Puedes decir quiero ver mi web ahora mismo como si fuese un iPhone X o un Samsung Galaxy, lo que sea. Vale, Pues esta lista que te ofrece Google Chrome la puedes editar, puedes decir qué dispositivos quieres que aparezcan y qué dispositivos quieres que no aparezcan. Prácticamente están todos los del mercado, pero no te ponen, te ponen algunos, entonces tú puedes quitar los que no te interesen y añadir desde la configuración de Chrome los que sí te interesen. Y truco número 10, que es un poco tontería, pero sé que a los que os interesa os va a interesar mucho, es simular cómo se vería cualquier página al imprimirla. Y digo que puede ser útil para el que le interese porque a mí me ha llegado, me han llegado consultas en la zona de soporte de gente oye Gonzalo, ¿Cómo puedo saber si alguien le da a imprimir? ¿Cómo va a salir la página? Pues bueno, con esta herramienta, desde las opciones de las Chrome DevTools lo puedes ver, también lo vemos en el curso, tampoco te digo los pasos porque hay que hacer como 5 clics si no estás en el curso, puedes buscarlo también en Google, pero que sepas que es posible. Y si todo esto te ha animado a aprender, a aprovechar, a utilizar, a sacar partido de las herramientas para desarrolladores de Chrome, pues recuerda que ya tienes el curso disponible y que si vas a Gonzalo Navarro es pues te saldrá de los primeros, si no el primero, dependiendo de cuánta prisa te des o cuándo hayas escuchado este episodio. Y nada más, no me quiero ir sin darte las gracias por estar ahí escuchando al otro lado. Si tomas alguna acción para ayudar a que crezca este podcast, también agradecértelo muchísimo. Ya sabes, si estás en Apple Podcast, pues dejar una reseña o una valoración de 5 estrellas ayuda mucho. Si aún no te has suscrito al podcast, suscríbete. Si estás en iVoox, pues puedes dejar un comentario. También puedes suscribirte al podcast en Spotify, también puedes suscribirte y dejar una reseña y bueno y si no pues compártelo en tus redes sociales o por email o yo que sé por WhatsApp, alguien al que pienses que le puede gustar. Nada más por este episodio, nos seguimos escuchando. Adiós.