Chrome DevTools 2024: Debugging and Performance Optimization for React Developers

Hola a todos, ¿saben cómo es cuando estás trabajando en un componente de React y tú piensas para ti mismo, sabes, tal vez esto podría ser un poco mejor. Tuve esa experiencia con mi diapositiva de portada anoche, no dormí mucho, pero decidí jugar con esto un poco y quería mostrarte en qué pasé mi noche. Espero que valga la pena. Es solo una pequeña cosa breve.

Así que vamos a refrescar esto y presionar play. Si depurar es el proceso de eliminar errores, ¿significa eso que programar es el proceso de ponerlos? ¿Qué hay de nuevo en React y Chrome DevTools? Creo que las buenas herramientas son los socios silenciosos en cada historia de éxito. Me gustaría decir que la calidad de tus resultados a menudo depende de la calidad de las herramientas que usas. Y por eso es realmente importante asegurarse de que estás eligiendo las que te preparan para el éxito.

Ahora, como desarrolladores web, a menudo lidiamos con la complejidad a diario. Y en Chrome DevTools, nos hemos estado preguntando si la IA puede ayudar a transformar algo de esa complejidad con la que nos encontramos al depurar en algo de claridad al agregarla conscientemente donde creemos que puede agregar valor. ¿Qué tal si te ayuda a depurar y ajustar estilos? Así que acabamos de agregar un nuevo panel de Asistente de IA a DevTools para ayudarte con la interfaz de usuario. Y puedes chatear con nuestro modelo de IA Gemini. Así que aquí, lo que estamos haciendo es seleccionar un elemento. Puedo usar el panel de Asistencia de IA. Y puedo pedirle a la IA que haga cosas como ayudarme a ajustar estilos. En este caso, le estoy pidiendo que agregue un degradado al texto de ética sonora. Y va a ir. Está tratando de averiguar la mejor manera de abordar esto. Me dará alguna idea de cómo podría hacerlo. Así que me dará una solución. Y también me dará este pequeño botón, continuar, que me permite aplicarlo. Ahora casi lo tiene bien, pero parece que se necesita un poco de recorte de texto aquí. Así que solo vamos a decirle que tal vez necesitamos ajustar eso. Y en solo un segundo, presionamos continuar, y boom. Así que nos ayuda con eso. También podemos seguir iterando en esto, haciendo cosas como pedirle que ayude a hacerlo resaltar o hacerlo brillar un poco más. Y esto solo cambia cómo abordamos cosas como ajustar estilos y obtener información sobre nuestras páginas. ¿Qué tal explicar errores? Ahora tenemos una aplicación de ejemplo de React Stocks aquí. Está usando algunos datos. Y cuando hago clic en botones para ver más detalles sobre una acción, obtengo un error en la consola.

No estoy completamente seguro de por qué, pero puedo usar IA en la consola también para obtener un resumen tanto del problema basado en todo el contexto que está disponible para nosotros en DevTools desde el error de la fuente. Podemos sugerir algunas formas diferentes de resolver este problema. Así que tienes que hacer algunas correcciones a la lógica de manejo de detalles de acciones aquí. Pero afortunadamente, con el nuevo soporte de Gemini en DevTools, puedo explicar el error y obtener algunas correcciones que puedo aplicar de inmediato.

¿Qué viene después? Bueno, justo esta semana, después de la asistencia de IA, hemos intentado hacer esto aún más poderoso. Ahora puedes hacer preguntas sobre tus archivos fuente y el panel de fuentes, solicitudes de red y red, o incluso preguntarle sobre tus gráficos de llamas en el panel de rendimiento. Así que esperamos que puedas obtener respuestas instantáneas y esto te ayude en tu viaje de depuración. Se ve un poco así. Básicamente incluimos ese archivo o ese recurso como parte del contexto y puedes comenzar a interactuar con él junto con otros contextos que podemos incluir.

