Depuración web moderna

Spanish audio is available in the player settings
Rate this content
Bookmark

Pocos desarrolladores disfrutan de la depuración, y puede ser compleja para las aplicaciones web modernas debido a los múltiples frameworks, lenguajes y bibliotecas utilizadas. Sin embargo, las herramientas para desarrolladores han avanzado mucho en facilitar el proceso. En esta charla, Jecelyn profundizará en el estado actual de la depuración, las mejoras en DevTools y cómo puedes utilizarlas para depurar tus aplicaciones de manera confiable.

29 min
01 Jun, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla discute la depuración web moderna y las últimas actualizaciones en Chrome DevTools. Destaca las nuevas características que ayudan a identificar problemas más rápidamente, la mejora en la visibilidad de archivos y el mapeo de fuentes, y la capacidad de ignorar y configurar archivos. El panel de puntos de interrupción en DevTools ha sido rediseñado para facilitar el acceso y la gestión. La charla también aborda los desafíos de depurar con mapas de fuentes y los esfuerzos para estandarizar el formato de los mapas de fuentes. Por último, proporciona consejos para mejorar la productividad con DevTools y enfatiza la importancia de informar errores y utilizar mapas de fuentes para depurar código de producción.

Available in English

1. Introducción a la depuración web y DevTools

Short description:

Hola a todos. Hoy voy a hablar sobre la depuración web moderna y DevTools. Trabajo en el equipo de Chrome DevTools y compartiré emocionantes actualizaciones sobre Chrome DevTools. Hace 15 años, el desarrollo web era diferente. Ahora usamos diferentes lenguajes y frameworks. Compartiré herramientas para mejorar la depuración.

Hola a todos. Sí. Así que hoy voy a hablar sobre la depuración web moderna y DevTools. Mi nombre es Jesslyn. Este es mi identificador porque me gusta mucho el pescado. Por eso mi identificador también es Jackfish.

Así que trabajo en el equipo de DevTools de Chrome. Si en cada versión no has ignorado esta pestaña de novedades, si haces clic en ella, es posible que hayas visto mi cara antes porque en cada nueva versión compartiré algunas noticias emocionantes, actualizaciones emocionantes sobre Chrome DevTools y te mostraré algunos tips sobre cómo mejorar tu productividad con Chrome DevTools.

Así que comencemos mi charla con esta captura de pantalla de hace 15 años. Así era DevTools hace 15 años. Te darás cuenta de que hay muchas menos pestañas, muchos menos paneles que puedes usar. Y más interesante aún, también hay algo llamado crypto. Así que crypto comenzó desde ese momento, pero no realmente. El tiempo, en ese momento cuando desarrollábamos aplicaciones web, era mucho más diferente que cómo desarrollamos aplicaciones web ahora.

Por ejemplo, en aquel entonces, cuando comenzabas, solo usábamos HTML, CSS y JavaScript puro para desarrollar. Luego, después de eso, queremos mejorar el rendimiento. Luego comenzamos a comprimir y minimizar nuestro CSS y JavaScript. Vamos a los días de hoy, ahora lo que escribes no es exactamente lo que el navegador lee. Por ejemplo, usas diferentes lenguajes para escribir tus aplicaciones. Usas JSX, usas Spark, por ejemplo. Usas CSS o less para CSS. Usas TypeScript para reemplazar JavaScript. Y también usas muchos frameworks, como Angular, React y Vue. E incluso tenemos meta frameworks como Next y Nuxt también. Y todas estas herramientas necesitan pasar por un proceso para compilarlo, comprimirlo y transformarlo a lo que los navegadores pueden entender. Y también necesitamos Vue 2 como Vite, Webpack, rollout y ESVue, como muchas de estas herramientas para que todo funcione.

Ahora, desde el día en que comenzamos el desarrollo web hasta ahora que ya no solo usamos HTML, CSS y JavaScript para desarrollar nuestras aplicaciones, ¿qué hay de la depuración? ¿Hemos avanzado también en la depuración? Entonces, hoy, voy a compartir contigo algunas herramientas para mejorar tu depuración porque es importante. Así somos nosotros. Codificamos durante seis minutos, probablemente copiamos y pegamos, investigamos, consultamos GPT o Stack Overflow, pegamos el código, pero simplemente no funciona y pasamos seis horas depurándolo. Vale.

2. Nuevas características para identificar problemas más rápido

Short description:

