Supercarga Tu Depuración Con las Nuevas Características en Chrome Devtools

Hola a todos. Soy Eva. Y soy Bari. Solo en caso de que no estuviera claro quién es quién. Gracias por volver después de la pausa para el café. Sé que es un poco tarde en el día, pero espero que aún tengan un poco de energía para toda la magia de DevTools que vamos a mostrarles hoy con Bari. Así que, sí, empecemos.

Hemos visto muchas charlas interesantes hoy. Y una de las conclusiones universales que podemos sacar de ellas es que el desarrollo web se está volviendo cada vez más, cada vez más complejo, especialmente con el auge de las herramientas y procesos de IA. El panorama de herramientas para desarrolladores está evolucionando muy rápido. Y Chrome DevTools no es diferente. Evolucionan tan rápido que a veces es difícil para nosotros, los desarrolladores, mantenernos al día.

De hecho, la investigación muestra que, como desarrolladores, en realidad nos desviamos mucho de los flujos de trabajo que conocemos y nos gustan. Somos un grupo eficiente y orientado a tareas. Realmente nos gusta ceñirnos a lo que nos gusta y a lo que conocemos, incluso si eso significa que perdemos algunas ganancias de productividad más adelante. Especialmente en una herramienta compleja como DevTools, las nuevas características que se introducen de manera incremental a veces son difíciles de notar.

Incluso cuando están ahí en la interfaz de usuario, justo frente a nuestros ojos, nuestra ceguera entrenada nos enseña cómo simplemente evitarlas. Y una conferencia como esta es una gran oportunidad para que todos demos un paso atrás, tomemos una nueva perspectiva y absorbamos toda la novedad que se ha introducido.

En esta charla, intentaremos inspirarte a probar todas las nuevas características que se han añadido a Chrome DevTools recientemente y a obtener un impulso de productividad como resultado. Hoy, vamos a hablarte un poco sobre muchas de las diversas mejoras que hemos estado haciendo en DevTools, principalmente en el espacio de depuración de rendimiento y también algunas ideas emocionantes de IA más adelante. Porque seamos honestos, ¿qué es una charla de conferencia hoy si no involucra IA?

Así que empecemos con algunas actualizaciones que son cercanas y queridas para mi propio corazón, las mejoras del panel de rendimiento. En los últimos años, hemos reimaginado completamente el panel de rendimiento para hacerlo mucho más fácil de encontrar y solucionar problemas de rendimiento. Así que quiero profundizar y mostrarte algunas de las cosas en las que hemos estado trabajando. Cualquiera que haya usado un panel de rendimiento antes sabrá que es un panel bastante intimidante.

Una traza de rendimiento incluye una gran cantidad de datos, y es realmente genial para poder profundizar en ese problema, pero es realmente abrumador, particularmente para los nuevos usuarios, y toma un largo tiempo realmente entender cómo usarlo correctamente. Bueno, queríamos solucionar eso, pero al mismo tiempo no arruinar la experiencia para todos esos desarrolladores hardcore, usuarios avanzados que dependen de esta complejidad. Así que hemos abordado el problema con una serie de cambios en el panel que creemos que resuelven ese problema de intimidación, y vamos a hablar de ellos hoy. Y todo comienza cuando abres por primera vez el panel.

Esto es lo que solías ver, un gran espacio vacío sin mucha información en absoluto, y solo te decía que hicieras una traza de rendimiento completa. Queríamos una introducción más suave al análisis de rendimiento, algo que no requiriera tomar una traza de inmediato, incluso antes de saber qué estás mirando. Lo llamamos la pantalla de métricas en vivo, y es la primera mejora de la que vamos a hablar hoy. Ahora, cuando abres el panel de rendimiento, esto es lo que ves. Te mostrará inmediatamente algunos detalles sobre el rendimiento de la página que estás visitando. Y realmente es en vivo. A medida que haces clic, escribes e interactúas con la página, y te desplazas hacia abajo, e incluso haces clic en otras páginas, el panel se actualiza continuamente con tus métricas de rendimiento. Esto te ayuda a identificar exactamente qué cuellos de botella de rendimiento tienes, ya sea en la carga de la página o a través de interacciones particulares.

