Depurando JS

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

Como desarrolladores, pasamos gran parte de nuestro tiempo depurando aplicaciones, a menudo código que ni siquiera hemos escrito. Lamentablemente, a pocos desarrolladores se les ha enseñado cómo abordar la depuración, es algo que la mayoría de nosotros aprendemos a través de experiencias dolorosas. La buena noticia es que _puedes_ aprender a depurar de manera efectiva y hay varias técnicas y herramientas clave que puedes utilizar para depurar aplicaciones JS y React.

24 min
02 Jun, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Depurar JavaScript es una habilidad crucial que a menudo se pasa por alto en la industria. Es importante comprender el problema, reproducir el problema e identificar la causa raíz. Tener una variedad de herramientas y técnicas de depuración, como métodos de consola y depuradores gráficos, es beneficioso. Replay es un depurador de viaje en el tiempo para JavaScript que permite a los usuarios grabar e inspeccionar errores. Funciona con Redux, React simple e incluso código minificado con la ayuda de mapas de origen.

Available in English

1. Introducción a la depuración de JavaScript

Short description:

Soy Mark Ericsson y hoy estoy emocionado de hablarles sobre la depuración de JavaScript. Les advierto que tengo aproximadamente 40 minutos de contenido y solo 20 minutos para cubrirlo, así que iré un poco rápido. Algunas cosas rápidas sobre mí, soy un ingeniero frontend senior en Replay, donde estamos construyendo un depurador de viaje en el tiempo para JavaScript.

Soy Mark Ericsson y hoy estoy emocionado de hablarles sobre la depuración de JavaScript. Les advierto que tengo aproximadamente 40 minutos de contenido y solo 20 minutos para cubrirlo, así que iré un poco rápido.

Las diapositivas ya están disponibles en mi blog, blog.isquaredsoftware.com. Siéntanse libres de abrirlo y seguir junto con la presentación, o echarle un vistazo más tarde.

Algunas cosas rápidas sobre mí. Soy un ingeniero frontend senior en Replay, donde estamos construyendo un depurador de viaje en el tiempo para JavaScript. Hablaremos más sobre eso en unos minutos. Respondo preguntas en cualquier lugar donde haya un cuadro de texto en internet, recojo cualquier enlace que parezca potencialmente útil, escribo publicaciones de blog extremadamente largas y soy un mantenedor de Redux, pero la mayoría de la gente me conoce como ese tipo con el avatar de los Simpsons.

Esta no es una charla sobre Redux, pero tengo una noticia relacionada con Redux. Hace dos días, mientras estaba en el aeropuerto, publiqué Redux Toolkit 2.0 Beta. Tenemos varias cosas que queremos lograr en la versión 2.0, la mayoría tiene que ver con modernizar el formato del paquete y el contenido de JavaScript. Hemos eliminado algunas API obsoletas. Hemos agregado varias API nuevas. Lo más importante es que nos gustaría que la gente lo pruebe en sus aplicaciones ahora mismo, vea cómo funciona, danos comentarios, cuéntanos qué cosas se rompieron, cuéntanos si las API funcionan, para que podamos avanzar hacia la versión final 2.0. No tengo un cronograma real. Espero que en los próximos meses, si todo va bien.

2. Principios de la depuración

Short description:

La depuración es el proceso de encontrar problemas en tu programa e intentar entender qué está sucediendo. Como programadores, pasamos mucho tiempo tratando de descubrir por qué el código que escribimos no funciona. Creo que el mayor problema es que nuestra industria no enseña a las personas cómo depurar. Cada problema tiene una causa y una razón, y debería ser posible entender por qué algo está roto. Es importante comprender qué se supone que debe hacer el sistema y poder reproducir un problema. La depuración con un plan y no entrar en pánico al encontrar errores también es crucial.

Muy bien. Vamos a hablar de depuración. La depuración es el proceso de encontrar problemas en tu programa e intentar entender qué está sucediendo. En otras palabras, ¿por qué está roto? ¿Y cómo lo arreglamos?

