Chrome DevTools, ¡para aplicaciones SSR súper rápidas!

Hola y bienvenidos a esta charla sobre Chrome DevTools para básicamente mejorar su aplicación. En primer lugar, quién soy yo, soy Luca De Pupo, diseño su motor de software en Miraform. Me encanta hacer senderismo, correr, andar en bicicleta, así que hago deporte en realidad, y en mi tiempo libre también me encanta crear contenido tecnológico para personas tecnológicas. Así que, en primer lugar, trabajo en Miraform, somos una empresa consultora, así que si te gusta Node, JavaScript y este ecosistema y quieres unirte a nosotros, házmelo saber, estamos contratando. Y somos completamente remotos.

Así que, vamos a pasar a la charla. Esta es una situación común hoy en día. Así que, hay desarrolladores que intentan básicamente resolver diferentes desafíos, porque hay diferentes requisitos en nuestra aplicación. Por ejemplo, necesitamos cuidar la experiencia del usuario. Necesitamos cuidar el rendimiento. Necesitamos cuidar la accesibilidad de SEO y también las mejores prácticas. Luego también necesitamos verificar la parte de seguridad, y tal vez tengamos una aplicación de renderizado del lado del servidor. Así que, todo este tipo de cosas aumentan la complejidad de nuestra aplicación. Y en algún momento, necesitamos entender cómo podemos depurar todo esto.

Así que, honestamente, probablemente no podamos depurar todo, pero podemos intentar mitigar o básicamente tener una buena cobertura o una buena experiencia para la mayoría de estos puntos. Y tenemos la suerte de que Chrome DevTool expone características útiles para depurar muchos de ellos. Así que, hoy, lo que quiero hacer es tratar de mostrarles algunos de ellos. De hecho, dentro de Chrome DevTool, tenemos una pestaña de rendimiento que nos permite mejorar el rendimiento de nuestra aplicación. Pestaña de accesibilidad y árbol de accesibilidad que nos ayudan a entender cuán accesible es nuestra aplicación. Lighthouse, tenemos la pestaña de red que nos permite total en la solicitud. O el panel de cobertura que nos permite entender si podemos reducir el tamaño del paquete de nuestra aplicación. Y por último, ahora también tenemos un servidor MCP que puede ayudarnos a básicamente conectar nuestro LLM a un sitio web y luego básicamente intentar crear una especie de informe de lo que necesitamos. Y usándolo, luego podemos revisar nuestra base de código. Así que, vamos a pasar a la base de código, a Chrome DevTool para verlo en acción. Así que, vamos a movernos en esta aplicación QP. Voy a la pestaña de To-Dos. Si abro el panel de Chrome DevTool, puedo buscar usando Command-Shift-P para una pestaña específica. En este caso, quiero mostrar la parte de cobertura. El panel de pestaña de cobertura nos permite básicamente... Déjame ejecutar el script.

Como puedes ver, aquí tenemos una lista de archivos que la aplicación está descargando. Y tenemos una especie de informe de los bytes totales de ese archivo específico y los bytes no utilizados de ese archivo específico. Usando esta aplicación, podemos entender si podemos dividir en diferentes partes una parte específica de la aplicación. Por ejemplo, en este caso, ahora la aplicación está ejecutándose en modo dev, por lo que no está optimizada para la producción, pero es útil para básicamente mostrar cómo funciona la cobertura. Por ejemplo, este archivo contiene el código para el siguiente widget de DevTool, este.

Y como puedes ver, hay 1.5 MB y casi 1 MB es código no utilizado. Esto significa que este es un archivo que necesitas usar en producción, y básicamente estás descargando la primera carga de la aplicación, probablemente. Puedes verificarlo usando...

Puedes hacer clic en él y verificar qué contiene el archivo e intentar dividir en dos partes diferentes para básicamente cargar solo la parte requerida durante el inicio de la aplicación y cargar más tarde, en legado, el resto del código que tal vez no se requiere al principio. Bastante simple, pero útil, esta tableta. Tienes que prestar atención porque dentro de este panel también puedes ver la extensión de Chrome, como puedes ver, pero también puedes ver la parte de CSS.

