De la Fricción al Flujo: Depuración con 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

Codificar y depurar debería fluir, no desvanecerse. Veamos qué hay de nuevo y mejorado en Chrome DevTools para que tu viaje de desarrollo y depuración web sea suave como la seda.

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

Jecelyn Yeen
Jecelyn Yeen
32 min
13 Jun, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
La charla aborda la importancia de eliminar las fricciones en el proceso de depuración y conocer las herramientas disponibles en Chrome DevTools. Destaca el uso de la función 'Emular una página con enfoque' para depurar elementos que desaparecen y la mejora de las herramientas y el flujo de trabajo de depuración. La charla también menciona mejorar la comprensión de errores, mejorar la eficiencia y el rendimiento de la depuración, y la mejora continua de DevTools. Se enfatiza la importancia de mantenerse actualizado con las nuevas funciones y proporcionar comentarios para solicitar nuevas características.

1. Introducción a Chrome DevTools

Short description:

Hoy voy a hablar sobre Chrome DevTools o coches, pero quiero centrarme en eliminar las fricciones a lo largo del proceso de depuración. Permítanme comenzar con una historia personal. Mi pareja y yo nos mudamos recientemente a una nueva casa con jardín. Como personas perezosas, esperamos a que el césped creciera antes de decidir limpiar el jardín. Encontramos un par de tijeras en el jardín, pero elegimos hacer el trabajo manualmente. Después de buscar en nuestro desordenado sótano, encontramos una recortadora de vidrio electrónica y terminamos el trabajo en 10 minutos. DevTools puede ser como herramientas ocultas en tu garaje, a veces difíciles de encontrar cuando más las necesitas. Es importante eliminar las fricciones en el proceso de depuración y conocer las herramientas disponibles. Por ejemplo, inspeccionar y depurar elementos que desaparecen puede ser un problema común. Permítanme mostrarles una demostración de este problema.

más me emociona. Así que lo primero de lo que quiero hablar es cómo intentamos eliminar las fricciones a lo largo del viaje de depuración para mejorar tu flujo de depuración. Permítanme comenzar con una historia personal. Tal vez tengan historias similares. Recientemente, mi pareja y yo nos mudamos a una nueva casa. Lo bueno es que tienen un jardín. Lo malo es que tienen un jardín en el que el césped crece de vez en cuando. Y luego, como persona perezosa, esperamos hasta el último minuto después de que el césped crece hasta cierta longitud. Luego intentamos, bueno, tenemos que limpiar el jardín ahora. Así que caminamos por el jardín y descubrimos que en realidad tenemos un par de tijeras en el jardín para hacer el trabajo, pero necesitamos hacerlo manualmente. Eso todavía hace el trabajo. Y luego, después de eso, como nos mudamos recientemente a la casa, recordamos vagamente que en el sótano, en los estantes de dos niveles, el propietario nos dejó una recortadora de vidrio electrónica para hacer las cosas. Y tampoco estamos seguros de si la recortadora de vidrio está allí. Es más rápido, pero no estamos seguros. ¿Adivinen cuál elegimos, la manual o la automática? Sí. Elegimos la manual porque pensamos que podemos vivir con eso. Así que decidimos que debería ser rápido, una hora en el proceso de corte manual, finalmente bajamos al sótano y luego buscamos en el desordenado sótano y luego finalmente lo encontramos y luego hicimos el trabajo en menos de 10 minutos, listo. La razón por la que cuento esta historia no es para contarles lo perezoso que soy, no es eso, sino para pensar en qué fricciones puedo eliminar entre este proceso de luchar y cortar el césped. ¿Cómo eliminamos la fricción de este proceso para prepararnos para el próximo recorte? Si lo piensan, DevTools, probablemente sea como su, a veces es como su garaje, es como su sótano, estantes de dos niveles, tenemos muchas de estas herramientas ocultas que a veces puedes obtener, conocerlas por tus colegas, pero sabes cuando realmente tienes un problema, y tratas de debugarlo, y luego puedes descubrir que, oh, hay esta función, tal vez está demasiado lejos, recuerdo vagamente eso, a veces puede que no tengas suficiente tiempo para hacer una búsqueda en Google y obtener el resultado y luego simplemente lo dejas donde puedas, intentas debugar la cosa, y a veces es porque la herramienta está realmente muy oculta, o podría ser a veces que no sabes lo que no sabes. La herramienta existe, ni siquiera piensas en encontrarla y usarla. Así que tomemos como ejemplo, inspeccionar y debugar elementos que desaparecen. Supongo que muchos de nosotros hemos tenido estos problemas antes, como si estás usando Daisy UI o cualquier UI que tenga un desplegable, a veces el resultado del desplegable o el estilo no es correcto, quieres inspeccionar el resultado y hacer algunos cambios de code, o el otro, probablemente tienes un desplegable de búsqueda, como el de YouTube, que quieres inspeccionar el resultado y hacer algo en él, o si estás usando bootstrap, este es el pop over que tiene las preguntas. Así que ahora hagamos la demostración para mostrarles el problema. Ah, por cierto, la primera diapositiva que mostré antes es una captura de pantalla real que tomé de aquí. Puedes usar %c en el console log para pasar tu estilo y dar estilo a tu mensaje de manera agradable como esto. Genial. De acuerdo. Volvamos al elemento que desaparece. Así que digamos que si hago clic en este pop over desechable, quiero debugar esto. Quiero cambiar el estilo. Entonces lo que haré es que normalmente simplemente haré clic en el icono de inspección.