A continuación, extensibilidad. Así que la extensibilidad es un principio realmente importante para nosotros en Chrome. Y hay muchas extensiones geniales de Chrome DevTools que realmente ayudan a amplificar lo que es posible. Y eso incluye React DevTools. Así que algunos consejos y actualizaciones aquí. Primer consejo, realmente me encanta usar la función de resaltar actualizaciones en React DevTools. Así que tenemos una aplicación de React aquí. Es una aplicación de películas. Voy a ir al panel de componentes. Tengo React DevTools instalado. Y solo voy a configuraciones y puedo marcar resaltar actualizaciones cuando los componentes se renderizan. Y esto solo me ayuda a identificar renderizados innecesarios para que pueda optimizar el rendimiento de mi aplicación un poco más.

Verás estos simplemente brillando mientras interactuamos con la interfaz de usuario. A continuación, React DevTools ahora admite componentes de servidor a partir de la versión 6 y superiores. Escuché a una persona emocionada al respecto. Unos pocos más. Muy bien. Así que los componentes de servidor ahora son visibles en el árbol de componentes de DevTools. Se muestran con una insignia especial de servidor para distinguirlos de los componentes de cliente. Y esto te ayuda a identificar qué partes de tu aplicación están ejecutándose en el cliente o el servidor. Lo he encontrado realmente útil.

Si eres un desarrollador de Next.js, ahora también puedes obtener registros del servidor. Así que console log funciona de la misma manera que lo haría en el navegador, pero con una etiqueta de servidor. Y eso solo significa que puedes ver los registros del lado del servidor directamente dentro de la consola del navegador para que puedas depurar esas experiencias de componentes del servidor un poco más.

Otro consejo para ti, usando React DevTools, también puedes alternar tus fallbacks de suspense. Tiende a encontrar esto útil si quiero actualizar y refinar los estilos de mis pantallas de carga sin tener que activar repetidamente el estado de carga en mi aplicación. Así que aquí puedes ver esto en acción. Simplemente hacemos clic en el botón único y podemos ver esa experiencia de pantalla de carga. Luego puedo inspeccionarlo usando elementos y ajustarlo, y eso puede ayudar a mejorar tu proceso de iteración un poco más.

Acabo de mencionar los componentes del servidor de React. El soporte de React Compiler también está disponible ahora en React DevTools. Así que esto incluye insignias de memo para componentes que son optimizados por React Compiler. Y me encantan estas insignias porque aunque parecen una cosa pequeña, realmente pueden ayudarte a identificar rápidamente qué componentes han sido optimizados, potencialmente ayudándote a centrarte en los lugares que no lo han sido. Si eres alguien que disfruta escribiendo hooks personalizados, los DevTools de React DevTools, por supuesto, también te ayudan a inspeccionar tu estado actual y las props de hooks en tus componentes que pueden ser útiles para depurar situaciones complejas de gestión de estado. Y otro consejo rápido, puedes usar useDebugValue. Es un hook para mostrar información de depuración personalizada, y es especialmente útil si eres alguien que disfruta creando y usando hooks personalizados en sus aplicaciones. Sé que a muchas personas les gusta hacer eso.

A continuación, quiero hablar sobre algunas formas en las que puedes experimentar libremente sin necesariamente tocar el código original en tus aplicaciones. Así que todos recuerdan la primera vez que usaron las DevTools del navegador, ya sea Chrome DevTools u otra cosa, para simplemente inspeccionar una página y cambiar algún texto. Tengo un colega, Chris Bensell, que solía trabajar en Chrome. Él presentó las DevTools a su hijo de cinco años cuando estaban tratando de pedir comida de Chipotle. Y salió tan bien como se podría esperar.

Así que esto es genial, pero no persiste. Quiero hablar sobre las anulaciones locales, que son una versión aún más poderosa de esto. Antes de hacer eso, hablemos rápidamente sobre el contraste de color. Me encanta el sitio del libro de Stripe. Es una de mis experiencias favoritas. Soy un gran lector. Pero noto que al desplazarme por aquí, el contraste de color no es tan bueno como podría ser. Vemos algunos naranjas sobre azules. Vemos algunos naranjas sobre verdes. No es muy fácil de leer esto.