Comencemos con algunas de las nuevas características que te ayudan a identificar problemas más rápido. Entonces, una de las cosas que harás durante la depuración es verificar la consola en busca de registros de errores. Anteriormente, los frameworks irrelevantes llenaban la consola, lo que dificultaba la identificación de problemas. Ahora, ocultamos los marcos adicionales y mostramos solo lo relevante para tu aplicación. También puedes ver la pila de llamadas y ocultar los marcos irrelevantes. Otra característica es la capacidad de ver tu código primero, acercándolo más a tu IDE.

Comencemos con algunas de las nuevas características que te ayudan a identificar problemas más rápido.

Entonces, una de las cosas que enfrentas y que tienes durante la depuración, lo primero a lo que probablemente irás es a la consola para ver si hay algún registro de error en la consola.

Imagínate que vas a esta página y luego ves esta consola. No es muy útil cuando estás desarrollando. La primera captura de pantalla aquí es de una aplicación Angular, y la siguiente es de Vue.js. Permíteme abrir aquí algunas aplicaciones de muestra. De acuerdo.

Por ejemplo, si hago clic en este botón de aumento. Si lo abro, esto es lo que vemos ahora. Anteriormente, si comparas esta captura de pantalla con la aplicación anterior, notarás que antes veías muchos frameworks irrelevantes llamados Zone.js, Async to Generator.js, como todos estos archivos JavaScript irrelevantes que pertenecen al propio framework. Pero ahora, si abres esto, lo que hacemos es ocultar todos los marcos adicionales. Todos los marcos irrelevantes solo te muestran lo que sucede exactamente en tu aplicación, en tus componentes. Por ejemplo, puedes ver que el problema podría estar en el componente de la aplicación y en el componente del botón. Y si quieres ver el código del framework en sí, puedes hacer clic en Mostrar más marcos y abrir y verificar los demás también. Pero no es necesario que lo hagas. Esto es lo que veías anteriormente. Hay una lista larga hasta que puedas identificar dónde están los problemas.

Otra cosa que puedes hacer es que durante la depuración, también mejoramos... Esta es una aplicación Vue.js. Durante la depuración, tienes las mismas características también. Por ejemplo, coloco un punto de interrupción aquí. Si hago clic en Agregar, aumentar el número. Puedes ver que en la pila de llamadas, a la derecha aquí, también ocultamos todos los marcos irrelevantes. Solo te mostramos lo que es relevante. Como, te mostramos las funciones de incremento y mostramos que actualmente estás en funciones de espera en el incremento. Y si quieres ver todos los marcos ignorados, puedes hacer clic en esto y expandir, y verás todos los demás que no son tan relevantes para lo que estás depurando en este momento. Y otra nueva característica que puedes probar es ver tu código primero. Algunos de los comentarios que recibimos es que, desde la vista aquí, desde tu panel de fuentes, lo que ves es lo que el navegador realmente lee mezclado con tu código real, cuando lo abres en el IDE. Entonces, si quieres ver la vista que está más cerca de tu IDE, lo que puedes hacer es hacer clic en este botón de archivo en el panel de fuentes, seleccionar agrupar por autor y desplegado.

3. Mejora de la visibilidad de archivos y mapeo de código fuente

Short description:

Mostramos primero tus archivos de componentes, lo que facilita encontrarlos y depurarlos. Las aplicaciones de Angular también priorizan tus archivos y difuminan los irrelevantes, como los módulos de nodos. DevTools utiliza Source Map para mapear tus archivos comprimidos a sus versiones originales, ignorando los archivos de framework especificados en la extensión Source Map. Angular y Nuxt admiten esto de forma nativa, mientras que Rollup y Webpack tienen complementos y opciones de configuración para ignorar archivos adicionales durante la depuración.

De esta manera, lo que hacemos es mostrar primero tus archivos de componentes o los archivos que tú has creado primero, independientemente de los navegadores, tu archivo desplegado se mostrará debajo para que puedas encontrar tu componente más rápido si quieres depurarlo.

Lo mismo ocurre con Angular. Si vas a las aplicaciones de Angular, haz clic en los tres puntos, agrúpalos por autor y despliégalos, verás que mostramos tu archivo de Webpack, tu archivo de fuentes, tu aplicación, tu componente primero. Y eso no es todo, ¿has visto que en realidad difuminamos los módulos de nodos porque es un archivo que es posible que no quieras ver también?