2. Depuración de elementos que desaparecen

Short description:

Oh, mi navegador se congeló durante una demostración en vivo, pero logré abrir una nueva pestaña. Si te encuentras en un escenario donde un elemento desaparece al hacer clic, en lugar de cambiar tu código o usar un tiempo de espera, puedes utilizar una función en DevTools llamada Emular la página enfocada. Te permite inspeccionar el elemento y se puede habilitar de forma global.

Oh, mi navegador se congeló. Permíteme simplemente actualizar eso, hacerlo de nuevo. Haz eso. De acuerdo. De acuerdo. Todo el navegador se congeló. Sabes, esto es hacer una demostración en vivo en el escenario. Genial. Abriré una nueva pestaña en él. De acuerdo. Por cierto, estoy usando Chrome Canary. Esto es de vanguardia. Sí. Por eso es lo que significa estar a la vanguardia. De acuerdo. Permíteme abrir esto. De acuerdo. Genial. Entonces quieres depurar esto. Si intentas hacer clic en este icono e intentas inspeccionarlo, ¿ves? Eso desapareció. ¿Cuántos de ustedes han enfrentado este escenario antes? De acuerdo. La forma en que puedes hacer esto, tal vez cambies tu código, o tal vez inyectes un tiempo de espera, no sé cuántos segundos, para que puedas realizar la acción rápidamente y luego volver al flujo. Entonces, esta función en DevTools que existe probablemente desde hace cinco o seis años, pero nadie la descubrió. Pero recientemente, hicimos algo bueno. Lo hicimos ligeramente visible. Ahora, si vas al panel de Elementos, a la pestaña Estilos, si haces clic en este botón de reloj, hay esta función llamada Emular la página enfocada. Si haces clic en eso, ahora puedes inspeccionarlo. Y esta casilla de verificación en sí misma es una configuración global. Puedes activarla y nunca desactivarla. De acuerdo.

3. Depuración con Emular una Página Enfocada

Short description:

¿Es útil? Hay una razón detrás del nombre 'emular una página enfocada'. Algunos elementos emergentes y elementos desechables dependen del estado de enfoque del documento. Al utilizar la función 'emular una página enfocada', puedes depurar elementos basados en este estado de enfoque. Inicialmente, consideramos habilitar esta función de forma predeterminada, pero puede afectar a los procesos en segundo plano que dependen de la API de Visibilidad de Página. Después de evaluar el riesgo, decidimos no habilitarla de forma predeterminada, pero puedes activarla para depurar estos problemas. Esta función ha existido durante diez años en la pestaña de renderizado, pero no se utiliza ampliamente.

¿Es útil? Si es útil, aplaudan. ¿Sí? De acuerdo. Ahora podrías preguntar, ¿por qué se llama emular una página enfocada? Al leer el nombre, tampoco sé que es para depurar elementos que desaparecen. Es una buena pregunta. Nadie la hizo aquí, pero me la respondo a mí mismo, porque me hacen esta pregunta con frecuencia. Entonces, si quieres entender por qué desaparece este elemento emergente, hay una razón detrás. Este tipo de elementos emergentes y cosas desechables, a veces dependen del documento que tiene el estado de enfoque. Por cierto, estoy usando este pequeño botón aquí. Se llama expresión en vivo, que no necesitas actualizar DevTools y agregar tu valor de vez en cuando. Se ejecutará automáticamente cada vez y se actualizará. Ahora este documento tiene enfoque porque estoy en DevTools, lo que significa que mi documento, la página en sí, no tiene enfoque. Entonces, si muevo el cursor a la página, ahora el documento tiene enfoque es verdadero. Si hago clic en DevTools nuevamente, desaparece. Eso es porque el elemento se descarta porque la página ya no tiene enfoque. Esta función emula una página enfocada, básicamente para devolver el enfoque a la página para que puedas depurar cualquier elemento basado en este estado de enfoque. Tuvimos una larga discusión sobre esta función porque es muy intuitiva y es un problema común que los desarrolladores enfrentan. Inicialmente, queríamos habilitar esta casilla de verificación de forma predeterminada para que no tuvieras que pensar en ello y simplemente pudieras depurar tus problemas. Pero el problema es que, si tienes algún proceso en segundo plano que depende de esta API, llamada API de Visibilidad de Página. Por ejemplo, si abres una nueva página, tu documento ya no es visible. Activar esta configuración afectará esto porque la página seguirá siendo visible incluso si te mueves a otra página. Entonces, digamos que si tienes alguna página que depende de algo, si la página pasa a segundo plano, tienes algún proceso en ejecución para probarlo, esto no funcionará si abres DevTools. Después de evaluar el riesgo, decidimos no activarlo de forma predeterminada, pero puedes activarlo una vez y luego olvidarte de él para depurar estos problemas. Así que acabo de mencionar que esta función existe desde hace diez años. Está en la pestaña de renderizado. ¿Alguien ha utilizado la pestaña de renderizado antes? De acuerdo, en comparación con las manos levantadas anteriormente, es mucho menos. Este es un proceso bastante largo. Necesitas hacer clic en este menú de tres puntos. ¿Qué le pasó a mi ratón hoy? No importa, tengo... Sí, en la pestaña de renderizado. Y luego tienes que desplazarte hacia abajo hasta encontrarlo.