La pantalla de métricas en vivo está centrada en los tres core web vitals. Estas son tres métricas que Google introdujo hace cinco años para realmente medir, dar un resumen rápido de cómo está funcionando tu página. Tenemos LCP, o large contentful paint, que es la métrica de carga, y muestra cuánto tiempo tomó desde tu clic hasta que se mostró la parte más grande del contenido en la página. CLS, o cumulative layout shift, indica cuánto se movió y saltó el contenido, lo cual es realmente bastante molesto. Siempre que cargas una página, y comienzas a leer, y un anuncio aparece, y pierdes tu lugar, y te preguntas, ¿qué está pasando? Y finalmente, interaction to next paint, que indica cuán receptivo es tu sitio web a las interacciones. Cuando haces clic en algo, ¿recibes inmediatamente algún tipo de retroalimentación visual, o toma un tiempo y ni siquiera estás seguro si el clic ha sido registrado?

Está todo en verde. Bueno, Barry, está todo en verde y bonito, porque tal vez lo estés desarrollando en tu elegante laptop y en una internet de alta velocidad. ¿Estás seguro de que nuestros usuarios están experimentando lo mismo en sus dispositivos reales? Hoy hemos escuchado de Alex cómo se ve en la vida real, ¿verdad? Nosotros sabemos que hay una desconexión entre los desarrolladores, lo que ven en sus potentes laptops durante el proceso de desarrollo, y lo que los usuarios ven en sus dispositivos.

De hecho, una gran parte de la iniciativa Core Web Vitals fue convencer a los propietarios de sitios sobre la importancia de usar datos de campo, que son medidos por usuarios reales en sus dispositivos reales. Ahora, hemos hecho que sea realmente, realmente fácil ver estos datos de usuarios reales directamente en DevTools en el panel de rendimiento. Puedes usar el botón en la parte superior derecha para activar esos datos de campo. Los datos provienen de Crux, el Informe de Experiencia del Usuario de Chrome. Es una fuente de experiencias de usuarios reales anónimas recopiladas por Chrome.

Una vez que lo configuras en ese campo, los datos se extraen de Crux. Y DevTools mostrará automáticamente las métricas de campo junto a tus métricas locales para la URL que estás viendo actualmente. Si desarrollas en un host local y no hay una URL real de la que hablar puedes mapear tu host local a tu URL de producción para aún obtener esos números coincidentes junto a cada uno. Esto nos permite comparar las métricas de rendimiento que estamos viendo con lo que nuestros usuarios reales están viendo. Oh, y como puedes ver, tal vez la carga sea un poco más lenta para los usuarios reales que no están en laptops de alta gama.

Oh, y como puedes ver, tal vez la carga sea un poco más lenta para los usuarios reales que no están en laptops de alta gama. Y esos son los datos de escritorio. Pero cuando cambiamos a móvil, automáticamente cargamos los datos móviles y puedes ver que es aún peor. Así que en este punto, sabemos que tenemos dos problemas que resolver, nuestro LCP y nuestro INP. Afortunadamente, puedes configurar tus DevTools para actuar más como lo que mejor emula lo que tus usuarios están viendo realmente. Usa el panel de configuración a la derecha.

Si hacemos zoom, puedes ver que, para empezar, los datos de Crux te dicen exactamente el desglose de tu sitio web y tus visitantes del sitio web. Aquí, vemos que la mayoría de nuestros visitantes están en móvil. Y eso es bastante normal en estos días. Como dijo Alex anteriormente, estamos en un mundo primero móvil. También nos dice que el 75% de nuestros usuarios están en 3G lento, limitación de 4G lento. Así que en lugar de tener que adivinar qué hacer, puedes usar tus datos reales para establecer eso. Así que vamos a establecer eso.