Sí, por favor presta atención a lo que estás viendo aquí, porque no siempre es cierto lo que estamos viendo. Por ejemplo, tal vez básicamente estás viendo la aplicación sin una configuración específica, pero si habilitas esa configuración, otra parte del código estará allí, y tal vez tengas que entender qué necesita dividirse y qué no necesita dividirse, básicamente. OK, pasemos a otra parte. Parte de la red, la pestaña de red.

Es fantástico probar nuestra aplicación en el entorno local, porque todo es rápido, todo funciona muy bien, porque básicamente las aplicaciones están en nuestro entorno. También tenemos el back-end dentro de la aplicación, dentro de la máquina local, y lo que sucede es que básicamente todo es rápido. Pero, ¿cuál será la experiencia de un usuario que tal vez acceda a la aplicación con una conexión a Internet diferente?

Usando el Chrome DevTool, podemos limitar la solicitud de red. Y, por ejemplo, aquí, usando este botón, podemos decidir no limitar, o usar alguna configuración preestablecida o agregar una configuración personalizada si queremos. Por ejemplo, ahora puedo establecer offline, si actualizo la página, esta aplicación no funciona sin conexión.

Pero tal vez estás trabajando en una aplicación PWA. La expectativa es ver la aplicación tal vez con alguna notificación específica o cosas así. O puedes verificar tu aplicación con una conexión lenta, por ejemplo, una conexión 3G. Como puedes ver, ahora, todavía estamos esperando por todo este archivo. Sí, no es un paquete de producción, pero imagina que estás descargando todo este tipo de cosas. Puedes verificar cuánto tiempo necesita esperar el usuario antes de básicamente la página completa. O lo mismo es para el 4G lento. Puedes refrescar la página y eso es todo.

OK. Eso es todo. Fantástico. Y volvamos a sin limitación. Hablamos sobre accesibilidad. Si voy a la pestaña de elementos, puedo verificar la parte de accesibilidad de esta aplicación. Así que si uso el selector aquí y tal vez voy a este elemento, como puedes ver aquí, puedo usar la pestaña de accesibilidad a la derecha para verificar la accesibilidad, el área, básicamente el atributo de área del elemento. Spoiler, esta aplicación no es accesible. Pero aquí, como puedes ver, puedes ver el atributo de área o el área de etiqueta y el título y bla, bla, bla.

Aquí, si básicamente configuras la información. Por ejemplo, si agrego aquí área, no aquí, pero aquí área de etiqueta prueba, como puedes ver tenemos un atributo de área aquí y podemos ver qué sucede. Luego también tenemos una vista del árbol de accesibilidad. Si habilitas esta verificación, básicamente obtienes este botón. Si haces clic en este botón, lo que sucede es que básicamente la vista cambia de HTML3 a vista del árbol de accesibilidad. Aquí puedes ver cómo se ve tu aplicación para un lector de pantalla. Esto es también porque básicamente puedes verificar, por ejemplo, aquí hay una imagen sin el título alt. Básicamente verificas si tu aplicación es accesible para un lector de pantalla simplemente haciendo clic en un botón aquí y verificando qué sucede en el árbol de accesibilidad.

Fantástico. Ahora saltemos al panel de rendimiento. El panel de rendimiento es probablemente ese panel que cuando lo abres y ves lo que hay dentro, básicamente quieres cerrarlo de nuevo. También podemos usarlo para verificar antes de lanzar a producción cómo reacciona nuestra aplicación en caso de diferentes CPU o diferentes redes. Ahora, como puedes ver, esta es la matriz local de mi aplicación. Déjame hacer esto. Esta es la matriz local. Tenemos el SCP en 1.30 segundos. Tenemos un IMP de 32 milisegundos y bla, bla, bla.

Como puedes ver, tenemos una especie de iteración, información sobre el cambio de diseño, señalización y bla, bla, bla. Esta es información solo usando nuestra matriz local. Quiero básicamente obtener matrices con una CPU diferente y una red diferente. ¿Cómo puedo obtenerlas? Usando la configuración del entorno aquí a la derecha, básicamente podemos elegir una CPU con una desaceleración de seis veces y una red de 4G rápida. Si haces clic en grabar y recargar, lo que sucede es que Chrome Web Tool está recargando la página y trazando alguna información para ti.