Entonces, lo que puedes hacer aquí es hacer clic en los tres puntos y ocultar todos los archivos que probablemente sean código de framework. Puedes decir `ocultar fuentes listadas ignoradas` y hacer clic en ello, y ahora obtendrás un árbol de página aún más limpio que muestra solo tus archivos de origen. De acuerdo.

Luego, la siguiente pregunta es cómo DevTools sabe qué ocultar. ¿Aplicamos IA para hacer eso o no? Así que utilizamos Source Map para hacerlo. Source Map, en resumen, tengo un video para explicar qué es Source Map y esto es una broma. Así que hay una fuente y hay un mapa que apuntan. Así que hay Source Map. Sí.

Entonces, Source Map es el archivo que utilizamos para mapear tus fuentes desde las versiones comprimidas de tu archivo, mapearlo de nuevo a TypeScript o cualquier otro script que estés escribiendo. Este es uno de los ejemplos de Source Map. Si miras este archivo, hay un campo de fuentes que consiste en una matriz de diferentes archivos originales que estás escribiendo. Esto podría ser un archivo de TypeScript o cualquier otra cosa. En este caso, tenemos un archivo completo y un archivo library.js. Imagina que library.js son los archivos de los frameworks o cualquier biblioteca. Entonces, lo que los frameworks pueden hacer es agregar otro campo, lo llamamos extensión Source Map, pero básicamente es un campo, para decirnos que, eh, este archivo, archivo lib.js, debes ignorarlo. Mientras los frameworks o las herramientas de compilación generen el archivo de Source Map, cuando llenen este campo, DevTools leerá ese campo e ignorará el archivo correspondientemente. Por eso tienes una traza de pila más limpia. El framework debe decirnos esto. Y lo bueno es que si estás usando Angular o Nuxt, está soportado, funciona de forma nativa. No necesitas hacer nada. Y si usas Rollup o Webpack, Webpack también tiene un complemento si quieres usarlo. Y también puedes configurar una lista de ignorar Source Map para Rollup, donde puedes configurar algunos archivos adicionales que deseas ignorar durante la depuración. Este es un ejemplo del archivo de Rollup. Así que si, la fuente aquí es esta. Lo que puedes hacer es llenar tu lista de ignorar Source Map con estas funciones.

4. Ignorar y Configurar Archivos

Short description:

Puedes ignorar archivos irrelevantes manualmente y configurar una lista de archivos ignorados en la configuración. Los archivos se muestran visualmente en gris para indicar su baja importancia durante el desarrollo. Cuando buscas archivos usando el comando P, los archivos ignorados también se muestran en gris.

Entonces puedes decir que para cualquier ruta que incluya node modules, simplemente ignóralo. O para cualquier ruta que incluya una biblioteca de terceros, si no quieres debugarlo, simplemente agrégalo allí y puedes comenzar a ignorarlo. De acuerdo. Eso es genial. ¿Y si soy un usuario de React? ¿No mencioné, no mencioné nada de React ahora, verdad? Entonces, ¿quién está usando, quién está usando React para el desarrollo? De acuerdo, casi la mitad de la sala. De acuerdo. Estamos trabajando con el equipo de React para tenerlo listo de inmediato, pero aún no lo admite. Lo que puedes hacer es hacerlo manualmente. Así que desde aquí, déjame mostrarte. Por ejemplo, digamos que esta es tu aplicación de React, y déjame mostrar también la altura. Digamos que uno de estos archivos, el archivo polyfield.ts, es uno de los archivos que no quieres debugear. Puedes hacer clic derecho en el archivo y decir agregar este script para reconocerlo. Así es como puedes hacerlo, o si la carpeta del entorno, como toda la carpeta, no quieres debugearla. Puedes hacer clic derecho y agregar el directorio para reconocerlo. Esto tiene el mismo efecto que los navegadores hicieron con XGoogleAcknowledge, pero en este caso, necesitas hacerlo manualmente una vez para que los navegadores recuerden tu configuración. Entonces puedes ignorar los archivos irrelevantes manualmente, y luego también puedes configurar una lista de archivos ignorados en la configuración. Una vez que ignores el archivo, aparecerá una ventana emergente aquí. Puedes ver que si quieres eliminarlo del reconocimiento, simplemente haz clic y elimínalo. Pero si quieres configurarlo, puedes hacer clic en configurar, y luego puedes abrir la configuración y establecer tus propias reglas de exclusión personalizadas. Puedes agregar más o poner menos adentro. Puedes desactivarlo o simplemente eliminarlo por completo. De acuerdo. Lo bueno es que, como mencioné antes, y lo que acabas de ver, los archivos se muestran en gris visualmente para que sepas que estos son los archivos que no son tan importantes durante el desarrollo. Y cuando usas el comando P para buscar cualquier archivo, también mostraremos en gris aquellos archivos que no son importantes, que has ignorado. De acuerdo.