Ahora, dentro de DevTools, en realidad tenemos funcionalidad para ayudarte a corregir automáticamente los problemas de contraste de color para que sean compatibles con AA o AAA. Simplemente hacemos clic en ese botón, y hace que el texto sea más oscuro y un poco más accesible amigable. No tienes que pensarlo mucho tú mismo, pero también puedes ajustar estos valores si lo deseas. Ahora, si recargara esta página, estos cambios, por supuesto, desaparecerían porque no estoy publicando en producción. No tengo acceso mágico a Stripe. Pero DevTools te da algunos superpoderes para ayudar aquí. Ahora, si quisiéramos persistir estas ediciones, podríamos usar anulaciones locales. Básicamente, lo que nos permiten hacer es hacer un ajuste y permitir que DevTools guarde esos cambios en una ubicación de archivo de tu elección para que cada vez que vuelvas a ese dominio o esa página, cargue esa versión en su lugar.

Así que básicamente lo que quiero hacer aquí es aplicar esas mismas correcciones de contraste de color. Y lo que voy a hacer es dentro de aquí, voy a ir a fuentes, voy a habilitar anulaciones locales, y lo que esto me permitirá hacer es comenzar a hacer cambios. Así que quiero averiguar dónde necesito hacer estos cambios. Parece que va a estar en este archivo CSS. Voy a tomar ese valor fijo para mi contraste de color. Voy a guardarlo. Y lo que queremos es que cuando recarguemos esta página, nos muestre texto blanco en lugar de naranja.

Y ahí vamos. Esto se ha persistido. Así que puedes editar efectivamente páginas en vivo y guardarlas localmente, lo que abre todo tipo de casos de uso útiles.

Ahora hemos estado construyendo sobre la función de anulaciones en los últimos años con algunas adiciones de valor que creemos que podrías encontrar útiles. La primera es que ahora puedes anular el contenido de las solicitudes XHR y fetch además de sus cuerpos de respuesta. Con esos tipos de anulaciones, puedes simular cosas como respuestas de API para depurar tu página, incluso si tu back end y tu API no están listos aún o no tienes acceso a ellos.

Soportamos anulaciones para varios tipos de solicitudes diferentes, incluyendo imágenes, fuentes, XHR, scripts. Y desactivamos las opciones de contenido anulado si estás inspeccionando esto en diferentes lugares en DevTools. Así que eso es anular el contenido de las solicitudes XHR y fetch. También ahora te permitimos anular los encabezados de respuesta HTTP. Así que si alguna vez has querido experimentar localmente con los encabezados de respuesta, DevTools ahora puede anular esos encabezados, incluyendo cores. También te dejamos establecer tus propios encabezados personalizados. Así que si quieres jugar con esto localmente, ahora tienes mucho más poder y capacidad para hacerlo.

Si te encuentras navegando por algunos documentos y hablan sobre, ya sabes, valores específicos de encabezados, puedes pegar cadenas enteras para anularlos. No tienes que necesariamente analizar y descomponer el texto tú mismo. Nosotros haremos el trabajo duro de interpretarlos por ti.

Ahora, ya que estamos hablando del panel de red, algunos consejos rápidos aquí. Añadimos una casilla de verificación para ayudarte a centrarte en lo que más te importa. Queremos ocultar las solicitudes de extensiones de Chrome. Muchos de nosotros usamos extensiones de Chrome, pero no necesariamente queremos ver como, oye, están cargando su propio código de React o su propio código de biblioteca. Así que si solo marcas esta casilla de ocultar URLs de extensiones, lo que hará es dejarte ver tus propias solicitudes. Y tiendo a usar mucho esta función estos días.

También hemos añadido ahora al panel de red la capacidad de obtener códigos de estado HTTP legibles. Así que ya no tienes que memorizar todos estos tú mismo. Mostraremos texto legible junto a ellos. Así que para 204, por ejemplo, diremos sin contenido. Y esto te ayuda a evitar tener que buscar documentos tú mismo.