Y también vamos a establecer alguna limitación de CPU aquí. Ahora, recomienda una desaceleración de 4X, pero para ser honesto, eso es solo un valor predeterminado. No explica exactamente por qué estás haciendo eso. Ahora, estos datos que vamos a establecer aquí no provienen de Crux porque no tenemos esos datos allí. Pero tenemos esta bonita opción de calibrar que hemos añadido en la parte inferior. Y cuando haces clic en eso, te dará esta opción y realmente calculará algunas calibraciones para tu laptop. Así que simplemente ejecutas la calibración. Ejecutará un procesamiento intenso, verá qué tan rápido es tu computadora y luego sugerirá algunos multiplicadores personalizados para que uses.

Aquí, decimos, vemos que se recomienda una desaceleración de 3X para mi laptop para un dispositivo de gama media. Así que elegimos eso. Y luego, cuando recargamos la página, vemos que nuestras métricas locales coinciden más estrechamente con las métricas de campo que vimos que nuestros usuarios estaban obteniendo. Así que en este punto, ahora estamos en un buen lugar para realmente depurar este rendimiento porque deberíamos ser capaces de replicar exactamente lo que están viendo.

Así que el trazado de rendimiento puede darte en realidad mucha más información que la pantalla de métricas en vivo sola para realmente ayudarte a entender los problemas de rendimiento. Puede que tarde un poco más en grabar, así que es mejor usar las métricas en vivo que acabo de mostrarte para hacer algunas verificaciones rápidas o experimentación y solo grabar el trazado completo cuando quieras profundizar en algún problema específico. Puedes grabar el trazado usando los botones en la parte inferior derecha, o también hay disponibles dos accesos directos más pequeños en la parte superior izquierda para tu conveniencia.

Puedes grabar la interacción específica del usuario como una serie de clics o un desplazamiento usando el botón de grabar o trazar una carga de página completa usando grabar y recargar. Vamos a optar por grabar y recargar por ahora. Después de unos segundos, se te presentará esto. Y digo esta vista detallada y un poco aterradora. Ahora, hemos hecho un montón de mejoras para intentar hacer esta vista más útil y facilitar la navegación por el... Oh, lo siento. No es... Para facilitar la navegación por esta vista de trazado. Algunas de estas se muestran en el video.

No vamos a tener tiempo para cubrir todas estas hoy, pero consulta las publicaciones del blog al final y algunas de las otras publicaciones del blog en esta serie para obtener más detalles sobre eso. Y la razón por la que no vamos a tener tiempo es que quiero hablar sobre una mejora particular que hemos hecho con el panel de Perspectivas de Rendimiento. Muchos de ustedes pueden estar familiarizados con Lighthouse, que presenta un resumen de la experiencia de tu página, incluyendo el conocido puntaje de rendimiento. Así como esos puntajes, Lighthouse tiene una gran cantidad de datos en sus auditorías de rendimiento. Pero Lighthouse no puede mostrarte los datos de rendimiento profundos que muestra la vista de trazado. Y alternar entre el panel de Lighthouse y el panel de Rendimiento es un poco molesto, para ser honesto.

¿Qué pasaría si pudiéramos unir esas dos cosas? Y eso es exactamente lo que hace la barra lateral de Lighthouse... Lo siento, la barra lateral de Perspectivas. Obtienes una serie de perspectivas aquí al estilo de Lighthouse... Lo siento, obtienes una serie de perspectivas al estilo de Lighthouse en esta barra lateral. Y están listadas en un orden aproximado de lo que pensamos que es una prioridad para que mires aquí. Y no solo transferimos estas perspectivas de Lighthouse. Las revisamos, retiramos algunas antiguas, fusionamos algunas, intentamos hacerlas más útiles. Así que hicimos una auditoría completa de Lighthouse, si se quiere, y llegamos a mejores perspectivas. Y ahora estamos trayendo esas perspectivas de vuelta a Lighthouse.