Ahora bien, como programadores, pasamos mucho tiempo haciendo cosas que no son solo escribir código. Nos comunicamos con nuestro equipo, hacemos planificación, diseño, discusiones, revisión de código. Pasamos mucho tiempo tratando de descubrir por qué el código que escribimos no funciona. Sin embargo, muchos desarrolladores no se sienten cómodos haciendo esto. He pensado en esto un poco. Creo que el mayor problema es que nuestra industria no enseña a las personas cómo depurar. ¿Cuántos de ustedes tienen un título en ciencias de la computación y nunca han tenido un curso de depuración? Para mí, la depuración es una habilidad absolutamente fundamental para los desarrolladores. Y la buena noticia es que es algo que se puede aprender y mejorar.

Entonces, veamos algunos principios básicos de la depuración. Ahora, el título de la charla es depuración de JavaScript. Estos principios son universales. Se pueden aplicar a cualquier lenguaje y, francamente, se pueden aplicar fuera de la programación también. El primero es que cada problema tiene una causa y una razón. Debería ser posible entender por qué esta cosa está rota. Ahora, solo porque haya una causa no significa que sea fácil de entender. Hay muchas cosas que pueden complicarlo. Pero es posible. Otro principio es que es muy importante comprender qué se supone que debe hacer el sistema. Si un error es algo que está mal en el sistema, debes saber qué se suponía que debía hacer en primer lugar para ver que el comportamiento es incorrecto. Otro principio es que reproducir un problema es absolutamente clave. Por un lado, necesitas poder entender qué área del código está rota, y eso a menudo requiere un proceso de prueba y error de hacer que esta cosa se bloquee una y otra vez. Pero también es importante porque una vez que crees que tienes una solución, necesitas poder probar los mismos pasos y verificar que realmente funciona correctamente. También necesitas poder depurar con un plan. Básicamente, esto es el método científico. No cambies variables al azar y esperes que de alguna manera mejore. Debes ser muy cuidadoso e intencional acerca de los cambios que haces, probar una cosa a la vez, ver si los cambios de comportamiento realmente coinciden con lo que esperas y tratar de reducir dónde y por qué algo está saliendo mal. Otro problema es que los errores proporcionan información útil y, sin embargo, las personas a menudo entran en pánico cuando ven esa enorme traza de pila.

3. Principios de depuración

Short description:

He visto imágenes de una traza de pila de React que está minificada y no se puede leer nada, o una traza de pila de Java J2EE que tiene 500 líneas y tu código está en algún lugar en el medio. No entres en pánico, intenta entenderlo. Depurar es el doble de difícil que escribir un programa. Intenta escribir código que sea claro y fácil de entender. Los pasos para depurar incluyen comprender el problema, reproducir el problema, descubrir por qué está sucediendo, identificar la causa raíz, encontrar la mejor solución, corregirla y documentar el proceso. Utiliza la herramienta adecuada para el trabajo.

He visto imágenes de una traza de pila de react que está minificada y no se puede leer nada, o una traza de pila de Java J2EE que tiene 500 líneas y tu código está en algún lugar en el medio. Ahora bien, en algún lugar de ahí hay información útil, tu código, tu archivo, línea 37, en algún lugar, pero los errores te dicen algo sobre lo que está saliendo mal. No entres en pánico, intenta entenderlo.

Y sí, literalmente buscar tu error en Google es un buen primer paso. Hay una cita muy famosa de una de las aventuras del sistema operativo UNIX en el lenguaje C donde dice que depurar es el doble de difícil que escribir un programa. Así que si tienes un código realmente inteligente, probablemente no eres lo suficientemente inteligente como para resolverlo tú mismo. Intenta escribir código que sea claro y fácil de entender para que más adelante tú o alguno de tus compañeros de equipo o ese becario dentro de cinco años puedan entender qué estaba sucediendo.