4. Mejorando las Herramientas de Depuración

Short description:

Emular una página enfocada ha existido durante muchos años, pero a menudo se pasa por alto debido a su ubicación en DevTools. Al acercarlo y mejorar su descubrimiento, esperamos aliviar la frustración de depurar elementos que desaparecen. Otro ejemplo es la anulación de respuestas de red, que también ha estado disponible en DevTools durante mucho tiempo. Hemos simplificado el proceso al permitirte hacer clic derecho en un archivo en el panel de red y sobrescribir fácilmente el encabezado o el contenido.

En algún lugar aquí. Sí. En algún lugar aquí, sí, aquí. Emular una página enfocada. Luego puedes activarlo para hacer eso. Eso ya existe desde hace muchos años. El problema es que está tan lejos, por lo que al acercarlo, esperamos que resuelva tu, lo que hacemos es que también rastreamos el uso. Así que vimos un aumento del 1,500 por ciento en el uso. Espero que estés en este 1,500 ahora y sufras menos cuando intentes depurar el elemento que desaparece. De acuerdo. A veces, se necesita más que simplemente mover cosas para eliminar las fricciones de tu flujo de desarrollo, flujo de depuración. Toma otro ejemplo, anulación de respuestas de red. Esta función también se ha evaluado en DevTools durante muchos años. Permíteme mostrarte a qué me refiero. ¿Alguno de ustedes ha oído hablar de esta función? De acuerdo. Bastantes manos, pero también bastante menos manos. De acuerdo. Si actualizo esta página, lo que puedo hacer es, para el archivo JavaScript, CSS y documento, o cualquier archivo, lo que puedo hacer es sobrescribir este archivo style.css para inyectar mi nuevo estilo. Por ejemplo, lo abro en la pestaña de estilos. Lo que puedo hacer es ir a esta área aquí, hacer clic en sobrescribir y luego habilitar esta anulación local para intentar simular las respuestas, básicamente. Si lo habilito, lo que puedo hacer ahora es escribir algún script aquí. Digamos que cambio el fondo a lavanda. Puedo hacer esto, cuando lo guardo, se mantendrá en las cargas de página cruzada. Es diferente de lo que haces en el panel de elementos, no se mantiene en las cargas de página cruzada. Pero esto es bueno, que puedes hacer esto, pero el problema es, ¿cuántos pasos necesitas hacer? Primero debes ver el resultado en el panel de red, ir a las fuentes, encontrar el recurso y no solo eso, debes hacer clic en este punto y luego encontrar el botón de anulación para habilitarlo primero. Así que esto es mucho. Lo que hacemos ahora es que en el panel de red, lo que puedes hacer es hacer clic derecho en un archivo y luego hay consistentemente este botón de anulación de encabezado, anulación de contenido que puedes hacer clic. También puedes hacer esto para el archivo JavaScript, por lo que simplemente puedes sobrescribir el contenido y luego lo guardaremos por ti. Incluso si aún no lo has hecho. Y acercarlo no es suficiente.

5. Mejorando el Flujo de Trabajo de Depuración

Short description:

Hemos hecho que sea consistente para que puedas sobrescribir el contenido al requerir una carpeta configurada localmente para almacenar el resultado. Incluso si aún no has configurado la carpeta, proporcionamos un menú de configuración para guiarte en el proceso. También hemos agregado nuevas funciones para admitir la simulación de APIs y encabezados de respuesta. Al hacer clic derecho y seleccionar 'sobrescribir contenido' en DevTools, puedes pegar tus propios datos para simular la respuesta de la API. Esto ha resultado en un aumento del 200% en el uso de la función. Además, hemos introducido una función útil que te permite hacer clic en el icono de la bombilla para obtener más información sobre los errores, brindando asistencia tanto a desarrolladores experimentados como a principiantes.

