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

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

¡Chrome DevTools acaba de recibir un impulso turbo! El equipo de Chrome DevTools ha estado lanzando nuevas características a un ritmo feroz durante el último año, incluyendo una revisión completa del Panel de Rendimiento con Métricas en Vivo en tiempo real y Perspectivas impulsadas por IA que expondrán cuellos de botella que nunca supiste que existían.

Olvídate de las tediosas búsquedas en la documentación y de las cacerías en foros; ahora, la IA te asiste directamente dentro de los paneles de Elementos, Rendimiento, Red y Fuentes, manteniéndote en el flujo. Utiliza las nuevas herramientas de alineación y colaboración para compartir fácilmente tus observaciones y tu destreza en depuración con tu equipo y partes interesadas.

Desataremos todo el potencial de estas características revolucionarias, revelando gemas ocultas y atajos que transformarán tu flujo de trabajo de depuración de un esfuerzo a un sprint supercargado. Prepárate para codificar más rápido, depurar de manera más inteligente y construir experiencias que vuelen.

This talk has been presented at JSNation 2025, check out the latest edition of this JavaScript Conference.

Barry Pollard
Barry Pollard
Ewa Gasperowicz
Ewa Gasperowicz
29 min
12 Jun, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Eva y Bari introducen la complejidad del desarrollo web y enfatizan la naturaleza en evolución de DevTools, discutiendo las ganancias de productividad a través de nuevas características. La charla cubre mejoras en la depuración de rendimiento y cambios amigables para el usuario en el panel de rendimiento. La pantalla de métricas en vivo ofrece información en tiempo real, integrando datos de usuarios reales para la comparación de rendimiento. Configurando DevTools para una emulación de usuario precisa y aprovechando las capacidades de trazado de rendimiento para la depuración. Mejorando la experiencia del usuario con perspectivas de IA y asistencia visual, configurando el espacio de trabajo de IA en DevTools. Abordando preocupaciones sobre la privacidad de los datos y el control del uso de IA. Mejoras en la API de Chrome DevTools y el modelo Gemini, características de IA específicas de Chrome, limitación de sockets web y sondeo de agentes de IA en el contexto de rendimiento.

1. Introducción a la masterclass de DevTools

Short description:

Eva y Bari introducen la complejidad del desarrollo web, enfatizando la naturaleza en evolución de DevTools. Destacan los desafíos que enfrentan los desarrolladores al adoptar nuevas características y la importancia de explorar las ganancias de productividad a través de nuevas perspectivas. La charla cubre mejoras en la depuración de rendimiento y cambios amigables para el usuario en el panel de rendimiento para abordar preocupaciones de usabilidad.

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.

2. Explorando las Actualizaciones de Chrome DevTools

Short description:

La charla discute cómo inspirar a los usuarios a explorar nuevas características de Chrome DevTools para obtener ganancias de productividad. Se centra en las mejoras de depuración de rendimiento y las ideas de IA, enfatizando los cambios amigables para el usuario en el panel de rendimiento.

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.

3. Mejorando el Análisis de Rendimiento con Métricas en Vivo

Short description:

Una traza de rendimiento es esencial para la investigación profunda de problemas, aunque puede ser abrumadora para los nuevos usuarios. La introducción de la pantalla de métricas en vivo proporciona información de rendimiento en tiempo real basada en los core web vitals, mejorando la comprensión del usuario y la identificación de cuellos de botella en el rendimiento.

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?

4. Integrando Datos de Usuarios Reales en DevTools

Short description:

Los desarrolladores necesitan considerar las experiencias de usuarios reales utilizando datos de campo de Crux en DevTools para la comparación de rendimiento.

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.

5. Configuring DevTools for User Emulation

Short description:

Configurando DevTools para una emulación de usuario precisa utilizando datos de Crux y estableciendo limitación de CPU para el análisis de rendimiento.

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.

6. Aprovechando las capacidades de trazado de rendimiento

Short description:

Explorando las capacidades de trazado de rendimiento para una depuración precisa y utilizando métricas en vivo para verificaciones rápidas y análisis en profundidad.

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.

7. Integrando Perspectivas de Rendimiento con Lighthouse

Short description:

Uniendo los paneles de Lighthouse y Rendimiento para obtener perspectivas mejoradas y vistas de trazado interactivas.

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.

8. Enhancing User Experience with AI Insights

Short description:

Mejorando la experiencia del usuario con asistencia de IA para perspectivas y análisis de scripts.

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.

9. Enhancing Development with Visual AI Assistance

Short description:

Usando entrada multimodal para asistencia visual y guardando parches sugeridos por IA en la base de código local.

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.

10. Configurando el Espacio de Trabajo de IA en DevTools