Porque queremos la misma experiencia ya sea que estés mirando el soporte de Lighthouse o la vista de trazado, en lugar de esta experiencia disjunta que solías tener. Pero lo realmente poderoso de las perspectivas en el panel de Rendimiento es que las perspectivas en la vista de trazado son completamente interactivas. Hacer clic en cualquiera de las perspectivas automáticamente amplía el trazado al intervalo de tiempo apropiado. Filtra los datos irrelevantes y resalta los datos importantes. Incluso superponemos datos adicionales, como subpartes de LCP, para ayudarte a entender realmente la vista de trazado. Con Perspectivas de Rendimiento, puedes ver rápidamente las solicitudes que bloquean el renderizado, los cambios de diseño, los árboles de dependencia de red.

Puedes usar las perspectivas para acercarte exactamente a dónde un gran DOM está causando problemas de rendimiento en tu página o resaltar problemas de terceros o forzar problemas de reflujo. Pero aún no hemos terminado. Toda esa información es fantástica. Pero, ¿qué pasa si no sabes lo que realmente significa? Queremos hacer que la barra lateral de perspectivas sea lo más amigable posible, independientemente de tu nivel de experiencia. Así que para expertos en rendimiento, pero también para principiantes por igual. Así que añadimos una característica más amigable a esto, el botón Preguntar a la IA. Cuando haces clic en el botón Preguntar a la IA, te lleva directamente al panel de asistencia de IA. Y pasa a la IA para el contexto, los detalles de la perspectiva que estás mirando y la parte de la traza. Puedes tener una conversación con Gemini aquí, basada en los datos de tu página de rendimiento. Incluso puedes sugerir algunas preguntas de ejemplo pero eres libre de escribir cualquier pregunta que desees. Si es necesario, también tiene la capacidad de volver a la traza para obtener información adicional a medida que avanza tu conversación. Al final, deberías obtener una explicación exhaustiva junto con acciones sugeridas que puedes probar para solucionar el problema.

Hablando de asistencia de IA, puedes encontrarla en otros lugares también, en Chrome Por ejemplo, aquí estoy mirando una perspectiva específica, que se llama JavaScript Legado. Y aquí puedo ver el nombre del script que está causando algunos problemas en mi rendimiento. Pero no está claro para mí de inmediato qué script es o qué hace. Al hacer clic en el nombre del script, me lleva directamente al panel de fuentes. En el panel de fuentes, puedo ver el código fuente de ese script, pero aún me parece bastante críptico. Afortunadamente, puedo usar el pequeño ícono de SKI junto al script para hacer una pregunta directamente sobre el script. Por ejemplo, ¿qué hace o de qué es responsable? Aquí aprendí que es la parte central de la configuración de mi página de Next.js y es responsable de la ruta y el renderizado de mi aplicación de Next.js. De manera muy similar, en la misma perspectiva, puedo hacer clic en lugar del nombre, puedo hacer clic en el ícono, el ícono de red junto al nombre del script. Esta vez, me lleva al panel de red. Y aquí de nuevo, de una manera muy similar, puedo usar el mismo ícono de IA para invocar el panel de asistencia de IA. Y ahora, es mi solicitud de red la que se está pasando como contexto. Así que puedo hacer preguntas sobre encabezados, almacenamiento en caché, carga útil, seguridad, o obtener ideas de posibles mejoras relacionadas con la red. Puedes usar el aviso predefinido como punto de partida o crear tus propias consultas para llevar tu investigación más lejos. Como puedes ver, este panel de asistencia de IA es bastante versátil y puedes hacer mucho con él.