En general, los pasos para depurar se ven así. Primero, debes entender cuál es la descripción. Alguien presentó un informe de error. ¿Qué están tratando de decir que está mal? Segundo, reproducir el problema. Debes poder encontrar pasos reproducibles que hagan que ocurra el error. Abre la aplicación, haz clic en esta pestaña, haz clic en ese botón, boom. Luego, y esta es la parte difícil, intenta descubrir por qué está sucediendo. Una buena táctica es como una búsqueda binaria. Tenemos toda una aplicación. ¿Puedo reducirlo a la mitad de la aplicación? ¿Un cuarto? ¿Un octavo? Trabaja en ello, intenta reducir dónde en el código está sucediendo esto. Una vez que realmente creas que sabes qué está sucediendo y has identificado algunos de los síntomas, no te detengas ahí. Sigue adelante e intenta descubrir si hay un problema de causa raíz más profundo que está sucediendo. Una vez que sepas qué está saliendo mal, entonces puedes intentar descubrir cuál es la mejor solución para intentar solucionarlo. Y aquí es donde entran en juego las restricciones. Tal vez sea una corrección de una línea. Tal vez pienses que necesitas reescribir todo el subsistema, pero no tienes tiempo porque tu equipo ya está sobrecargado. Tal vez el código sea realmente complicado. Intenta descubrir cuánto esfuerzo se necesita para hacer la corrección adecuada. Luego, soluciónalo realmente. E idealmente, agrega más pruebas y verificaciones para que esto no vuelva a suceder en el futuro. Y finalmente, intenta documentar tanto como sea posible, ya sea en el mensaje de confirmación, la solicitud de extracción, el informe de error, deja información para las personas para más adelante para que entiendan qué salió mal y cómo lo solucionaste. Un par de tips más. Utiliza la herramienta adecuada para el trabajo. Hay muchas herramientas diferentes para depurar.

4. Herramientas y técnicas de depuración

Short description:

Cuanto más herramientas tengas en tu caja de herramientas, mejor equipado estarás para intentar resolver problemas. Está dispuesto a mirar debajo del capó y entender lo que está sucediendo en el interior. No tengas miedo. Tómate tu tiempo. Piénsalo detenidamente. Es algo que puedes resolver. Hay momentos en los que simplemente necesitas alejarte, tomar aire, dormir y volver al día siguiente. Las declaraciones de impresión son muy fáciles de agregar. Te muestran los cambios en el sistema a lo largo del tiempo. Los depuradores gráficos te ayudan a enfocarte en una pieza específica de código e inspeccionar el contenido del programa en ejecución. Diferentes lenguajes tienen diferentes tipos de declaraciones de impresión disponibles. Puedes tener marcas de tiempo. Puedes tener diferentes niveles de registro.

Hablaremos de algunas de ellas en un momento. Cuanto más herramientas tengas en tu caja de herramientas, mejor equipado estarás para intentar resolver problemas. Otro aspecto es que utilizamos muchas bibliotecas y paquetes y frameworks. A menudo los tratamos como cajas negras. Está dispuesto a mirar debajo del capó y entender lo que está sucediendo en el interior. Porque a menudo entender ese comportamiento hace posible ver cuál es el verdadero problema.

Otro aspecto es simplemente no tener miedo. Ves esa gran traza de pila de errores, o es una parte del sistema en la que nunca has trabajado antes. Puedes entrar en pánico, especialmente si eres nuevo en el equipo. No tengas miedo. Tómate tu tiempo. Piénsalo detenidamente. Es algo que puedes resolver. Y esto es algo con lo que lucho. Es muy fácil obsesionarse y perseguirlo. Estoy a punto de solucionarlo. Estoy a punto de solucionarlo. Y quedarse atascado. Hay momentos en los que simplemente necesitas alejarte, tomar aire, dormir y volver al día siguiente. Ha habido momentos en los que lo solucioné en cinco minutos a la mañana siguiente después de estar atascado durante horas el día anterior.

Muy bien. Tendré que seguir adelante. Hay mucho debate sobre si debo usar declaraciones de impresión o depuradores gráficos. Y digo, ¿por qué no ambos? Ambas son herramientas maravillosas. Las declaraciones de impresión son muy fáciles de agregar. Te muestran los cambios en el sistema a lo largo del tiempo. Los depuradores gráficos te ayudan a enfocarte en una pieza específica de código y recorrerlo paso a paso e inspeccionar el contenido del programa en ejecución. Estas son dos grandes herramientas para tener en tu caja de herramientas. Diferentes lenguajes tienen diferentes tipos de declaraciones de impresión disponibles. Puedes tener marcas de tiempo. Puedes tener diferentes niveles de registro.

5. Herramientas de depuración de JavaScript

Short description:

En JavaScript, la depuración se realiza principalmente con métodos de consola o bibliotecas de registro como Winston. La API de la consola te permite imprimir objetos como tablas y agrupar mensajes. Una confusión común es que los objetos o arrays expandidos muestran su contenido en el momento de la expansión, no cuando se registraron. Las bibliotecas de JavaScript se distribuyen a menudo como archivos fuente, y los depuradores gráficos tienen comandos y botones similares. Los puntos de interrupción, los ámbitos de variables, las funciones de la pila de llamadas y los botones de paso son características comunes. Ejemplos incluyen Chrome DevTools y VS Code.