También hemos hecho que sea consistente, digamos que para que puedas sobrescribir, necesitas configurar una carpeta localmente para que podamos almacenar el resultado en esa carpeta. Entonces, incluso si aún no has configurado la carpeta, mostramos consistentemente el menú allí. Así que si no has configurado, simplemente te mostraremos un menú de configuración para que hagas clic en una carpeta, la selecciones y la configures. Y si ya has sobrescrito el contenido, puedes volver aquí y editar el mismo archivo una y otra vez. Y también hemos agregado un poco más de funciones a DevTools para admitir la simulación de APIs y la simulación de encabezados de respuesta. Por ejemplo, aquí, me gusta Bobati, así que busquemos Bobati. ¡Ups! ¿Ves? El punto final de la API no funciona. ¿Qué hacemos ahora? Probablemente vayamos a este resultado de búsqueda y veamos que, oh, el resultado es 404. Dado que esto es mi desarrollo local, estoy desarrollando este sitio web, entonces pensé, oh sí, los ingenieros de backend aún no tienen listo el resultado. Así que de alguna manera, ya sea que creemos nuestra propia API, simulemos la API con cualquier servidor, un servidor fijo que tengas, o simplemente cambies el resultado en tu código. Esa es otra forma de hacerlo. Lo que puedes hacer es hacer clic derecho y luego hacer clic en sobrescribir contenido, y luego lo que haces es pegar, ok, sí, tengo un almacén de datos aquí, así que simplemente copio los datos, voy a la solicitud que sobrescribo, pego eso para simularlo, y luego ahora lo intento de nuevo. El resultado está aquí. Así que puedo usar este resultado simulado hasta que los ingenieros de backend digan, hey, la API está lista, luego elimino este resultado sobrescrito y uso el que proporciona el servidor. ¿Es esto genial? Ok. Entonces, al acercarlo, hacer que la experiencia sea consistente, hemos visto un incremento del 200% en el uso de esta función. Espero que lo pruebes para que la próxima vez que haga la verificación nuevamente, sea del 400%. Y como bonificación, para hacerlo más útil, hay una fricción más que podemos eliminar de todo este proceso. Por ejemplo, digamos que ahora has terminado el desarrollo, lo has implementado en producción. Muy bien. Cuando vas a la página de producción, hago lo mismo de nuevo. Esta vez, el error es diferente. Dice que el tipo es, como, error al obtener. ¿Qué hago ahora? Voy y leo mi consola. Dice que no hay control de origen de acceso. Como desarrollador experimentado, sé lo que esto significa. Pero puede haber muchas razones que causen esto. Pero como desarrollador principiante, puede ser realmente difícil saber por dónde empezar y cómo puedo obtener más ayuda en esto. Entonces, lo siguiente que haces, probablemente copias esto, lo pones en un motor de búsqueda, o lo pones en cualquier herramienta de IA para preguntar, hey, ¿de qué se trata este error? Lo bueno es que hay nuevas funciones que tienes en DevTools. ¿Ves el icono de la bombilla aquí? Puedes hacer clic en esto, vamos a intentarlo, y luego decir que continúe.

6. Mejorando la Comprensión de Errores

Short description:

DevTools puede generar explicaciones y ejemplos de código para ayudarte a comprender los errores. Si la explicación no es suficiente, puedes regenerarla para obtener un resultado diferente. También puedes solucionar problemas agregando código al servidor o sobrescribiendo el encabezado de respuesta en el panel de red. Estas funciones están disponibles en los EE. UU. y próximamente estarán disponibles en la UE. Eliminamos las advertencias de la consola para reducir distracciones y facilitar la búsqueda de errores.

Entonces, intentará ayudarte a comprender este error. Te dará una explicación sobre cuál podría ser el error porque. Y a veces también te dará, como, algún code ejemplo. Si consideras que esta explicación no es suficiente, puedes intentar eliminar y luego intentar regenerarla nuevamente. Así intentará generar un resultado diferente para ayudarte a explicar las mismas preguntas. Veamos. Sí. Esta vez, también me ayudó a, también me dice cómo puedo solucionar el problema. Así que si digo que, probablemente debería agregar esto SS origin, este, en el servidor. Así que sé que copio esto y luego le digo al ingeniero del servidor, al ingeniero backend, que lo agregue al backend. Pero a veces lleva tiempo. Entonces, lo que puedo hacer es copiar este code, ir al panel de red, hacer clic derecho en el resultado, decir que sobrescribo el encabezado, y luego puedo sobrescribir el encabezado de respuesta pegándolo. Y luego, si hago eso de nuevo, puedo ir aquí. Así que puedo hacer esto hasta que el backend devuelva el resultado. Así que puedes sobrescribir el encabezado del servidor. ¡Bien! Esta vez no pedí aplausos. ¡Gracias! Esto es para ayudarte a comprender mejor el code. Una nota, sin embargo, estas funciones, ya las lanzamos en los EE. UU. y fuera de la UE. Todavía estamos trabajando en esto porque tiene que ver con AI y Gemini. Próximamente estará disponible en la UE. Lo anunciaremos una vez que esté listo. Así que si aún no ves el icono de la bombilla, probablemente necesites esperar un poco hasta que lo solucionemos. Genial. Otra cosa, demasiados data, demasiadas alertas y advertencias aquí y allá. También es ruido. Y esto realmente te distrae de tu trabajo real. Esto también es una de las fricciones que podrías tener. Entonces, una de las cosas que hacemos es eliminar algunas advertencias de la console para que puedas buscar el error que deseas y tratar de solucionarlo. Si has visto este mensaje de error antes, es mucho.

7. Mejorando la Eficiencia de Depuración

Short description:

Chrome DevTools elimina las advertencias para las extensiones de Chrome y te permite ignorar ciertos archivos y carpetas para una depuración más rápida. Los mensajes de la consola se mejoran al eliminar líneas irrelevantes de la traza de pila.

Especialmente para aquellos de ustedes que tienen muchas extensiones de Chrome, instalan muchas de ellas, ven este mensaje. Es bueno, pero no es útil para ustedes porque no pueden pedirle a la extensión que, oye, no cargue su mapa de origen. Está contaminando mi traza. Así que es muy difícil para ustedes. Ahora hemos eliminado todas estas advertencias en la última versión de Chrome. Pruébenlo. Si tienen un mensaje de console mejor y menos molesto, eso es bueno. Y lo siguiente es que también intentamos ayudarles a tener una depuración más rápida al ignorar cosas. Ahora estamos ignorando el script de contenido inyectado por las extensiones de Chrome cuando hacen la depuración con puntos de interrupción.