Ahora, con las nuevas capacidades de IA integradas en DevTools, incluso puedes corregir código directamente en DevTools. Echemos un vistazo a eso. Cuando inspeccionas un elemento en el panel de elementos, el pequeño ícono de IA te permite interactuar con Gemini y pedir consejo sobre el diseño o estilo de este elemento. Con avisos como, ¿puedes centrar este elemento en la página para mí? O, ¿por qué este texto se desborda de su contenedor? No solo puede darte un consejo práctico sino incluso producir un parche de código que solucionaría el problema.

Si eres más visual y prefieres usar imágenes en lugar de texto, ahora, gracias a la entrada multimodal, puedes hacerlo también. Aquí hay un ejemplo. Este es un sitio web. Y en este sitio web, tenemos algunas miniaturas de video listadas. Y notamos de inmediato que una de esas miniaturas destaca y no está recortada como las otras. Cuando con el ícono de cámara junto al aviso, puedo fácilmente tomar una instantánea de esa parte de la página para ayudar al elemento a destacar qué miniaturas debería arreglar por mí. Gemini analiza la página y me propone un parche.

Con solo unos pocos clics, resolvemos el problema y ahora todas las miniaturas están bien recortadas y alineadas. Gemini propuso un parche de código que hemos visto brevemente en la pantalla anterior. Así como ver los cambios en el flujo de conversación de IA, puedes ver el código que altera en la página resaltado en el panel de cambios. El cambio que hizo la IA en esta página es temporal, aunque, un poco similar a si estuvieras editando estilos a mano en el panel de Elementos.

Esto significa que si recargo la página, los cambios desaparecerán y, ya sabes, es un poco triste, así que decidimos cambiar eso. Echemos un vistazo a eso. Digamos que el sitio web que estaba desarrollando hace un momento con la ayuda de asistentes de IA es en realidad un proyecto local y se ejecuta en mi localhost. En mi caso, la carpeta que contiene mi proyecto se llama DevTools Cinema. Ahora, podemos llevar la asistencia de IA al siguiente nivel.

Digamos que estoy satisfecho con el parche que la IA sugirió anteriormente y me gustaría guardarlo en mi base de código local. Toda la magia ocurre en la sección de cambios inseguros al final de la conversación de IA. Debido a que mi carpeta local está conectada al Espacio de Trabajo de DevTools, puedo ver el nombre de la carpeta, el DevTools Cinema, y este ingenioso botón de aplicar al espacio de trabajo en la parte inferior de la sección. Cuando hago clic en él, gracias a los mapas de origen y un poco más de magia de IA, el agente de IA encontrará el archivo más apropiado y el lugar adecuado en ese archivo para aplicar mi solución, incluso si mi código está compilado desde SAS o utiliza un marco de JS como Next.js, por ejemplo. Esto me permite proceder con el cambio a los archivos locales y hacer que mi solución sea permanente.

Entonces, ¿cómo podemos configurar ese espacio de trabajo? Generalmente, necesitas conectar la carpeta local a DevTools y otorgar los permisos de escritura apropiados. Puedes hacerlo manualmente en la pestaña de espacio de trabajo en el panel de fuentes, o de la misma manera que lo harías en cualquier IDE moderno, o puedes confiar en el nuevo mecanismo de descubrimiento automático de espacios de trabajo. Funciona así, necesitas un archivo JSON que describa una ruta a tu carpeta local. Si estás en localhost y expones este JSON en la URL particular que puedes ver en la pantalla ahora mismo, será detectado automáticamente por DevTools. Y se mostrará una opción para conectar en el panel de fuentes. Puedes agregar tal punto final a tu servidor local tú mismo o puedes usar una de las integraciones. Por ejemplo, Angular ya tiene soporte incorporado y para aplicaciones basadas en V, hay un plugin que puedes usar. Nuxt también mostró interés y esperamos incorporar más marcos pronto.