En JavaScript, esto se hace principalmente con los métodos de consola o es posible que tengas una biblioteca de registro como Winston. Hay diferentes métodos para diferentes niveles. La API de la consola también tiene funciones que te permiten imprimir objetos como una tabla, agrupar mensajes juntos. Un problema común que veo es que las personas registran un objeto o un array, y más tarde lo expanden y el contenido se ve diferente. En realidad, te muestra lo que contenía en el momento en que lo expandiste, no en el momento en que lo registraste por primera vez. Esto confunde a mucha gente.

Además, la mayoría de las bibliotecas de JavaScript se distribuyen como archivos fuente en el disco en los módulos de node. Puedes editarlos tú mismo, pero intenta recordar eliminar las declaraciones de registro más tarde. La mayoría de los depuradores gráficos tienen los mismos tipos de comandos y botones internos. Los puntos de interrupción te permiten pausar en un punto específico del programa. Por lo general, los establecerías haciendo clic izquierdo en un número de línea. Por lo general, hay paneles que muestran el contenido de las variables en el ámbito, algo que muestra la pila de llamadas de funciones y algunos botones que te permiten avanzar, entrar o salir. Como ejemplos, las Chrome DevTools tienen todos esos comandos. Tienes los puntos de interrupción y el ámbito y la pila de llamadas en el lado derecho. Tienes un marcador de punto de interrupción allí en la línea izquierda. VS Code tiene básicamente todos los mismos botones, solo que en lugares diferentes. Estas son todas piezas muy comunes en cada IDE y cada depurador.

6. Depuración de React e Introducción a Replay

Short description:

Lo más importante es entender cómo funciona el modelo mental de React con componentes y flujo de datos. Rastrea los datos hasta encontrar su origen. Utiliza las extensiones React DevTools y Redux DevTools para inspeccionar y depurar tu código. Mi trabajo diario es en Replay, donde estamos construyendo un depurador de viaje en el tiempo para JavaScript. Replay te permite grabar un error una vez y utilizar la depuración de viaje en el tiempo para comprender lo que realmente sucedió.

Veamos, saltemos algunas partes de esto. Un par de consejos para depurar React. Lo más importante es entender cómo funciona el modelo mental de React con componentes y flujo de datos. React renderiza componentes, los padres pasan datos como props a sus hijos, los hijos devuelven datos a través de funciones de devolución de llamada. Si la interfaz de usuario, lo que se muestra en la pantalla, está incorrecta, o bien los datos son incorrectos o la lógica de renderizado es incorrecta. Si la lógica de renderizado es correcta, revisa los datos. ¿De dónde vienen? Vienen del padre, vienen de Redux, vienen de Apollo. Rastrea los datos hasta encontrar su origen.

Asegúrate también de utilizar las herramientas de desarrollo de React. La extensión del navegador React DevTools te mostrará el árbol de componentes, te permite seleccionar un componente, inspeccionarlo y ver sus props, estado y hooks. De manera similar, con Redux, es muy importante entender el flujo de datos de Redux, se despachan acciones, los reducers actualizan el estado, la interfaz de usuario se vuelve a renderizar. De manera similar, existe una extensión de Redux DevTools que muestra el historial de las acciones despachadas. Para cada acción, puedes inspeccionar el contenido de la acción, el contenido del estado y la diferencia del estado. Estas son todas herramientas muy valiosas para tener en tu caja de herramientas.

De acuerdo. Es posible que realmente logremos terminar a tiempo. Muy bien. Así que, un poco de publicidad del trabajo corporativo. Mi trabajo diario es en Replay. Ya mencioné esto. Y estamos construyendo un depurador de viaje en el tiempo real para JavaScript. Es irónico, porque el argumento de venta original de Redux era la depuración de viaje en el tiempo, y eso es lo que es Replay, pero multiplicado por un millón. Una de las partes más difíciles de la depuración es que debes poder reproducir el problema. Y a veces eso puede llevar muchos pasos. Y estás pausado en un punto de interrupción, avanzas, te detienes, ¡ups, me pasé una línea! Y ahora tienes que detener el programa y reiniciarlo y volver todo el camino hasta el punto donde estabas. Y es molesto. O el error solo ocurre en la máquina de ese desarrollador de QA los martes de febrero o algo así. Entonces, la idea de Replay es que te permite grabar un error una vez. Y luego utilizar la depuración de viaje en el tiempo para comprender lo que realmente sucedió en ese momento.