8. Mejorando el Rendimiento de Depuración

Short description:

DevTools ignora las carpetas de los frameworks, el código del framework y los módulos de nodo de forma predeterminada. Esto te ayuda a depurar mejor al permitirte ingresar a tu propio código en lugar del código del navegador, lo que hace que la depuración sea más rápida. También mejora los mensajes de la consola al eliminar líneas irrelevantes de la traza de pila, lo que reduce los costos de depuración.

También ignoramos algunas de las carpetas de los frameworks, parte del código del framework cuando haces eso. Y por último, también ignoramos algo en los módulos de nodo.

Ahora tu pregunta es, ¿qué quieres decir con ignorar? Aquí es donde DevTools activa esta configuración de forma predeterminada en la configuración, ignorar esto. Así es exactamente como lo desactivamos.

Por ejemplo, si estás en una aplicación de Next.js. Ahora déjame ir aquí. En la aplicación de Next.js, si vas a las fuentes, puedes ver que todas estas carpetas están desactivadas de forma predeterminada porque se ignoran de forma predeterminada.

Ahora tu pregunta es, ¿cómo puede ayudarme esto a depurar mejor? Por ejemplo, para algunos de ustedes, si establecen un punto de interrupción en un escuchador de eventos, quieren capturar todos los clics de ratón en la página y depurar eso, pueden ir a este escuchador de eventos, hacer clic en el evento de clic y cuando hagan clic en eso, cuando intenten iniciar la depuración, se irán directamente a esta función aquí. Y si te acercas, en realidad puedes tener esta opción de mostrar la lista de ignorados para ver, como, qué ha estado ignorando DevTools.

De forma predeterminada, cuando haces clic en este clic de ratón, porque hay código de React que se está ejecutando en segundo plano, supuestamente deberías ir primero a este código de React antes de ir a esta lista activa. Y cuando depuras paso a paso, a veces saltará repentinamente al código del framework en lugar de tu propio código. Pero eso no es lo que quieres. Así que al ignorar la carpeta de los módulos de nodo y este archivo del framework de forma predeterminada, no tienes que preocuparte por eso. Puedes depurar paso a paso, ingresar a tu propio código en lugar del código del navegador. Así que eso hace las cosas más rápidas.

Otra cosa que mejora es el mensaje de la consola. Por ejemplo, si haces clic en este botón de activar una lista, en realidad hay un error aquí. Así que veamos. Si observas este mensaje de error, ¿qué línea de la traza de pila está relacionada con tu código? Solo es la primera línea, ¿verdad? Sí. Y todas las demás líneas, básicamente, no son útiles para ti. Supuestamente, si las eliminas todas, puede ser útil para ver todos los demás mensajes. Así que con eso, podemos acortar el error de la consola y reducir los costos de depuración. cuando haces las pruebas. Este es el mensaje de error que vimos hace un momento. No es solo el mensaje de error. Si algunos de ustedes han hecho depuración antes, hay un menú desplegable en el que pueden hacer clic. En realidad, hay dos partes de la traza de pila en las que puedes profundizar, dependiendo de lo que estés depurando. En la parte superior está la traza de pila de error. En la parte inferior está la traza de pila del mensaje. Así que en la parte superior básicamente te dice dónde ocurrió el error. En este caso, el índice está en la línea número 10.

9. Mejorando las Funciones de Depuración

Short description:

DevTools colapsa la traza de pila inferior y las próximas características mejorarán aún más la funcionalidad de colapsado. La columna de cascada en la pista de red ahora se puede ocultar y la URL de la extensión se puede ocultar del registro de red. Estas características han sido solicitadas durante varios años y ahora están disponibles, priorizadas según los comentarios de los usuarios.

Y luego la traza de pila inferior es para decirte dónde estaba el registro de error, el registro de mensaje. Debido a que capturas el mensaje en una área diferente de tu code, por lo que el registro de mensaje podría estar en algún lugar diferente de donde ocurrió el error. Lo bueno es que en DevTools, ya utilizamos esa información para colapsar la traza de pila inferior para ti, la traza de pila de mensaje para ti. Ahora, si haces clic en ella, si la expandes, no verás otros 18 marcos que no están relacionados contigo porque los hemos colapsado por defecto. Solo tienes que hacer clic y expandirlo para verlo.

Y lo siguiente, que llegará pronto, es que colapsaremos esto. El resultado final que queremos lograr es algo como esto. Así es una línea y luego puedes hacer clic en mostrar para expandirlo. ¿Está bien? De acuerdo. Esto aún está en proceso de trabajo y en realidad la contribución de esta cosa es gracias a el equipo de Wassell. Ellos realmente nos enviaron un CL para solucionar esto. Así que esperemos que se implemente pronto. Así que el concepto aquí es, ¿esta cosa te da alegría? Si no lo hace, entonces simplemente la ocultaremos de inmediato.