Para aprender más sobre lo que es posible con la asistencia de IA en DevTools, asegúrate de visitar la página de inicio de asistencia de IA en developer.chrome.com sección de DevTools. Y lo grandioso de esto es que no te estamos mostrando el futuro. Estas características están todas disponibles en la versión de producción de Chrome ahora, desde Chrome 1.37, que es la versión de producción que todos deberían estar usando. Están disponibles sin suscripción a Gemini, así que realmente te animamos a que lo pruebes, inténtalo. Si has tenido miedo de entrar en la trazabilidad de rendimiento antes, juega un poco, debería ser mucho más amigable. Y las características de IA no son solo características de IA que estamos lanzando allí por el simple hecho de hacerlo, realmente las encontramos bastante útiles para depurar y obtener ayuda para entender tu código. Si usas la asistencia de IA, necesitarás estar conectado y habilitarla explícitamente en la configuración.

La primera vez que intentes usarla, te dirigirá a la pantalla para activar estas configuraciones. Y si estás en una política empresarial, también puedes usarla para controlar la función si prefieres desactivarla. Todas las funciones de IA aún están en desarrollo activo, así que queremos escuchar tus comentarios. Juega con ellas, échales un vistazo. Si descubres algún error, cualquier problema, háznoslo saber ya sea en redes sociales, contactando a Eva o a mí, o utilizando nuestro rastreador de errores público.

Bueno, hoy cubrimos muchos temas. Hablamos sobre mejoras en el panel de rendimiento, incluyendo métricas en vivo, datos de campo, configuraciones de entorno y perspectivas de rendimiento. Te mostramos la función SKI dedicada en las perspectivas y cómo la asistencia de IA puede ayudarte en las fuentes y los paneles de red. Finalmente, has visto cómo la IA puede corregir algunos errores de estilo y generar código que puede ser guardado en una masterclass local. Realmente esperamos que hayas disfrutado la charla y que tengas la oportunidad de probar todas las nuevas funciones la próxima vez que abras DevTools. Pruébalo y, con suerte, verás un aumento en la productividad como resultado.

Para mantenerte al día, por favor suscríbete a nuestro canal de YouTube y revisa regularmente Developer Chrome para nuestras actualizaciones. He sido Eva y soy principalmente DevNook en redes sociales. Y he sido Barry, y puedes encontrarme en TuneTheWeb y en los sitios web más sociales. Esperamos que esto haya sido útil para ti, y creo que tenemos un poco de tiempo para preguntas. También te animaría a que te acerques a nosotros después en la sección de preguntas y respuestas donde podemos mostrar esto funcionando en tu sitio. Muchas gracias.

Hay bastantes preguntas sobre datos sensibles y IA, como podrías haber esperado. Así que agrupemos esas un poco. Una de ellas es, al usar el botón de IA, ¿cómo puedo estar seguro de que no se envían datos sensibles? Así que la IA que usamos está en la IA basada en la nube. Hemos experimentado con IA en el dispositivo que Tom mencionó anteriormente, pero simplemente no es lo suficientemente potente para muchas de las características que estamos considerando aquí. Así que sí, envía datos a Google.

Por eso tienes que optar por ello y aceptar esas configuraciones. En la mayoría de los casos, son los datos públicos que ves en el sitio web. Obviamente, si estás desarrollando en localhost, es separado allí. Y sabemos que algunas empresas tienen algunas restricciones, razón por la cual tenemos esa política empresarial, que, por cierto, también puedes establecer tú mismo.

No necesitas estar en una empresa para establecer eso. Pero sí, estará enviando cosas allí. Hay una página detallada sobre nuestra política de privacidad, exactamente para qué usamos estos datos. Perfecto.

Muchas gracias. Veamos cuál es la siguiente pregunta. Hay un par de preguntas más como, ¿cómo puedo asegurarme de que esto no se envíe a la IA? Intentamos hacerlo muy explícito. Necesitas estar conectado y realmente necesitas habilitar esto proactivamente en la configuración de DevTools para que estés muy bien informado sobre lo que se está enviando y en qué momento, para que puedas ajustarlo a tus preferencias. Y nuevamente, te recordaría que, en un sitio web, estos son datos públicos de todos modos. Puede que no te guste que sea público. Obviamente, si tienes tu código fuente mapeado, entonces puede haber comentarios y cosas que no quieras hacer allí. Pero para la mayoría del rastreo de sitios web, es público de todos modos.