Short description:

Configurando el espacio de trabajo para guardar parches de IA en la base de código local y explorando las posibilidades de asistencia de IA en DevTools.

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.

QnA

DevTools Talk Conclusion

Short description:

Temas cubiertos: mejoras en el panel de rendimiento, función SKI, beneficios de la asistencia de IA y aumento de productividad en DevTools. Suscríbete para actualizaciones y conéctate con Eva y Barry. Sesión de preguntas y respuestas disponible para más demostraciones.

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.

Data Privacy and AI Usage in DevTools

Short description:

Abordando preocupaciones sobre datos sensibles y el uso de IA en DevTools. La IA basada en la nube envía datos a Google con configuraciones de opt-in. Los datos públicos se transmiten principalmente, con información detallada sobre la política de privacidad disponible. La habilitación proactiva en la configuración de DevTools asegura el control de datos. Las mejoras en el panel de memoria heap no son inmediatas, ya que el seguimiento de fugas de memoria sigue siendo un desafío.

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.

Improving AI Data Control and Memory Panel

Short description:

Asegurando el control de datos en la configuración de DevTools para el uso de IA en sitios web. Las mejoras en el panel de memoria heap no son inmediatas; enfoque en otras características. Fomentando la presentación de comentarios de los usuarios para solicitudes de errores y mejoras en DevTools.

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.

Chrome DevTools API and Gemini Model

Short description:

Enviando cambios de IA en el contenedor de desarrollo. No hay API de Chrome para Playwrights aún; interés continuo en herramientas de análisis de rendimiento. Evolución del modelo Gemini en DevTools; características de IA específicas de Chrome.

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.

AI Features and Web Sockets Throttling

Short description:

Nuevas características de IA en Chrome. Limitación para sockets web. Perspectivas de entrenamiento de IA en el modelo Gemini.

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.

AI Agent Probing and Context Usage

Short description:

Capacidad de Sondeo del Agente de IA en el Contexto de Rendimiento.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Una Guía del Comportamiento de Renderizado de React
React Advanced 2022React Advanced 2022
25 min
Una Guía del Comportamiento de Renderizado de React
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Concurrencia en React, Explicada
React Summit 2023React Summit 2023
23 min
Concurrencia en React, Explicada
Top Content
React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.
If You Were a React Compiler
React Summit US 2024React Summit US 2024
26 min
If You Were a React Compiler
Top Content
In this talk, the speaker aims to build an accurate understanding of how the new React compiler works, focusing on minimizing re-renders and improving performance. They discuss the concept of memoization and how it can be used to optimize React applications by storing the results of function calls. The React compiler automates this process by analyzing code, checking dependencies, and transpiling JSX. The speaker emphasizes the importance of being aware of memory concerns when using memoization and explains how the React compiler detects changes in function closure values. They also mention the Fibre Tree, which drives the reconciliation process and helps optimize performance in React. Additionally, the speaker touches on JSX transpilation, compiler caching, and the generation of code. They encourage developers to understand the code generated by the compiler to optimize specific sections as needed.
Haciendo Magia: Construyendo un Marco de Trabajo Primero-TypeScript
TypeScript Congress 2023TypeScript Congress 2023
31 min
Haciendo Magia: Construyendo un Marco de Trabajo Primero-TypeScript
Top Content
Daniel Rowe discusses building a TypeScript-first framework at TypeScript Congress and shares his involvement in various projects. Nuxt is a progressive framework built on Vue.js, aiming to reduce friction and distraction for developers. It leverages TypeScript for inference and aims to be the source of truth for projects. Nuxt provides type safety and extensibility through integration with TypeScript. Migrating to TypeScript offers long-term maintenance benefits and can uncover hidden bugs. Nuxt focuses on improving existing tools and finds inspiration in frameworks like TRPC.
Inside Fiber: la visión en profundidad que querías un TLDR para
React Summit 2022React Summit 2022
27 min
Inside Fiber: la visión en profundidad que querías un TLDR para
Top Content
This Talk explores the internals of React Fiber and its implications. It covers topics such as fibres and units of work, inspecting elements and parent matching, pattern matching and coroutines, and the influence of coroutines on concurrent React. The Talk also discusses effect handlers in React, handling side effects in components, and the history of effect handlers in React. It concludes by emphasizing the importance of understanding React internals and provides learning resources for further exploration.
Profundizando en Concurrent React
React Advanced 2022React Advanced 2022
29 min
Profundizando en Concurrent React
The Talk discussed Concurrent React and its impact on app performance, particularly in relation to long tasks on the main thread. It explored parallelism with workers and the challenges of WebAssembly for UI tasks. The concepts of concurrency, scheduling, and rendering were covered, along with techniques for optimizing performance and tackling wasted renders. The Talk also highlighted the benefits of hydration improvements and the new profiler in Concurrent React, and mentioned future enhancements such as React fetch and native scheduling primitives. The importance of understanding React internals and correlating performance metrics with business metrics was emphasized.