Otro consejo aleatorio aquí. Así que si eres alguien que trabaja mucho con entradas, podrías saber que si cambias el enfoque de una página a las herramientas de desarrollo, a veces los elementos superpuestos se ocultarán si son activados por el enfoque. Y te facilita emular una página enfocada. Así que puedes simplemente presionar eso y forzará ese estado, lo que significa que puedes ir y simplemente comenzar a ajustar los estilos de cualquier componente de entrada personalizado en el que hayas estado trabajando sin tener que lidiar con mucho forzar el estado tú mismo en tus componentes. Esto ha sido realmente útil para YouTube. También ha sido útil para muchos equipos que están usando React y otros tipos de bibliotecas.

A continuación, me encantaría hablar un poco sobre el rendimiento. Así que digo que los datos de laboratorio te muestran lo que es posible y lo que es accionable. Los datos del mundo real a menudo te muestran lo que es real. Hemos estado tratando de hacer eso más accionable en los últimos años también. Y DevTools ahora intenta ayudarte a optimizar para ambas cosas. Así que ampliemos y hablemos sobre lo nuevo en herramientas de rendimiento. Y también hablaré un poco sobre el rendimiento de React.

Así que Chrome DevTools ahora te permite monitorear tu rendimiento local y de usuario real, tus Core Web Vitals, a través del panel de rendimiento. Solía ser un panel completamente en blanco, pero ahora te damos muchas ideas ricas allí por defecto. Si abres el panel, inmediatamente ves cómo se desempeña tu experiencia local.

No es necesario realizar grabaciones allí. Y como hemos aprendido a través de esfuerzos como la extensión Web Vitals, tener acceso al rendimiento local de Core Web Vitals puede ser un verdadero cambio de juego para las personas. Así que hemos tomado todo lo que hemos aprendido de algunos de esos esfuerzos a lo largo de los años y realmente hemos intentado asegurarnos de que el panel de rendimiento tenga todo esto por defecto.

También hemos estado agregando recientemente recomendaciones en nuestras métricas en vivo como parte de este trabajo. Así que nuestras métricas en vivo pueden proporcionar recomendaciones específicas de métricas para ayudarte a configurar tu entorno de desarrollo o guiarte en una dirección que tal vez no sabías que deberías estar enfocado. Por ejemplo, tus usuarios reales pueden tener interacciones más lentas porque tienen CPUs más lentas, o pueden tener una abundancia de pantallas más pequeñas, lo que puede cambiar cómo piensas sobre una métrica como largest contentful paint.

Así que ahora incluimos muchas recomendaciones concretas aquí si tienes configurados tus datos de campo reales. Para tus datos de laboratorio, también ahora te permitimos obtener ideas directamente dentro del panel de rendimiento. Así que puedes obtener ideas accionables dentro de nuestra nueva subpestaña de ideas. Lo que te permite hacer es obtener ideas consolidadas de Lighthouse así como de nuestro panel de ideas de rendimiento anterior.

Ahora todo está en un solo lugar, e intenta proporcionarte un análisis guiado e ideas accionables sobre problemas de rendimiento que podrían estar ralentizando tu experiencia. Así que te damos cosas como desgloses de largest contentful paint, como cuánto de eso es tu servidor, cuánto de eso son otras cosas. Te damos culpables de cambio de diseño, ideas de solicitudes que bloquean el renderizado. Hay un montón de cosas con las que intentamos ayudarte allí. Ahora, otra solicitud que la gente ha tenido con el tiempo es que a menudo el rendimiento no es solo cosa de una persona sino que es algo que abordas como equipo o algo que a menudo quieres compartir tus trazas de rendimiento con otras personas. Y así, una de las cosas en las que hemos estado trabajando recientemente es la anotación de trazas. Esto es realmente poderoso. Lo que básicamente te da es una nueva pestaña de anotaciones que simplifica el proceso de crear notas para tus exploraciones de trazas. Hace que sea más fácil hacer cosas como colaborar. Puedes hacer cosas como etiquetar y conectar eventos con flechas. Puedes resaltar rangos de tiempo directamente en la traza misma.