Muy bien. Muchas gracias. ¿Hay planes para hacer mejoras en el panel de memoria heap también? El seguimiento de fugas de memoria sigue siendo un poco engorroso. Creo que ya recibimos esta pregunta anteriormente. Te hacen esa pregunta mucho, Barry. Sí, exactamente. Las fugas de memoria son algo difícil de rastrear. No estoy al tanto de ningún trabajo inmediato que se esté realizando en este momento. Es un poco, no quiero decir que sea una característica de nicho porque muchas personas tienen problemas con eso.

Pero para la mayoría de las personas, lo que tenemos allí funciona y son realmente personas hardcore las que realmente quieren cambios adicionales en esto normalmente. Y sí, en este momento, eso no se está priorizando en comparación con algunas de las otras características en las que estamos trabajando. He visto que esa pregunta ha surgido un par de veces, sin embargo. Así que el enlace que compartimos para el error de DevTools, te animo a que lo presentes como una pregunta o como una solicitud de característica y luego yo lo votaré. Y el equipo es muy receptivo a los comentarios. Así que si es importante para muchos desarrolladores, definitivamente se verá en algún momento. Absolutamente. Y particularmente si tienes sugerencias sobre lo que quieres mejorar, simplemente hacer esto mejor significa que podríamos intentar algo que no funcione para ti. Así que, oye, ningún depurador hace esto. Y sería fantástico si solo Chrome DevTools hiciera algo similar. Eso es un comentario mucho más accionable.

Genial. ¿Puedo enviar los cambios de IA a un proyecto en un contenedor de desarrollo? Así que ciertamente puedes hacer los cambios en el navegador. Quiero decir, son como si estuvieras editando localmente y cosas así. Si eso puede volver al contenedor de desarrollo depende de si la ruta del archivo está realmente mapeada y es visible por el navegador para el código fuente o si está completamente cerrado y solo lo estás ejecutando con un puerto abierto. Como en muchos casos, Docker utiliza tu sistema de archivos local y una parte particular de eso. Así que en ese caso, nuevamente, mientras tenga el acceso correcto, debería poder volver a ello.

Bien. ¿Hay una API en Chrome que frameworks de prueba como Playwrights puedan usar para analizar el rendimiento en pruebas de automatización? Aún no. Bueno, en Chrome, aún no. Pero eso es algo en lo que tenemos un interés activo y estamos haciendo un montón de trabajo en eso. Y espero que tengamos algunas actualizaciones sobre eso más adelante en el año. Dicho esto, hay muchas otras herramientas que usamos. Tenemos una API de PageSpeed. Tenemos la herramienta Lighthouse CI. Pero sí, para trazas de rendimiento, mantente atento a este espacio.

Oh, eso es emocionante. Quizás el próximo año, en JS Nation, tengamos algunas noticias al respecto. Quizás, ¿qué modelo Gemini se utiliza en DevTools? Generalmente, esto cambia. Así que hablamos con Gemini y Gemini está evolucionando bastante rápido. Siempre será Gemini, pero la versión exacta diferirá dependiendo de la versión del navegador y el marco de tiempo particular. Perfecto. ¿Qué características son parte de Chromium y cuáles son específicas de Chrome? Supongo que esta es la persona que hace la pregunta, no yo. ¿Las ideas de IA están solo en Chrome? Sí, así que las mejoras de rendimiento que te mostré están en la base del núcleo de Chromium. Tenemos un DevTools compartido. Algunos de ellos hacen cosas ligeramente diferentes. Edge le gusta usar diferentes íconos, pero la mayor parte de la base de código es la misma. Así que están disponibles en todas partes. Y sí, tienes razón. Las características de IA del momento son específicas de Chrome. Creo que escuchamos antes que Thomas estaba diciendo que Edge está mirando esas y espero que construyan sobre ellas y usen sus IA y de manera similar para otros.