Y este es el resultado. Tenemos un panel de información aquí donde básicamente puedes obtener información sobre SCP o descubrimiento de solicitudes SCP. Como puedes ver, ya obtuve la información aquí de que la primera imagen no tiene una prioridad de obtención alta. Puedo mejorarla agregando esta información a la imagen. Y básicamente, sin tocar nada especial, ya obtuve la información. Aquí hay información de terceros. Tenemos un montón de información, entonces. IMCP, IMB, fuente, mucho código heredado, probablemente no en esta página, pero en la otra, sí.

Pero como puedes ver, ya tenemos diferentes insights integrados que podemos usar para mejorar la aplicación. Básicamente, nuestros insights para mejorar nuestra aplicación. Por ejemplo, puedo usar el botón de descubrimiento con AI que me permite chatear con Gemini Nano y la asistencia de AI ya integrada en Chrome Web Tool. Y tal vez pueda preguntar, por ejemplo, por qué es el descubrimiento de solicitudes SCP, bla, bla, bla. Y aquí puedes chatear con él para básicamente mejorar tu aplicación e intentar solucionar tu problema.

Déjame cerrar esta parte. Luego, lo que podemos hacer es también volver a esta parte. Y no sé. Déjame cerrar esto. Lo que podemos hacer es básicamente analizar nuestro panel de rendimiento. Y lo que podemos hacer es básicamente agregar etiquetado dentro del panel. Por ejemplo, podemos agregar una anotación, necesita ser más rápido. Y tal vez queramos básicamente vincular este con este. Y agregar otra etiqueta. Por ejemplo, cargar esto después del enlace en la entrada.

Algo así. Luego, lo que podemos hacer es, ok, hice todo mi trabajo con este panel. Quiero compartir mis pensamientos con el resto del equipo. Puedo guardar la traza usando la anotación. Guárdalo donde quieras. Y envíalo a otros compañeros de equipo. Los otros compañeros de equipo pueden abrir el panel de rendimiento y, como puedes ver, pueden importar Tracer. Y obtuvieron básicamente el mismo Tracer que ya tengo dentro de mi página anterior. Y tal vez el otro desarrollador ahora pueda trabajar para implementar mi solicitud. ¡Fantástico! Ok, ahora es el momento de saltar al terminal para ver el servidor MCP. Si voy a Visual Studio Code aquí. Déjame cerrarlo y volver a abrirlo. Usando Gemini o Copilot o lo que quieras, puedes configurar tu servidor MCP con el Chrome DevTool. Es bastante tonto.

El servidor MCP para Chrome DevTool es solo una configuración de Chrome DevTool, comando y selección. Y este es el argumento. Nada especial. Y lo que puedes hacer aquí es intentar preguntar algo al LLM para básicamente obtener información de tu aplicación. Por ejemplo, lo que puedo hacer es usar el servidor MCP de Chrome DevTool para probar el rendimiento de esta página. Así que, esta es mi página. Déjame hacer esto. Habilitar servidor MCP. Ahora, en otro, no puedes verlo, pero tengo otro Chrome abierto por los DevTools. Y como puedes ver, ahora está básicamente rastreando información. Y después de eso, obtuve algo de información sobre el rendimiento de esta página.

Y tal vez, no sé, ¿te gustaría ir a verlo? Sí. Porque como puedes ver, hay mejoras que se pueden hacer de alguna manera. Intentó básicamente estimar la prioridad y bla, bla, bla. En algún momento, probablemente, también puedes obtener el código corregido por su idea para mejorar básicamente tu aplicación. Déjame hacer eso. En algún momento, debería volver al archivo, un archivo, agregar la prioridad i, y cambiar una especie de retraso que tengo dentro de la página. Ahora, déjame investigar la discrepancia.

Bien, en algún momento, probablemente obtendremos el resultado. Ahora, es hora de pasar a la conclusión. Así que, déjame volver aquí. Hoy vimos algunas características de Chrome DevTools y cómo básicamente usarlas para verificar nuestra aplicación e intentar mejorarlas. Así que, si quieres aprender más sobre Chrome DevTools, la documentación es increíble. Y si quieres ver algo, el canal de YouTube Chrome for Developer contiene algunos videos increíbles. También algunos videos prácticos. Así que, si quieres aprender más, estos dos son los mejores enlaces para ti. Y eso es todo. Espero que lo disfrutes. Espero que continúes aprendiendo más durante esta conferencia. Y muchas gracias. Estos son mis contactos. Si quieres hablar conmigo, están abiertos. Y gracias de nuevo. Adiós.