Workshops on related topic

Consejos sobre React Hooks que solo los profesionales conocen
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
Consejos sobre React Hooks que solo los profesionales conocen
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
La adición de la API de hooks a React fue un cambio bastante importante. Antes de los hooks, la mayoría de los componentos tenían que ser basados en clases. Ahora, con los hooks, estos son a menudo componentes funcionales mucho más simples. Los hooks pueden ser realmente simples de usar. Casi engañosamente simples. Porque todavía hay muchas formas en las que puedes equivocarte con los hooks. Y a menudo resulta que hay muchas formas en las que puedes mejorar tus componentes con una mejor comprensión de cómo se puede usar cada hook de React.Aprenderás todo sobre los pros y los contras de los diversos hooks. Aprenderás cuándo usar useState() versus useReducer(). Veremos cómo usar useContext() de manera eficiente. Verás cuándo usar useLayoutEffect() y cuándo useEffect() es mejor.
Diseñando Pruebas Efectivas con la Biblioteca de Pruebas de React
React Summit 2023React Summit 2023
151 min
Diseñando Pruebas Efectivas con la Biblioteca de Pruebas de React
Top Content
Featured Workshop
Josh Justice
Josh Justice
La Biblioteca de Pruebas de React es un gran marco para las pruebas de componentes de React porque responde muchas preguntas por ti, por lo que no necesitas preocuparte por esas preguntas. Pero eso no significa que las pruebas sean fáciles. Todavía hay muchas preguntas que tienes que resolver por ti mismo: ¿Cuántas pruebas de componentes debes escribir vs pruebas de extremo a extremo o pruebas de unidad de nivel inferior? ¿Cómo puedes probar una cierta línea de código que es difícil de probar? ¿Y qué se supone que debes hacer con esa persistente advertencia de act()?
En esta masterclass de tres horas, presentaremos la Biblioteca de Pruebas de React junto con un modelo mental de cómo pensar en el diseño de tus pruebas de componentes. Este modelo mental te ayudará a ver cómo probar cada bit de lógica, si debes o no simular dependencias, y ayudará a mejorar el diseño de tus componentes. Te irás con las herramientas, técnicas y principios que necesitas para implementar pruebas de componentes de bajo costo y alto valor.
Tabla de contenidos- Los diferentes tipos de pruebas de aplicaciones de React, y dónde encajan las pruebas de componentes- Un modelo mental para pensar en las entradas y salidas de los componentes que pruebas- Opciones para seleccionar elementos DOM para verificar e interactuar con ellos- El valor de los mocks y por qué no deben evitarse- Los desafíos con la asincronía en las pruebas de RTL y cómo manejarlos
Requisitos previos- Familiaridad con la construcción de aplicaciones con React- Experiencia básica escribiendo pruebas automatizadas con Jest u otro marco de pruebas unitarias- No necesitas ninguna experiencia con la Biblioteca de Pruebas de React- Configuración de la máquina: Node LTS, Yarn
Tipos avanzados de TypeScript para diversión y confiabilidad
TypeScript Congress 2022TypeScript Congress 2022
116 min
Tipos avanzados de TypeScript para diversión y confiabilidad
Workshop
Maurice de Beijer
Maurice de Beijer
Si estás buscando sacar el máximo provecho de TypeScript, este masterclass es para ti! En este masterclass interactivo, exploraremos el uso de tipos avanzados para mejorar la seguridad y previsibilidad de tu código TypeScript. Aprenderás cuándo usar tipos como unknown o never. Exploraremos el uso de predicados de tipo, guardias y verificación exhaustiva para hacer tu código TypeScript más confiable tanto en tiempo de compilación como en tiempo de ejecución. Aprenderás sobre los tipos mapeados incorporados, así como cómo crear tus propias utilidades de mapeo de tipos. Y comenzaremos a programar en el sistema de tipos de TypeScript utilizando tipos condicionales e inferencia de tipos.
¿Estás familiarizado con los conceptos básicos de TypeScript y quieres profundizar? Entonces únete a mí con tu computadora portátil en este masterclass avanzado e interactivo para aprender todos estos temas y más.
Puedes encontrar las diapositivas, con enlaces, aquí: http://theproblemsolver.nl/docs/ts-advanced-workshop.pdf
Y el repositorio que utilizaremos está aquí: https://github.com/mauricedb/ts-advanced