Y luego puedes guardar, puedes compartir esto con otras personas. Si eres un experto en rendimiento o tienes mentalidad de rendimiento, podrías saber que anteriormente la gente tenía que hacer capturas de pantalla y hacer todas estas anotaciones por sí mismos. También hay personas que solían imprimir esto y simplemente hacer anotaciones.

Así que, con suerte, esto ayudará si te importa el rendimiento.

Otro consejo rápido, sé que muchas personas echan un vistazo a cosas como Webpack Bundle Analyzer para obtener información sobre lo que está sucediendo en sus paquetes. DevTools en realidad tiene un Bundle Analyzer incorporado. Si usas Lighthouse, en realidad tenemos una pequeña función de mapa de árbol de Lighthouse que proporciona una representación gráfica de tus paquetes de JavaScript.

Así que vamos a usar esto con BlueSky. Y lo que vamos a hacer es que hemos tomado un rastro de Lighthouse. Solo voy a hacer clic en Ver Mapa de Árbol. Esto nos dará esa representación gráfica. Así que esto es todo lo que está en el paquete o paquetes, más bien, que se envían al usuario. Podemos inspeccionar fragmentos individuales. Podemos hacer cosas como echar un vistazo a los bytes no utilizados en todo tu gráfico. Puedes ver que hay ciertas dependencias aquí. Cosas como ProseMirror que tal vez no se estén utilizando completamente en la carga inicial y que potencialmente podrían diferirse. Y puedes usar esta vista solo para darte un poco más de información sobre cómo puedes optimizar tus páginas.

Voy a hablar sobre Cora Vitals por un momento, pero quería compartir esto. Este es probablemente mi ejemplo favorito de un cambio de diseño de Lee Robinson. Esto me pasa mucho. Básicamente intentas hacer clic en un botón y oh. No me pasa con misiles, solo para ser claro, pero como al comprar cosas.

Ahora no voy a hablar tanto sobre el cambio de diseño, pero sí quiero hablarte muy rápidamente sobre la capacidad de respuesta de entrada. En pocas palabras, la capacidad de respuesta de entrada significa qué tan rápido las páginas web pueden responder a la entrada del usuario. Así que cuando un usuario interactúa y luego puede ver los resultados de esa interacción. Te daré un ejemplo aquí. Podría ser como si estuvieras abriendo un menú de un sitio. ¿Cuánto tiempo tarda en aparecer y el usuario puede hacer algo en absoluto? O si hago clic en un botón para agregar un artículo a mi carrito en un sitio de compras, ¿cuánto tiempo después de interactuar puedo realmente ver que mi artículo fue agregado? Es una métrica matizada. Así que INP, interacción al siguiente panel, es realmente la última métrica de interacción disponible para la web. Las interacciones pueden ser cosas como clips, una tecla arriba, o un puntero arriba. Se divide en tres fases que pueden ayudarte a orientar los esfuerzos de optimización.

Quería hablar sobre este estudio de caso realmente bueno que vi. Así que Veo es una gran aplicación de React que ha estado optimizando para su latencia de interacción. De hecho, pudieron hacer su aplicación un 69% más rápida en lo que respecta a las interacciones. {{^}}Quería repasar muy rápidamente algunas de las cosas que hicieron.

Su primer gran logro realmente vino de actualizar a versiones más recientes de React. El beneficio clave de React 18 fue realmente la renderización concurrente. Así que cosas como tareas de alta prioridad, como la entrada del usuario, podrían interrumpir la renderización. Ese único cambio por sí solo pudo darles una mejora del 46% en su INP en el escritorio y mejoras de tamaño similar en dispositivos móviles. La idea aquí es que a veces incluso los cambios a nivel de framework pueden tener mucho impacto. Así que considera eso cuando estés considerando actualizar o no.