Y por último, hablando de ocultar, también tenemos algunas pequeñas mejoras aquí. La última vez, en la columna de cascada, la verías ocupar todo el espacio en la pista de red, pero ahora puedes ocultarla. Y la otra es que si tienes muchas extensiones y tratas de debug tus propios resultados de red, se volverá confuso. Supuestamente puedes usar el modo incógnito para hacer la depuración y así no tener la extensión, pero ahora hemos agregado estas características para permitirte ocultar la URL de la extensión del propio registro de red. Esto es bastante útil para ti. Lo curioso es que estas dos características han sido solicitadas durante mucho tiempo. Permíteme mostrarte esto. Así que esta cascada, para eliminar la cascada en el desbordamiento de pila, se solicitó hace seis años y se construyó 9000 veces. Y luego esto, este año, uno de los usuarios, también tenemos un error que se creó hace seis años. Luego recibimos este mensaje recientemente. El mensaje es muy largo, pero la idea principal es que se utilizaron 8000 desarrolladores para encontrar la red para nada, solo fue una pérdida de espacio. Esta persona nos ha estado diciendo constantemente, por favor, elimínenlo. No nos es útil, durante seis años. Así que es bueno para ti. Si estás en la multitud, finalmente puedes hacer eso. Y para ser honesto, 8000 desarrolladores son importantes, pero también recibimos muchas otras solicitudes. Por ejemplo, la extensión alta, se construyó 24k veces, se creó hace 11 años y recientemente agregamos las características porque en realidad tienes una forma alternativa de hacer eso, y no lo hicimos porque hay muchas actividades y tenemos muchas características y recursos limitados, así que a veces no se convierte en una prioridad.

10. Mejora Continua y Mantenerse Actualizado

Short description:

Ten paciencia y sigue solicitando características. Contribuye con correcciones y mejora DevTools. Lectura recomendada: Atomic Habits. Mantente actualizado con las nuevas características a través de la pestaña 'Novedades'.

Así que ten paciencia con nosotros. Si realmente quieres las características, sigue solicitándolas. Si preguntas y no las obtienes, sigue preguntando y envíanos una solicitud de características. Y si quieres, puedes contribuir con una corrección. En realidad, es una aplicación web, toda la DevTools de Chrome. Así que si sabes cómo desarrollar una aplicación web, en realidad puedes contribuir a DevTools. Este es el enlace si estás interesado. Entonces, lo que hemos hecho hasta ahora este año es tratar de hacer las cosas obvias, atractivas, y hacerlo fácil y satisfactorio para que lo uses. También recomiendo mucho este libro, así que leí este libro de hábitos atómicos para mejorar mi hábito personal, pero en realidad, si lo pienso, también se aplica al producto, como el diseño de UX, también, sobre cómo ayudar a los desarrolladores, cómo ayudarnos a nosotros mismos a hacer las cosas más fácilmente. Así que casi terminando, si quieres aprender más sobre las nuevas características y hacer una inmersión profunda en DevTools, trato de no ignorar la pestaña de novedades que aparece de vez en cuando. Haz clic en el enlace, verás algunos artículos y el video que habla sobre algunas cosas nuevas y cómo puedes usarlas para solucionar algunos problemas.

QnA

Mantenerse Actualizado y Anulaciones en DevTools

Short description:

Los usuarios no deben ignorar la pestaña de 'novedades'. Las mejoras están disponibles en todos los navegadores Chromium, excepto para las estadísticas de la consola. Las anulaciones se pueden compartir con colegas configurando una carpeta o utilizando un repositorio de GitHub. Las anulaciones existen mientras estén localmente y se pueden desactivar. El panel de red proporciona advertencias e indicadores para diferenciar entre estilos reales y datos anulados. No se menciona la forma más fácil de anular las solicitudes de GraphQL con la misma URL.

De acuerdo, gracias. Eso es todo.

Alguien preguntó cómo pueden enterarse de las nuevas mejoras en DevTools. Como dijo Jesselyn, no ignores la pestaña de novedades.

Pregunta rápida de alguien, pero importante para mí, ya que trabajo en un navegador Chromium que no es de Google. ¿Estas mejoras están disponibles para todos los navegadores Chromium o solo para Google Chrome? De acuerdo. Así que, como para todas las cosas que mencioné ahora mismo, están disponibles en todos los navegadores Chromium. Eso es genial. Así que eso incluye a Microsoft Edge. La excepción es la estadística de la consola, como el botón que haces clic para ayudarte a describir, eso no está disponible en los otros navegadores Chromium, solo en Chrome. Sí. Gracias, Jesselyn.

Algunas preguntas rápidas. ¿Puedo compartir mis anulaciones con colegas? De acuerdo, esta es una buena pregunta. Si quieres compartir la anulación con tu colega, es posible porque necesitas configurar una carpeta en tu PC local. Lo que puedes hacer es tener un repositorio de GitHub para ese archivo que creaste, luego simplemente puedes confirmar el code como lo haces normalmente, y luego puedes compartirlo con tu colega. Pero no hay funciones de sincronización en DevTools para sincronizar la anulación en otra PC porque eso sería demasiado peligroso. Debes configurar un repositorio Git o un lugar para compartirlo. Gracias.

Alguien preguntó, Jesselyn, ¿cuánto tiempo vive la anulación? ¿Cuánto tiempo dura esto? Bueno, esto vive tanto como pueda porque está en tu disco local. Lo que puedes hacer es eliminarlo y ya no se realizará la anulación. O simplemente debes marcar la casilla que desactiva la anulación, entonces no usaremos tu archivo de anulación, incluso si ese archivo existe. Gracias.