Pero sí, las características de IA en este momento son completamente nuevas. Y literalmente se lanzaron solo en Chrome en este momento, no en Chromium. Muchas gracias.

¿Puedo simular una conexión de socket lenta en el paso de rendimiento? Ha habido, oh, me estás lanzando aquí. Definitivamente hay algunos cambios que hemos hecho en la pestaña de limitación para sockets web. Voy a decir que sí, y está en nuestra documentación. No puedo recordar exactamente, pero estoy seguro de que cambiamos allí. Y estoy molesto porque no puedes hacerlo para cosas generales, solo para sockets web. Así que sí, los sockets web están un poco por delante del juego aquí. Pero revisa nuestra documentación, porque hay algo al respecto. Creo que fue una publicación en el blog sobre eso.

Quiero decir, creo que ese es el beneficio de la parte de preguntas y respuestas, donde realmente puedes abrir tu laptop y verificar que lo que estás diciendo es correcto. Genial. Bien. Veamos si podemos hacer una más aquí. Quizás haya alguna que te llame la atención. Oh, sí, eso podría ser interesante. Bueno, es Gemini entonces. Pero, ¿qué se utilizó para el entrenamiento de IA para producir esos consejos y explicaciones? ¿En qué lo entrenas? Así que pasamos la ventana de contexto que es lo que estamos haciendo. Así que haces clic en un elemento. Pasamos ese elemento. Elegimos un poco de la traza. Pasamos el poco de la traza o los datos de perspectiva que se muestran allí. De manera similar, el panel de fuentes enviará, si es posible, un archivo fuente completo.

De nuevo, estamos obteniendo límites de contexto para archivos realmente grandes. En cuanto al modelo en sí, eso está más allá de mí. Y esos son los genios de IA de Google que, desafortunadamente, no están representados en el escenario hoy. ¡Hey! Está bien. Lo siento. Generalmente, los datos que están en la ventana de contexto, que son parte de la traza o tu prompt o algunos datos adicionales que estás poniendo en tu prompt, no se utilizan para fines de reentrenamiento. No se utiliza para entrenar el modelo. Pero el agente de rendimiento especialmente tiene la capacidad de sondear, lo que significa que si no recibe suficiente información para resolver tu consulta en el primer lote de contexto y tu prompt, volverá y solicitará más datos adicionales de esa traza de rendimiento particular. Así que tiene acceso a diferentes partes de la traza de rendimiento que ya está grabada. Puede solicitar esto dependiendo del caso de uso. Sí, y creo que la pregunta es sobre el entrenamiento, pero para desviarnos de eso, utiliza lo que has seleccionado y hecho. Así que si estás haciendo clic en un elemento y diciendo, centra este elemento, y luego es un poco natural tener una conversación con él y decir, oh, también cambia eso. Puedes darle mucha más información y contexto haciendo clic en ese elemento y reenfocándolo hacia una parte diferente del DOM o una solicitud de red diferente, lo que sea. Porque eso es lo que utiliza para realmente averiguar las respuestas. De hecho, lo destacamos en la interfaz de usuario. Así que al lado del prompt, ves qué elemento está seleccionado o qué insight está seleccionado o qué contexto, por ejemplo, solicitud de red está seleccionado. Para que sepas, como tus prompts deberían estar más o menos en el área de especialización de ese elemento particular que estás preguntando. Si le preguntas, ¿quién ganó el último juego del Super Bowl? Probablemente no pueda responder. Muy bien, gracias de nuevo por tu charla y gracias por tus respuestas. Y si tu pregunta no fue hecha, por favor únete a Ewa y Barry en el lugar de preguntas y respuestas para asegurarte de que tu pregunta sea respondida. Muchas gracias. Muchas gracias por tu tiempo.