La analítica y el seguimiento de eventos también eran un área que les estaba causando lentitud. Estaban creando tareas largas que realmente bloqueaban el hilo principal. En lugar de eliminar completamente cualquiera de esos, porque a menudo las empresas no pueden simplemente eliminarlos, implementaron una solución más simple. Optaron por ceder al hilo principal entre diferentes operaciones. Puedes hacer esto usando cosas como la API de scheduler. Eso dividió sus tareas largas y mejoró el INP en otro 19%. La clave de aprendizaje allí es que a veces incluso las características básicas, usando una nueva API que está disponible en la plataforma web, realmente pueden ayudar a resolver problemas complejos de rendimiento.

La pieza final fue abordar los problemas de renderización de React. Identificaron algunos problemas clave diferentes. Cosas como descomponer hooks personalizados complejos. Estábamos hablando de hooks anteriormente. Descomponer algunos de esos hooks complejos en más simples. Reemplazar algunas de las APIs de React router con alternativas, como window.location donde podían. Y luego mejorar cosas como la memoización de selectores de Redux. Eso les dio otra mejora del 45% en INP. Así que en general eso es lo que llevó a ese 69%. Este es un estudio de caso realmente genial. Muy, muy detallado. Si estás interesado en el rendimiento, échale un vistazo. Ahora me gusta decir que una experiencia de usuario sin problemas a menudo proviene de prestar atención a los pequeños detalles.

Y DevTools puede ayudarte a menudo a obtener estos detalles correctos. Me encantaría guiarte a través de algunas de mis características favoritas para depurar la UI. Pero antes de eso, solo quería reconocer que realmente me encanta cada vez que veo a desarrolladores tratando de impulsar la web hacia adelante. Y he visto algunos ejemplos divertidos de donde han estado siendo, digamos, creativos.

Así que, por ejemplo, darse de baja de boletines suele ser un poco demasiado fácil. Sé que no quiero nada más que esto sea interrumpido. Afortunadamente, DevTools puede venir al rescate aquí. Así que podemos ir e inspeccionar. Esto es genial. Podemos inspeccionar ese botón. $0 te dará una referencia al último elemento. Así que solo vamos a $0 allí. Vamos a hacer clic y... Oh. Estamos tan cerca. Intentemos con otro.

Así que en algunos casos es demasiado fácil para los usuarios eliminar sus cuentas. Quieres que se queden un poco más, ¿verdad? Entonces, ¿qué tal si los hacemos reconsiderar? Así que intentemos esto. Podemos hacerlo bien. Solo hay tres opciones aquí. Intentemos eliminar. Oh. Muy bien. Usemos DevTools. Así que panel de elementos. Solo usemos la búsqueda aquí para buscar un botón. Y podemos hacer algo como forzar esto, estoy seguro. Así que $0 una vez más. Haz clic y... Muy bien.

OK. Pudimos eliminar nuestra cuenta. Maravilloso. Un último ejemplo. Control de volumen. Seguramente esto no puede ser interrumpido demasiado. ¿Quién necesita límites?

Así que hay algunas cosas con las que incluso DevTools no puede ayudarte. Para todo lo demás, hacemos nuestro mejor esfuerzo. Me encanta lo interactiva y encantadora que se ha vuelto la web a lo largo de los años. Hemos visto a los desarrolladores seguir invirtiendo en cosas como las animaciones web. Y para complementar este trabajo, necesitan buenas herramientas de animación. Así que DevTools tiene un inspector de animaciones. Te permite hacer cosas como reproducir o ralentizar animaciones, modificar tiempos, retrasos, jugar con duraciones. Y es realmente poderoso para ajustar tus animaciones en tiempo real. Puedes encontrar esto bajo más herramientas.