7. Replay UI y Flujo de Trabajo de Depuración

Short description:

El flujo de trabajo básico implica descargar nuestras versiones de Firefox o Chrome, grabar el error, subirlo a la nube y abrirlo en la interfaz de Replay para inspeccionarlo. La interfaz de usuario te permite saltar a cualquier línea de código, ver cuántas veces se ejecutó, agregar registros de consola y utilizar la depuración paso a paso. Las funciones de colaboración permiten comentarios y compartir declaraciones de impresión. Replay es gratuito para código abierto e individuos. En la demostración en vivo, la interfaz de Replay muestra una grabación de una aplicación Redux, lo que permite a los usuarios navegar a través de diferentes puntos en el tiempo e inspeccionar el código utilizando el modo DevTools. Los recuentos de ejecución proporcionan información sobre la ejecución del código, lo que ayuda a identificar comportamientos inesperados. La interfaz similar a la consola permite una investigación más profunda.

El flujo de trabajo básico, descargas nuestras versiones de Firefox o Chrome, grabas el error, lo haces suceder una vez, lo subes a la cloud, abres la grabación en la interfaz de usuario y ahora puedes inspeccionar la grabación en cualquier momento. Puedes saltar a cualquier línea de código, ver cuántas veces se ejecutó, agregar registros de consola y declaraciones de impresión después del hecho, y utilizar la depuración paso a paso para inspeccionar cosas.

También hay colaboración donde puedes agregar comentarios, permitir que tus compañeros vean lo que estaba sucediendo e incluso compartir las declaraciones de impresión que has agregado. Replay es gratuito para código abierto e individuos. Pagado para empresas, ya que somos una startup y estamos tratando de ganar dinero.

Bien. Ahora, la parte divertida. Vamos a hacer una demostración en vivo. Vamos, Wi-Fi. Ok, bien. Primer paso. Esta es la interfaz de Replay. Esta es una grabación que hice hace bastante tiempo del ejemplo del tutorial de Fundamentos de Redux. Tenemos el visor. Puedo ver cómo se veía la aplicación en el momento de la grabación. Puedo saltar a diferentes puntos en el tiempo y ver cómo se veía la interfaz de usuario. Pero puedo cambiar al modo DevTools. Y esto es básicamente como las DevTools del navegador Firefox en un navegador, porque en realidad es donde comenzó nuestro código.

Entonces, esta es una aplicación Redux. Probablemente esté interesado en los reducers. Así que vamos a encontrar el slice de las tareas pendientes. Lo primero que noté cuando abrí esto es que, además de los números de línea, tenemos todos estos recuentos de ejecución. Y esos me dicen cuántas veces se ejecutó cada línea de código durante la grabación. Y esto comienza a darte información útil, como tal vez esperaba que la línea se ejecutara cinco veces, pero en realidad se ejecutó como 100 veces. Eso no es bueno. O tal vez esperaba que entrara en la declaración if, pero no lo hizo. ¿Por qué? Así que puedo mirar el código y puedo ver que, en este ejemplo, el reducer de cambio de estado de la tarea se ejecutó, parece, tres veces. Ok, ahora tengo curiosidad por lo que estaba sucediendo dentro de eso. Así que puedo hacer clic en este signo más y te das cuenta de que aquí a la derecha tenemos lo que parece ser tu consola de navegador típica.

8. Depuración con Replay

Short description:

Puedes evaluar declaraciones de impresión, saltar a un punto en el tiempo, inspeccionar valores y navegar por el código. Replay proporciona una lista de eventos y permite saltar al código correspondiente. También muestra el DOM y el árbol de componentes de React en puntos específicos en el tiempo. Esta herramienta revolucionaria de depuración ahorra tiempo y es muy recomendada. Echa un vistazo a las diapositivas y recursos adicionales en el blog.