Alexander preguntó, ¿cómo diferencias entre estilos reales y data que has anulado? ¿Tal vez olvidas en dos semanas que tienes una anulación? Sí, esta es en realidad una muy buena pregunta. En el panel de red, si ves en la parte superior, a veces aparece este triángulo con un signo de exclamación, es un icono de advertencia que te dice, hey, algunos de tus resultados de red realmente han cambiado. Mostramos ese icono de advertencia donde tienes cosas que has anulado o donde has cambiado la velocidad de tu red, como reducirla a 3G o 4G, eso haces. Y luego, en cada recurso anulado en el panel de red, puedes ver un punto morado que indica que estas son las solicitudes que se han anulado. Gracias.

Y lamento que esto sea una ráfaga de preguntas para ti. ¿Cuál es la forma más fácil de anular las solicitudes de GraphQL? Porque todas tienen la misma URL.

Proporcionar Comentarios y Solicitar Funcionalidades

Short description:

Para proporcionar comentarios y solicitar funcionalidades para Chrome DevTools, los usuarios pueden enviar solicitudes en crbug.com y hacer preguntas en Stack Overflow. Jesselyn Yin también monitorea las plataformas de redes sociales en busca de solicitudes y funcionalidades. Demos un gran aplauso a Jesselyn Yin.

Entiendo que quieres enviar una solicitud en Chrome DevTools, simplemente envía una solicitud de problema o funcionalidad, porque actualmente no hay una forma fácil. Ya que sé que la solicitud de GraphQL es como un gran bloque. Así que lo siento, pero puedes enviar una solicitud y seguir preguntando. Gracias.

El último punto, volviendo a lo que estabas diciendo sobre las fricciones. Alguien pregunta, Jesselyn, además de las solicitudes en crbug.com y los comentarios de la comunidad, ¿cómo más te enteras de estas fricciones en Chrome DevTools? ¿Cómo podemos hacértelo saber? De acuerdo. Una cosa, por supuesto, es crbug.com, que es nuestro principal recurso. El otro es Stack Overflow. En Stack Overflow, puedes enviar tus preguntas bajo Google, creo que Google Chrome DevTools tiene una etiqueta de Chrome DevTools. Y de vez en cuando, lo revisaré. Y también para responder preguntas. Y para entender, ¿estas solicitudes son muy vistas? ¿Y esto es algo que podemos hacer de inmediato? Y también las redes sociales. Si etiquetas a Chrome DevTools en la plataforma X o me etiquetas a mí, también revisaré esta solicitud y registraré la solicitud, la funcionalidad. Así que estas son las redes sociales, crbug, Stack Overflow, YouTube, el video debajo de él, dejé el comentario. Utilizaremos todos esos. Sí. Gracias.

De acuerdo. Quiero que le den un gran aplauso a Jesselyn Yin. 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

Depuración Web Moderna
JSNation 2023JSNation 2023
29 min
Depuración Web Moderna
Top Content
This Talk discusses modern web debugging and the latest updates in Chrome DevTools. It highlights new features that help pinpoint issues quicker, improved file visibility and source mapping, and ignoring and configuring files. The Breakpoints panel in DevTools has been redesigned for easier access and management. The Talk also covers the challenges of debugging with source maps and the efforts to standardize the source map format. Lastly, it provides tips for improving productivity with DevTools and emphasizes the importance of reporting bugs and using source maps for debugging production code.
Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
Depuración con Chrome DevTools
JSNation Live 2021JSNation Live 2021
11 min
Depuración con Chrome DevTools
Top Content
Here are some tips for better utilizing DevTools, including using the run command, customizing keyboard shortcuts, and emulating the focus effect. Learn how to inspect memory, use the network panel for more control over network requests, and take advantage of console utilities. Save frequently used code as snippets and use local overrides for easy editing. Optimize images by using a more optimized format like AVIF and track changes in the network panel to see the reduced data size.
Análisis estático en JavaScript: Lo fácil y lo difícil
JSNation 2023JSNation 2023
23 min
Análisis estático en JavaScript: Lo fácil y lo difícil
Static analysis in JavaScript involves analyzing source code without executing it, producing metrics, problems, or warnings. Data flow analysis aims to determine the values of data in a program. Rule implementation in JavaScript can be straightforward or require extensive consideration of various cases and parameters. JavaScript's dynamic nature and uncertainty make static analysis challenging, but it can greatly improve code quality.
Depurando un Bloqueo No Reproducible
React Advanced 2021React Advanced 2021
20 min
Depurando un Bloqueo No Reproducible
The Talk discusses a vicious bug that caused 20,000 crashes in a JS application. The bug was an array index out of bounds exception in the SimplePool class. The team used a debugger to analyze the bug and discovered a race condition caused by an upgrade to React Native SVG. They collaborated with React Native contributors to fix the issue and deployed a patched version. The Talk emphasizes the importance of using a crash reporting tool, monitoring release health, and learning from bugs and source code analysis.
Mapas de origen de JavaScript, ¿Podemos hacerlo mejor?
JSNation 2023JSNation 2023
27 min
Mapas de origen de JavaScript, ¿Podemos hacerlo mejor?
Source maps allow understanding of transpiled, bundled, or minified code. Debugging with post hoc and debug identifiers helps identify files. Issues with source maps include hash collisions and missing function names. Various techniques can be used to determine the function that caused an error. Source maps can store additional information and improvements can be made to path resolution and column positions. Code points and token positions can differ across browsers. Detecting source maps can be challenging without a standardized JSON schema.