Así que el panel de animaciones ahora hace una cosa adicional. Este es otro sitio con el que he estado jugando recientemente llamado Wild Things. Una de las razones por las que elegí esto es que puedo desplazarme y verás que tiene algunas animaciones geniales. Así que solo estoy desplazándome y ves estas cosas siendo lanzadas a través de la pantalla. Ahora lo que hace el panel de animaciones ahora es que las animaciones que ya están en progreso, ya capturamos esas. Así que no tienes que actualizar la página, no necesitas volver a grabar nada. Esas ya están esperando por ti. Y puedes reproducirlas, puedes ajustarlas, puedes editar fotogramas clave. Solo estamos tratando de hacer este panel un poco más poderoso para ti.

Ahora esta es una aplicación que construí usando View Transitions y Next.js. Utiliza el trabajo de Next View Transitions de Vercel. Así que tengo algunos efectos de desplazamiento aquí que me encantaría mostrar. Déjame ver si esto va a reproducirse correctamente. Tengo algunos efectos de desplazamiento que hacen la transición entre páginas aquí. Ahora en el inspector de animaciones, lo que puedo hacer es realmente ralentizarlos.

Puedo hacer cosas como asegurarme de que se estén reproduciendo correctamente y es generalmente útil para la depuración de transiciones de vista también. Así que si estás usando transiciones de vista en Next, puedes usar este panel también.

Finalmente, hablemos de 3D muy rápidamente. Aunque la mayoría de los desarrolladores entienden conceptualmente cómo los elementos DOM anidados afectan la forma en que el navegador organiza las capas de CSS, el hecho es que el navegador muestra un plano 2D. Sin embargo, DevTools tiene una función que te permite ver la capa del DOM en 3D. Este es el panel de capas menos conocido. Así que vas a más herramientas o a nuestra barra de herramientas y vas a capas. Así que en este caso, esta es una experiencia de paralaje y tengo curiosidad por saber cómo están estructuradas las capas y cómo interactúan mientras me desplazo. Así que aquí tienes una vista 3D. Puedes ver qué es pegajoso, qué no lo es, qué se mueve. Y si estás diseñando interacciones, esto puede ser realmente poderoso para ayudarte a ajustar y refinar esas para obtener la experiencia correcta.

Así que lo último de mi parte, quería cubrir algunos consejos divertidos que pueden ayudar con tu flujo de trabajo de registro. Ahora, los registros de consola con estilo han existido desde siempre. Te ayudan a animar tus mensajes de depuración. Puedes usar especificadores de formato para dar formato a los mensajes de la consola. Aquí hay uno que hice un poco antes. Puedes volverte tan loco como quieras con estos. Puedes usar la tipografía que desees. Ahora me gustaría mostrarte un pequeño truco, porque podemos usar CSS para estilizar cosas en el mensaje de la consola. También podemos hacer cosas divertidas como establecer una imagen de fondo aquí también. Así que puedes registrar memes si quieres. Puedes registrar un montón de diferentes tipos de cosas. También puedes animar SVG en la consola. Y quería mostrarte esto muy rápidamente.

Así que tengo una pregunta para ustedes para terminar esta charla. ¿Cuál es la mejor película de Navidad? Estoy escuchando Elf. Estoy escuchando Elf. Así que vamos a responder a esta pregunta usando una nueva característica que he añadido solo para esta charla llamada console.Christmas. Así que vamos a usar console.Christmas. Y veamos qué tiene que decir console.Christmas. Hubo una persona en la audiencia que acertó. Animé esto yo mismo hace un par de años usando SVG mientras veía Die Hard. Fue construido usando SVG Gator. Me recordó mucho a los días de Flash. Pero puedes usar SVG en línea y CSS para animar SVG en los DevTools. Es realmente, realmente divertido. Esta es una versión simplificada. Se ve muy aproximadamente así. Pero puedes divertirte mucho con el registro. Por favor, hazlo. Así que espero que hayas encontrado esta charla un poco útil. Vamos a depurar la web hacia adelante. He sido Addy Osmani. Gracias.

¿Cómo evitas que los usuarios o desarrolladores olviden que tienen toggles de sobrescritura local? Parece algo que podría olvidarse fácilmente y causar confusión. Esa es una gran pregunta. Añadimos insignias adicionales a diferentes lugares en DevTools. Creo que usamos un color púrpura. Así que puedes saber exactamente qué archivos han sido sobrescritos y detectarlos y diferenciarlos de todo lo demás. Genial.