5. Mejoras en el Panel de Puntos de Interrupción

Short description:

A continuación, hablaré sobre algunas mejoras que hemos realizado en el panel de Puntos de Interrupción en DevTools. Hemos rediseñado la experiencia de usuario para proporcionar un acceso más rápido a las acciones comunes. Los Puntos de Interrupción ahora están agrupados por archivos, lo que facilita su identificación. Puedes desactivar o eliminar Puntos de Interrupción por archivos, ahorrando tiempo. Hay tres tipos de Puntos de Interrupción: regulares, condicionales y de bloqueo. Estas mejoras mejoran la experiencia de depuración en DevTools.

A continuación, quiero hablar brevemente sobre más allá de console.log. ¿Cuántos de ustedes usan console.log para depurar? Todos nosotros, ¿verdad? Así es como nos debugamos, ¿alguien usa Puntos de Interrupción para depurar? De acuerdo, no está mal, todavía hay muchas manos levantadas. Así que cada vez que hablamos de console.log, vemos que, oh, todos levantan la mano y los Puntos de Interrupción son como, oh, no, sí, pero... De acuerdo, así que quiero hablar sobre algunas pequeñas mejoras que hicimos en el panel de Puntos de Interrupción para ayudarte a utilizar esta función un poco mejor. Lo primero que hicimos fue rediseñar la experiencia de usuario de los Puntos de Interrupción para brindarte más acceso rápido a algunas acciones comunes. Así es el rediseño. Lo que hicimos fue agrupar los Puntos de Interrupción por archivos. Si observas el ejemplo anterior, verás que simplemente te mostramos, como, un gran fragmento de el archivo. Te mostramos un gran fragmento de este archivo. Pero ahora los agrupamos por archivo. Así que es más fácil identificar qué archivo es. Y no solo eso, también puedes desactivar o eliminar los Puntos de Interrupción por archivos. ¿Qué quiero decir con eso? Si vas a tu, por ejemplo, aquí, la última vez que quisieras desactivar, por ejemplo, todos los Puntos de Interrupción dentro de un archivo. Lo que debes hacer es desplazarte por tu archivo y encontrar todos los Puntos de Interrupción y desactivarlos uno por uno.

6. Atajo para Punto de Interrupción Bloqueante y Punto de Interrupción Condicional

Short description:

Agregamos un atajo para establecer un Punto de Interrupción Bloqueante y un Punto de Interrupción Condicional. Anteriormente, tenías que hacer clic derecho en el archivo o usar un atajo largo. Ahora, simplemente puedes hacer clic con el comando en un punto para establecer el Punto de Interrupción más fácilmente. Si tienes alguna nueva función en mente, avísanos y podrías verlas en la próxima versión de DevTools.

O necesitas, como, hacer clic derecho en el archivo. Ahora, lo que hicimos es agregar una acción de atajo cuando pasas el cursor sobre el archivo. Y agregamos una función de desactivación aquí para que puedas desactivar todo de una vez. O también puedes eliminar todo de una vez.

Y ¿cuántos de ustedes saben que hay tres tipos de Puntos de Interrupción en DevTools? Bien. Genial. También hay buenas noticias para aquellos que lo saben. Entonces, hay tres tipos de Puntos de Interrupción en DevTools. El primero es el Punto de Interrupción en el que haces clic y luego estableces un Punto de Interrupción, eso es todo. El otro tipo es el Punto de Interrupción Condicional. Entonces, cuando quieres alcanzar el Punto de Interrupción solo cuando se cumplan ciertas condiciones. Por ejemplo, necesitas estar en ciertos números. Y luego, puedes usar este Punto de Interrupción Condicional para establecer tus condiciones para que no sigas interrumpiendo porque solo quieres interrumpir cuando lo necesites. Y el último es el Punto de Interrupción Bloqueante. El Punto de Interrupción Bloqueante es como Console.Lock, pero lo bueno es que no necesitas agregar Console.Lock en tu código. Y cuando haces el check-in, ¿verdad? Luego, tal vez recibas algunas advertencias de que hay Console.Lock en tu código, por favor, elimínalo. Usando el Punto de Interrupción Bloqueante, puedes hacerlo en DevTools y no necesitas agregarlo... tiene las mismas características y no necesitas hacerlo en tu código.

Entonces, la buena noticia aquí es que agregamos un atajo para establecer un Punto de Interrupción Bloqueante y un Punto de Interrupción Condicional. Permíteme mostrarte aquí. En la última conferencia a la que asistí, tenemos este atajo que utiliza comando, opción B, para establecer el Punto de Interrupción Condicional y el Punto de Interrupción Bloqueante. Pero luego uno de los asistentes me dijo, ¿qué tal si no nos das un atajo realmente largo? Solo dame... lo que quiero es que cuando haga clic en un punto, simplemente admita un clic de comando y luego nos ayude a establecer el Punto de Interrupción más fácilmente. Sabes, esta es una solicitud fácil pero nuestro equipo nunca lo había pensado antes. Y ahora que agregamos el clic de comando. Entonces, si tienes alguna nueva función en mente, puedes hablar conmigo más tarde y contarnos. Probablemente lo verás en la próxima versión de DevTools. ¿Quién sabe? De acuerdo.

7. Desafíos de depuración y mapas de origen

Short description:

Puedes usar clic con comando para establecer Puntos de Interrupción Condicional o Puntos de Interrupción Bloqueantes rápidamente. Surgen desafíos al solucionar la experiencia de depuración debido a los mapas de origen imperfectos. Los mapas de origen mapean archivos comprimidos a sus versiones originales, pero a veces se eliminan variables. DevTools puede mostrar una vista previa y permitir la edición de valores para variables mapeadas, pero no para variables que no están en el mapa de origen. Los mapas de origen son un estándar oficial que no ha cambiado durante mucho tiempo.

Entonces, lo que puedes hacer aquí es en lugar de hacer clic derecho, puedes usar clic con comando en cualquier línea para establecer un Punto de Interrupción Condicional o un Punto de Interrupción Bloqueante. Y para hacerlo aún más rápido, lo que puedes hacer es que al lado de esta lista de Puntos de Interrupción, puedes hacer clic en el botón de edición para alternar la edición del Punto de Interrupción Condicional o el Punto de Interrupción Bloqueante. Antes, tenías que ir aquí y luego hacer clic derecho y luego agregar una condición, editar las condiciones y cosas así. Ahora puedes hacerlo simplemente con clic con comando.

Ok. También quiero compartir contigo algunos desafíos que nuestro equipo enfrenta cuando intentamos solucionar la experiencia de depuración, nos encontramos con algunos obstáculos y estamos tratando de resolverlos. Como mencioné antes, los mapas de origen no son perfectos. Por ejemplo, esta es una función. En esta función, en estas funciones de lectura aleatoria, tengo una variable de número y una variable de grid. Y uso ambas variables para calcular y mostrar la prueba, grid y num. Y en este caso, utilizarás algún minificador o alguna herramienta de compilación para comprimirlo. Este es tu archivo comprimido. Un archivo JavaScript minificado. Entonces, lo que ves aquí es que ves hello E. Y lo que puedes ver es que la variable de número ahora se convierte en una variable más corta, E. Y tampoco hay una variable de grid. Porque se eliminó la variable grid. Porque tu herramienta de compilación es tan inteligente que sabe que no la necesita durante el tiempo de ejecución. Así que simplemente la elimina por completo. Esto está bien si no estás depurando tu código. Pero si estás depurando tu código, esto a veces puede suceder. Por ejemplo, aquí, cuando estás depurando en las funciones, lo que DevTools hará es que para el número, podemos mostrarte una vista previa del valor y también puedes editar el valor en el panel de ámbito. Pero no podemos hacer eso para el grid. Porque esta información no está mapeada en absoluto. Esta información no está en el mapa de origen en absoluto. Y es imposible para nosotros conocer esta variable. Porque solo conocemos la información para mapearla. Así que para tu información, el mapa de origen es un estándar oficial. Aunque nuestro desarrollo ha cambiado durante tantos años. Pero la especificación del mapa de origen no ha cambiado durante mucho tiempo.

8. Estandarización de los mapas de origen

Short description:

Desde 2011, hemos estado trabajando en la estandarización del formato de los mapas de origen para mejorar la experiencia de depuración. La especificación actual tiene cierta ambigüedad, lo que lleva a interpretaciones ligeramente diferentes y a la generación de mapas de origen distintos. Nuestro objetivo es evolucionar y fortalecer la especificación, y asegurarnos de que todas las herramientas generen mapas de origen en un formato estandarizado.

Desde 2011, han pasado 12 años. No ha cambiado mucho. Lo que estamos haciendo actualmente es intentar estandarizar el mapa de origen, trabajar con una organización de estándares web para estandarizarlo, de modo que diferentes herramientas, diferentes herramientas de compilación o TypeScript o cualquier otra herramienta, cuando generen nuestro mapa de origen, lo hagan en el formato acordado por todos. La especificación actual del mapa de origen tiene cierta ambigüedad en los propios términos, por lo que cada uno la interpreta ligeramente diferente y genera un mapa de origen ligeramente diferente. También estamos trabajando en la evolución del mapa de origen, fortaleciendo la especificación y mejorando la experiencia de depuración. Por lo tanto, necesitamos que las herramientas de compilación y otras herramientas trabajen juntas para mejorarlo.

9. Herramientas de desarrollo para la productividad

Short description:

En esta parte, compartiré dos consejos para mejorar tu productividad. El primer consejo es utilizar la función de alternar clase CSS, que te permite probar diferentes estilos de clase en una página web. El segundo consejo es anular el encabezado de respuesta HTTP utilizando el panel de red, lo cual es útil cuando se trata de errores de origen CORS. Puedes editar y agregar encabezados para continuar el desarrollo mientras esperas cambios en el backend. Esta función también es aplicable para cargar archivos JSON.

De acuerdo. La última parte trata sobre las herramientas de desarrollo para la productividad. Así que quiero compartir contigo algunos consejos para mejorar tu productividad. De acuerdo. El primero es comenzar con la alternancia de clase CSS. ¿Quién aquí utiliza Tailwind CSS? De acuerdo. Si utilizas Tailwind CSS, déjame abrir la página de Tailwind. O si no, también funciona para todos los demás archivos CSS, así que esta es la página de Tailwind. Lo que hago aquí es enfocarme en esto y luego puedes utilizar, puedes alternar esta clase y lo que puedes hacer aquí es probar diferentes clases para probar diferentes características. Y también puedes escribir, por ejemplo, quiero establecer el fondo, por lo que te mostrará todas las clases que has definido para el fondo. Y si quieres quitarlo, si quieres que el texto esté centrado, puedes utilizar este campo de clase punto, alternarlo, abrirlo y luego alternar la clase y jugar con ella. Esta es una de las funciones que puedes utilizar.

Y otra función es anular el encabezado de respuesta HTTP. Creo que la mayoría de nosotros, en nuestro camino de desarrollo, hemos encontrado este error antes. Permíteme refrescar esta página. Oh, no, ¿está bien? De acuerdo. A veces nos encontramos con errores de origen CORS. Oh, no hay errores ahora. ¿Dónde están mis errores? ¿En serio? Oh, sí, el error está aquí. Dice que hay algunos encabezados de control de acceso permitidos que no funcionan. Entonces, lo que tenemos que hacer aquí, a veces simplemente vamos al backend o si eres un ingeniero frontend, le pedirás al backend que agregue algunos encabezados CORS en el backend. Digamos que solo quieres seguir desarrollando. Quieres sobrescribirlo en el frontend mientras esperas los cambios en el backend. Lo que puedes hacer ahora es ir al panel de red, hacer clic en la solicitud, puedes editar, puedes sobrescribir el encabezado para agregar lo que quieras. En este caso, lo que hago es agregar un encabezado, agregar el encabezado de origen de acceso CORS y simplemente establecerlo en todo porque solo quiero continuar con mi desarrollo. Y lo que hago aquí, si actualizo la página, verás que comenzará a cargar todos los archivos JSON. Sí. Genial. Esta es una función realmente nueva que puedes utilizar. Y no solo eso, puedes hacer lo mismo básicamente para JSON ficticio porque solo lo hacemos para JSON de Tareas.

10. Usando la Anulación de Encabezados y Fragmentos de JavaScript

Short description:

Podemos anular el origen de acceso para archivos JSON ficticios. En el panel de DevTools, puedes guardar fragmentos de JavaScript para ejecutar funciones repetidamente. Por ejemplo, puedes resaltar el panel de contenido más grande en cualquier página utilizando un fragmento. Otro fragmento puede recuperar y ordenar imágenes en una página. Prueba a utilizar fragmentos de JavaScript para simplificar tu flujo de trabajo. Por último, escribir una función de búsqueda en YouTube y depurar desde allí puede ser una técnica efectiva.

Podemos hacer lo mismo para archivos JSON ficticios. Lo que es aún mejor es que puedes hacer clic en este enlace de anulación de encabezados para vincularte a este archivo. Básicamente, es un archivo. Lo que puedes hacer es cambiar esta opción 'apply to' para cambiarla a un comodín. Por ejemplo, puedes decir que todos los archivos JSON, quiero cambiar el origen de acceso. Así que simplemente actualizo. Mira, ahora después de cambiarlo, también puedes cargar el archivo dummy.json sin ningún esfuerzo. ¿Bonito, verdad?

De acuerdo. Y otra cosa es que en el panel de DevTools también se admiten fragmentos de JavaScript. Este fragmento de JavaScript puede ahorrarte mucho tiempo, especialmente cuando hay algunas funciones que necesitas ejecutar una y otra vez. Puedes guardarlas como fragmentos. Por ejemplo, en esta página, tengo un fragmento llamado 'getImages', tengo un fragmento llamado 'getLCPS'. Siempre quiero obtener el panel de contenido más grande en esta página. Tengo este fragmento aquí que me ayudará a resaltarlo. No importa en qué página esté, por ejemplo, si estoy en el panel de Elementos. Si quiero ejecutar estas funciones, lo que necesito hacer, una vez que guardo el fragmento, es hacer clic en Comando P y luego usar el signo de exclamación y simplemente ejecutar la función. Por ejemplo, 'getLCP' en este caso. Así que en este caso, simplemente resaltará las cosas más grandes de LCP para mí porque sé que como ingeniero de performance, esta es la función que ejecutaré una y otra vez. Solo la guardo. Por ejemplo, tengo otra función para obtener imágenes. Cuando la ejecuto, obtendrá todas las imágenes de esta página y luego puedo ordenarlas por tamaño para ver qué imágenes puedo eliminar de esta página. Pruébalo. Utiliza el fragmento de JavaScript para facilitar tu vida.

Y por último, este en la última conferencia, cuando compartí esto, recibí muchos aplausos. Veamos si este obtiene más aplausos que la anulación. Vamos a YouTube. A veces lo que hacemos es que queremos escribir una función de búsqueda aquí. Y desde aquí, es posible que desees depurar. Hay algunos problemas aquí. Quieres depurar esto.

11. Poniendo el Enfoque de Vuelta en la Página y Consejos de Depuración

Short description:

Para poner el enfoque de vuelta en la página, haz clic en el menú de tres puntos, despliega el panel de renderizado y selecciona la función 'emular una página enfocada'. Otra opción es utilizar comandos, como 'comando shift P', para acceder al panel de comandos y ejecutar acciones. Recuerda informar errores y problemas al equipo de DevTools. Al depurar código de producción o minificado, genera y guarda un mapa de origen en un lugar seguro. Luego, en el panel de fuentes, adjunta el mapa de origen para depurar el código.

Pero cada vez que haces clic en lo que quieres enfocar en el elemento, desaparece. Así que lo que puedes hacer aquí es hacer clic en el menú de tres puntos, desplegar el panel de renderizado, y aquí hay una función llamada 'emular una página enfocada'. Esta función te ayuda a poner el enfoque de vuelta en la página en lugar de en la herramienta de desarrollo. Así que si haces clic en ella, ¡bam! Seguirá mostrándose y podrás editarlo. Te lo digo, estas funciones han estado aquí durante diez años o muchos años y... Sí. Incluso antes de que yo me uniera a Google. Sí. Así que esta es una buena función.

Y si no recuerdas la pestaña de renderizado, lo último que puedo hacer por ti es que todo es un comando. Así que puedes usar el comando, básicamente, puedes usar comando shift P para desplegar el panel de comandos y ejecutarlo. Y si no recuerdas este comando, siempre puedes hacer clic en el menú de tres puntos, hacer clic en ejecutar comando, y puedes hacer clic, por ejemplo, en enfocar página. Y no emular página enfocada y emular página enfocada, o si quieres cambiarDevTools a Doug Team. Simplemente despliégalo y puedes ejecutar cualquier comando, abrir un panel y realizar algunas acciones solo con el panel de comandos en sí. Ve a ejecutar comando. De acuerdo, con eso, me quedan 38 segundos.

Y esto es lo último. Cuando voy a conferencias, mucha gente me dice que nunca informan de los errores. Y DevTools los solucionará automáticamente. Hay algunos errores que realmente te molestan. Pero simplemente piensas que no necesitas informarlo, y el equipo de DevTools lo sabrá. Desafortunadamente, no somos IA, así que si tienes algún problema, informa en esta URL o simplemente envía un tuit a Chrome DevTools para que nuestro equipo sepa que tienes estos problemas y podamos solucionarlos . Eso es todo. Y hay un enlace para las diapositivas si quieres verlas. Y gracias a todos.

Una pregunta para ti. ¿Cuál sería tu mejor consejo para depurar código de producción o minificado? Si vas a debug un código de producción o minificado, lo que puedes hacer es generar un mapa de origen y guardarlo en un lugar seguro. Y luego, cuando realmente quieras debugarlo, puedes, en el panel de fuentes, hacer clic derecho en cualquier archivo JavaScript, hacer clic en adjuntar mapa de origen y adjuntar tu mapa de origen del código de producción para debugar tu código. Así es más fácil. Y puedes ocultar tu mapa de origen a los demás. Solo adjúntalo cuando necesites debugar tu código de producción. Increíble. Gracias. Y claramente hubo mucho interés. Así que si tienes preguntas, por favor ve al stand o te encuentro más tarde en tus redes sociales o algo así. Y muchas gracias por la charla. Gracias. Fue genial. Un aplauso más, por favor. Gracias.

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

JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Top Content
Our understanding of performance & user-experience has heavily evolved over the years. Web Developer Tooling needs to similarly evolve to make sure it is user-centric, actionable and contextual where modern experiences are concerned. In this talk, Addy will walk you through Chrome and others have been thinking about this problem and what updates they've been making to performance tools to lower the friction for building great experiences on the web.
React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
DevOps.js Conf 2022DevOps.js Conf 2022
31 min
pnpm – a Fast, Disk Space Efficient Package Manager for JavaScript
You will learn about one of the most popular package managers for JavaScript and its advantages over npm and Yarn.A brief history of JavaScript package managersThe isolated node_modules structure created pnpmWhat makes pnpm so fastWhat makes pnpm disk space efficientMonorepo supportManaging Node.js versions with pnpm
React Advanced Conference 2021React Advanced Conference 2021
27 min
Beyond Virtual Lists: How to Render 100K Items with 100s of Updates/sec in React
Top Content
There is generally a good understanding on how to render large (say, 100K items) datasets using virtual lists, …if they remain largely static. But what if new entries are being added or updated at a rate of hundreds per second? And what if the user should be able to filter and sort them freely? How can we stay responsive in such scenarios? In this talk we discuss how Flipper introduced map-reduce inspired FSRW transformations to handle such scenarios gracefully. By applying the techniques introduced in this talk Flipper frame rates increased at least 10-fold and we hope to open-source this approach soon.
JSNation 2022JSNation 2022
30 min
High-Speed Web Applications: Beyond the Basics
Knowing how to run performance tests on your web application properly is one thing, and putting those metrics to good use is another. And both these aspects are crucial to the overall success of your performance optimization efforts. However, it can be quite an endeavor at times for it means you need to have a precise understanding of all the ins and outs of both performance data and performance tooling. This talk will shed light on how to overcome this challenge and walk you through the pitfalls and tricks of the trade of Chrome DevTools, providing you with a complete roadmap for performance analysis and optimization.

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2023React Advanced Conference 2023
148 min
React Performance Debugging
Workshop
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
JSNation 2022JSNation 2022
71 min
The Clinic.js Workshop
Workshop
Learn the ways of the clinic suite of tools, which help you detect performance issues in your Node.js applications. This workshop walks you through a number of examples, and the knowledge required to do benchmarking and debug I/O and Event Loop issues.
JSNation 2023JSNation 2023
44 min
Solve 100% Of Your Errors: How to Root Cause Issues Faster With Session Replay
WorkshopFree
You know that annoying bug? The one that doesn’t show up locally? And no matter how many times you try to recreate the environment you can’t reproduce it? You’ve gone through the breadcrumbs, read through the stack trace, and are now playing detective to piece together support tickets to make sure it’s real.
Join Sentry developer Ryan Albrecht in this talk to learn how developers can use Session Replay - a tool that provides video-like reproductions of user interactions - to identify, reproduce, and resolve errors and performance issues faster (without rolling your head on your keyboard).