Y te das cuenta de que tenemos tres mensajes allí. Y eso es porque esa línea de código se ejecutó tres veces, y está evaluando el mensaje en cada línea. Entonces, ¿qué pasa si quiero decir, como, aquí está el nombre de la función, y quiero ver qué era el objeto de acción en cada uno de ellos. Así que he editado la declaración de impresión, y se está evaluando. Ahí está la cadena y ahí está el objeto de acción completo. Y puedo expandirlo y echar un vistazo.

Bien, ¿qué pasa si quiero saltar a un punto en el tiempo? Podría, por ejemplo, hacer clic en uno de estos, y ahora estoy pausado como un paso normal depurador dentro de esta función, y puedo ver los valores que están en el ámbito, puedo pasar el cursor sobre ellos, puedo inspeccionarlos, y tenemos el vamos a ver tenemos una pila completa aquí en algún lugar. Así que podemos ver que esto se desencadenó desde algún tipo de controlador rápido de react, y estamos dentro del código de Redux.

Otra cosa que tenemos es una lista de todas las veces que presioné una tecla o hice clic, y si paso el cursor sobre esto, hay un botón para saltar al código. ¿Qué hace eso? Bueno, simplemente me lleva directamente a la línea de código donde despaché donde ejecuté un clic, ahí está mi controlador de propiedad on click, y ahora puedo comenzar a inspeccionar el código aún más. Incluso tenemos el árbol DOM en ese punto en el tiempo, y el árbol de componentes de React en ese punto en el tiempo. Y ahora puedo recorrer toda la grabación, puedo ver qué sucedió, saltar hacia atrás y adelante, inspeccionar el sistema, y solo tuve que hacer la grabación una vez. Me divierto mucho construyendo esta aplicación, y realmente creo que es un cambio revolucionario en cómo debug. Así que por favor, échale un vistazo, te ahorrará mucho tiempo. Ojalá lo hubiera tenido hace años. Muy bien. Eso es todo lo que tengo, y de hecho, básicamente terminé a tiempo. Eso es impresionante. Como dije, las diapositivas están en mi blog, tengo enlaces a muchos recursos adicionales sobre la depuración. Por favor, pasa y saluda, haz preguntas sobre Redux o replay o depuración o lo que sea. Muchas gracias.

9. Compatibilidad y uso de Replay

Short description:

¿Funciona Replay con Redux o React puro? Replay funciona con todo, grabando cualquier cosa que se ejecute en el navegador. El mayor punto de fricción con Replay es la necesidad de pausar y hacer la grabación por separado. Replay tiene una capacidad limitada para ocultar datos, pero se planea una mejor versión. Tanto los registros de consola como los depuradores se utilizan con diferentes propósitos. Replay se puede utilizar con código minificado.

Un montón de preguntas, ¿por dónde empezamos? Aquí vamos. ¿Replay solo funciona con Redux o también con React puro? Replay funciona con todo. Replay funciona grabando la comunicación del navegador con el sistema operativo. Así que literalmente cualquier cosa que se ejecute en el navegador, Replay lo ha grabado. Tenemos algunas integraciones específicas de React, como las herramientas de desarrollo, pero no importa si estás usando React, Vue, Angular, JS puro, lo que sea, si se ejecutó en el navegador, nosotros con las excepciones de WebGL y audio, aún no podemos hacer eso.

Esta es interesante. ¿Son estas las nuevas herramientas de desarrollo y podemos reemplazar completamente las antiguas? Sí, no, tal vez. Honestamente, el mayor punto de fricción con Replay en este momento es que tienes que pausar y hacer la grabación y luego abrirlo por separado. Cuando estoy trabajando en una función, todavía uso las herramientas de desarrollo del navegador para investigar eso mientras escribo el código. Una vez que he escrito algo, usar Replay para investigar lo que sucedió después es mucho más fácil. Tiene sentido.

Esto es muy interesante. ¿Puede Replay ocultar datos sensibles o confidenciales antes de enviar la grabación a la nube? Creo que tenemos una capacidad muy limitada para ocultar datos en este momento. Creo que una mejor versión de eso está en nuestro plan para finales de este año, principios del próximo, creo. Genial. Estaría muy emocionado por eso. Esperemos. Esperemos que no me lo tomes como algo definitivo. No. No es contractual. Ooh. Esta es buena. ¿Usas console.log? Sí, uso console.log, debuggeo. Como dije, depende de la situación. Los registros son geniales para ver paso a paso lo que sucedió en mi aplicación, depurar la interfaz gráfica, los depuradores son buenos para profundizar en una pieza en particular, así que hago ambas cosas. Soy un gran fan de console.log. Tú y mucha otra gente. Lo sé.