Siguiente. ¿En qué versión de Chrome están disponibles estas características? La gran mayoría de las cosas de las que hablé hoy están disponibles en Chrome Stable. Las características de IA son principalmente para Chrome Canary.

Genial. Muy bien. Sigamos adelante. ¿Cómo se comparte tu código desde DevTools cuando presionas Ask AI? Están preocupados por la seguridad de la aplicación y el código propietario. Gran pregunta. Así que cada vez que usas esta función, en realidad tenemos un diálogo de privacidad que te pide que consientas compartir la sesión actual. Así que no persiste en absolutamente todo lo que haces. Dentro de cada sesión, te preguntaremos nuevamente si quieres que compartamos ese contexto. Y generalmente solo compartimos la cantidad mínima de código necesaria para poder ayudar a refinar las respuestas que podemos darte. Así que intentamos construir esto teniendo en cuenta la privacidad. Increíble.

¿Qué tan compartibles son las sobrescrituras para cosas como solicitudes XHR al estilo Postman? ¿Cómo podríamos compartir sobrescrituras entre usuarios? Esa es una gran pregunta. De hecho... Devolveré la pregunta. Me encantaría saber cómo les gustaría a las personas que hagamos eso un poco más fácil. Muy a menudo estos esfuerzos comienzan con simplemente documentar mejor lo que la gente está haciendo. Así que si tienes casos de uso específicos en mente, ponlos en un repositorio de GitHub, crea un nuevo problema en Chromium. Estaríamos encantados de hablar con la gente sobre eso. Asombroso.

Bien. Veamos. ¿Alguna vez eliminan características de DevTools? Lo hacemos. Absolutamente lo hacemos. Así que a veces hay características que se ven increíbles en una pantalla, pero estamos en una conferencia y nos damos cuenta, ya sabes, o las suposiciones que hicimos en ese momento ya no son ciertas, o la UX que pensamos que teníamos tal vez no era la correcta. Para darte un ejemplo de una característica, solíamos tener un inspector de promesas, específicamente para ayudarte a visualizar promesas y simplemente usar la UI para ajustar lo que sucede a lo largo de tu cadena. Y nos dimos cuenta de que en realidad era lo incorrecto. En ese momento terminamos eliminándolo. Regularmente revisamos estas decisiones, así que si alguna vez hay algo que la gente siente que, oye, parece que van a eliminarlo, el panel de capas es en realidad un gran ejemplo.

La comunidad se opuso fuertemente a que intentáramos eliminar el panel de capas. Pensamos que esto parecía ser solo para expertos, o que había suficiente gente usándolo. Así que siéntete libre de decir si estás usando cosas. Intentamos escuchar. Sí. Estoy emocionado de escuchar eso, porque escuché que el panel de capas iba a desaparecer. Me alegra ver que no es el caso.

Última pregunta. Chrome puede ser bastante intensivo en memoria. ¿Qué tan costosas son estas nuevas características al usarlas? Así que dos respuestas. Hemos estado invirtiendo mucho. Sé que Chrome es muy conocido por todos los memes sobre el consumo de memoria, por supuesto. Hemos estado trabajando mucho a lo largo de los años para intentar mitigar eso tanto como sea posible. De hecho, diría que estamos en un lugar decente ahora en su mayoría. Para estas características específicamente, va a depender del tipo de experiencias que estés construyendo. Así que si estás construyendo algo que usa mucho WebGL, animaciones web muy complejas, muchas y muchas capas diferentes, obviamente eso va a consumir más memoria. Y las herramientas también van a consumir más memoria como resultado. Así que tiendo a recomendar que la gente simplemente mantenga un ojo en su consumo de memoria. Si detectas algún lugar donde parece que DevTools es la causa, estamos encantados de echar un vistazo. Genial. Increíble. Muchas gracias, Addy. Démosle un aplauso a Addy Osmani una vez más.