Workshops on related topic

Masterclass de Depuración de Rendimiento de React
React Summit 2023React Summit 2023
170 min
Masterclass de Depuración de Rendimiento de React
Top Content
Featured Workshop
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Vería una interacción lenta, intentaría una optimización aleatoria, vería que no ayudaba, y seguiría intentando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Haría una grabación en Chrome DevTools o React Profiler, la examinaría, intentaría hacer clic en cosas aleatorias, y luego la cerraría frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos a analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, estaremos cubriendo el rendimiento de la interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Tracing: Frontend Issues With Backend Solutions
React Summit US 2024React Summit US 2024
112 min
Tracing: Frontend Issues With Backend Solutions
Top Content
Featured WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
Los problemas de frontend que afectan a tus usuarios a menudo son provocados por problemas de backend. En esta masterclass, aprenderás cómo identificar problemas que causan páginas web lentas y malos Core Web Vitals usando tracing.
Luego, pruébalo tú mismo configurando Sentry en un proyecto Next.js ya preparado para descubrir problemas de rendimiento, incluyendo consultas lentas a la base de datos en una sesión interactiva de programación en pareja.
Saldrás de la masterclass siendo capaz de:- Encontrar problemas de backend que podrían estar ralentizando tus aplicaciones de frontend- Configurar tracing con Sentry en un proyecto Next.js- Depurar y solucionar problemas de rendimiento deficiente usando tracing
Este será un evento en vivo de 2 horas donde tendrás la oportunidad de codificar junto con nosotros y hacernos preguntas.
Depuración del Rendimiento de React
React Advanced 2023React Advanced 2023
148 min
Depuración del Rendimiento de React
Workshop
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Veía una interacción lenta, probaba una optimización aleatoria, veía que no ayudaba, y seguía probando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Hacía una grabación en Chrome DevTools o React Profiler, la examinaba, intentaba hacer clic en cosas al azar, y luego la cerraba frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos cómo analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, cubriremos el rendimiento de interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
El Masterclass de Clinic.js
JSNation 2022JSNation 2022
71 min
El Masterclass de Clinic.js
Workshop
Rafael Gonzaga
Rafael Gonzaga
Aprende las formas de la suite de herramientas clinic, que te ayudan a detectar problemas de rendimiento en tus aplicaciones Node.js. Este masterclass te guiará a través de varios ejemplos y te proporcionará los conocimientos necesarios para hacer pruebas de rendimiento y solucionar problemas de E/S y del bucle de eventos.
Instrumentar, Monitorizar, Arreglar: Una Sesión Práctica de Depuración
React Summit 2025React Summit 2025
88 min
Instrumentar, Monitorizar, Arreglar: Una Sesión Práctica de Depuración
WorkshopFree
Lazar Nikolov
Lazar Nikolov
Acabas de lanzar una nueva característica. Las pruebas pasaron. CI está en verde. Todo está desplegado. La vida es buena... hasta que las alertas comienzan a llegar. Los usuarios informan de "cosas raras que suceden", fallos en la interfaz de usuario, informes vagos de "parece lento" y ese temido mensaje de "no se puede iniciar sesión". Bueno, esto parece ser un mal día. Pero... tal vez no.Mira esta sesión práctica para aprender cómo construirlo, romperlo, depurarlo y pasar de "no tengo idea de qué está mal" a solucionar problemas, todo de una vez. Dado que somos desarrolladores serios (obviamente), usaremos Next.js y:Configurar Sentry desde cero, incluyendo Errores, Reproducción de Sesiones y TrazadoAprender formas de usar Replays para entender la experiencia real del usuario, y cómo usar Trazado para depurar problemas de la aplicaciónAprovechar Sentry AI y el contexto de tu aplicación para entender qué está realmente roto, y usar Autofix para generar una solución, desde la causa raíz hasta el PR.Utiliza esta guía de la masterclass para seguir: Guía de Inicio Rápido.
Soluciona el 100% de tus errores: Cómo encontrar problemas más rápido con la Reproducción de Sesiones
JSNation 2023JSNation 2023
44 min
Soluciona el 100% de tus errores: Cómo encontrar problemas más rápido con la Reproducción de Sesiones
WorkshopFree
Ryan Albrecht
Ryan Albrecht
¿Conoces ese molesto error? ¿El que no aparece localmente? Y no importa cuántas veces intentes recrear el entorno, no puedes reproducirlo. Has revisado las migas de pan, leído la traza de pila y ahora estás jugando al detective para unir los tickets de soporte y asegurarte de que sea real.
Únete al desarrollador de Sentry, Ryan Albrecht, en esta charla para aprender cómo los desarrolladores pueden utilizar la Reproducción de Sesiones, una herramienta que proporciona reproducciones de video de las interacciones de los usuarios, para identificar, reproducir y resolver errores y problemas de rendimiento más rápido (sin golpear tu cabeza contra el teclado).