10. Uso de Replay con código minificado

Short description:

Replay se puede utilizar con código minificado. Registra lo que sucedió en el navegador, independientemente del modo de compilación. Los mapas de origen son importantes para Replay, ya que nos permiten mostrar el código original junto con el código minificado grabado.

Es solo para los rápidos, ¿sabes? Respondimos a esa pregunta. ¿Se puede usar Replay con código minificado? Absolutamente, sí. Es lo mismo que dije hace un minuto, Replay registra lo que sucedió en el navegador. No importa si es una compilación en modo de desarrollo, una compilación en modo de producción, lo que sea. De hecho, en Replay, ayer en JS Nation, Jesselyn Yeen dio una gran charla sobre depuración y mencionó los mapas de origen que le dicen al depurador cómo se veía el código minificado. Cómo se veía el código original. Y nos encantan los mapas de origen en Replay. Por lo tanto, Replay también depende de los mapas de origen. Si tu aplicación tiene mapas de origen, registra el código minificado que se ejecutó, pero luego utilizamos los mapas de origen para mostrarte la aplicación original. Un par más en el tema de si esto funciona con. He visto Electron, he visto si funciona para debug el backend, um, espera, había uno más. ¿Qué pasa con las aplicaciones basadas en canvas y qué pasa con wasm? Bueno, en este momento, el navegador de grabación principal de Replay es nuestro fork de Firefox, que funciona para Mac, Windows y Linux. Tenemos un buen soporte de Chrome para Linux. Nuestro objetivo principal en este momento es el uso de CI. También tenemos versiones alfa tempranas de Chrome para Windows y Mac. Tenemos soporte de Node a nivel alfa para Linux. Lo he usado para grabar algunas pruebas de jest y debug. Nuestro objetivo es llevar el soporte de Chrome a pleno rendimiento en los próximos meses y hacerlo nuestro navegador de grabación principal. Queremos hacer Electron eventualmente, pero eso tendrá que esperar hasta que Chrome esté listo y luego probablemente después- ¿Qué pasa con un complemento de VS Code? Hipotéticamente algún día. Hipotéticamente algún día. Una pregunta más y luego te enviaré a tu puesto. ¿Ya estás depurando Replay con Replay mismo? Oh, Dios mío. Te lo dije. Me uní a esta empresa porque creo en esta herramienta. Y rutinariamente usamos Replay para debug Replay. Básicamente, cada problema que presentamos internamente debe tener una grabación de Replay adjunta al problema. Has visto la película Inception. Hay momentos en los que hay como cuatro o cinco niveles de grabaciones, ya sabes, una repetición de una repetición de una repetición de una... A veces es difícil hacer un seguimiento de en qué nivel estoy tratando de debug aquí. Bueno, muchas gracias por tu tiempo. Y gracias por compartir Replay con nosotros. Mark estará en su puesto después de esto, en la parte de atrás. Así que otro gran aplauso, por favor.

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

React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
JSNation 2023JSNation 2023
29 min
Modern Web Debugging
Few developers enjoy debugging, and debugging can be complex for modern web apps because of the multiple frameworks, languages, and libraries used. But, developer tools have come a long way in making the process easier. In this talk, Jecelyn will dig into the modern state of debugging, improvements in DevTools, and how you can use them to reliably debug your apps.
React Advanced Conference 2021React Advanced Conference 2021
47 min
Design Systems: Walking the Line Between Flexibility and Consistency
Top Content
Design systems aim to bring consistency to a brand's design and make the UI development productive. Component libraries with well-thought API can make this a breeze. But, sometimes an API choice can accidentally overstep and slow the team down! There's a balance there... somewhere. Let's explore some of the problems and possible creative solutions.
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
React 18! Concurrent features! You might’ve already tried the new APIs like useTransition, or you might’ve just heard of them. But do you know how React 18 achieves the performance wins it brings with itself? In this talk, let’s peek under the hood of React 18’s performance features: - How React 18 lowers the time your page stays frozen (aka TBT) - What exactly happens in the main thread when you run useTransition() - What’s the catch with the improvements (there’s no free cake!), and why Vue.js and Preact straight refused to ship anything similar

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 Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
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 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions