Depuración de JavaScript con un depurador real que no sabía que ya tenía

 

 

 

  • Design Token and UI Component Architecture, with Nathan Curtis
  • SmashingConf New York 2024

  • Índice
    1. Dejar de usarconsole.log
    2. Herramientas de desarrollo de código abierto
      1. Further Reading

    JavaScript es esencial para cualquier aplicación web avanzada, por lo que un depurador potente es una parte clave del conjunto de herramientas. En este artículo, Dustin Driver y Jason Laster descubren cómo el nuevo depurador de JavaScript de Firefox puede ayudarle a escribir código rápido y sin errores. Abrirán una aplicación de tareas pendientes muy simple con Debugger dividida en tres paneles: el panel de lista de fuentes, el panel de fuentes y el panel de herramientas. ¡Así es como funciona!

     

    console.logpuede decirle mucho sobre su aplicación, pero realmente no puede depurar su código. Para eso, necesita un depurador de JavaScript completo. El nuevo depurador de JavaScript de Firefox puede ayudarte a escribir código rápido y sin errores. Así es como funciona.

    En este ejemplo, abriremos una aplicación de tareas pendientes muy sencilla con Debugger. Aquí está la aplicación , basada en marcos básicos de JavaScript de código abierto. Ábrelo en la última versión de Firefox Developer Edition y luego ejecútalo debugger.htmlpresionando Option+ Cmd+ Sen Mac o Shift+ Ctrl+ Sen Windows. El depurador se divide en tres paneles: el panel de lista de fuentes, el panel de fuentes y el panel de herramientas.

    Vista previa grande

    El panel Herramientas se divide a su vez en barra de herramientas, expresiones de observación, puntos de interrupción, pila de llamadas y ámbitos.

    Vista previa grande

    Dejar de usarconsole.log

    Es tentador usarlo console.logpara depurar su código. Simplemente realice una llamada a su código para encontrar el valor de una variable y listo, ¿verdad? Claro, eso puede funcionar, pero puede resultar engorroso y llevar mucho tiempo. En este ejemplo, recorreremos debugger.htmlel código de la aplicación de tareas pendientes para encontrar el valor de una variable.

    Podemos usarlo debugger.htmlpara profundizar en la aplicación de tareas pendientes simplemente agregando un punto de interrupción a una línea de código. Los puntos de interrupción le indican al depurador que se detenga en una línea para que pueda hacer clic en el código y ver qué está pasando. En este ejemplo, agregaremos un punto de interrupción a la línea 13 del app.jsarchivo.

     

    Vista previa grande

    Ahora agregue una tarea a la lista. El código se detendrá en la función addTodo y podremos sumergirnos en el código para ver el valor de la entrada y más. Pase el cursor sobre una variable para ver el valor y más. Puedes ver anclajes, subprogramas, niños y todo tipo de cosas:

    Vista previa grande

    También puede sumergirse en el panel Ámbitos para obtener la misma información.

    Ahora que el script está en pausa, podemos recorrerlo usando la barra de herramientas. El botón de reproducción/pausa hace exactamente lo que dice en la lata. "Step Over" recorre la línea de código actual, "Step In" avanza hacia la llamada a la función y "Step Out" ejecuta el script hasta que la función actual sale.

    Vista previa grande

    También podemos usar una expresión de vigilancia para controlar el valor de una variable. Simplemente escriba una expresión en el campo Ver expresión y el depurador la vigilará a medida que avanza en el código. En el ejemplo anterior, puede agregar las expresiones "título" y "tareas pendientes" y el depurador mostrará los valores cuando estén disponibles. Esto es especialmente útil cuando:

    • Estás dando un paso y quieres ver cómo cambian los valores;
    • Estás depurando lo mismo muchas veces y quieres ver valores comunes;
    • Estás intentando descubrir por qué ese maldito botón no funciona.

    También puedes usarlo debugger.htmlpara depurar tus aplicaciones React/Redux. Así es como funciona:

    • Navegue hasta el componente que desee depurar.
    • Vea el esquema del componente a la izquierda (funciones en la clase).
    • Agregue puntos de interrupción a las funciones relevantes.
    • Haga una pausa y vea los accesorios y el estado de los componentes.
    • La pila de llamadas se simplifica para que pueda ver el código de su aplicación intercalado con el marco.

    Finalmente, debugger.htmlle permite ver código ofuscado o minimizado que podría estar provocando errores, lo cual es especialmente útil cuando se trata de marcos comunes como React/Redux. El depurador conoce los componentes en los que está en pausa y mostrará una pila de llamadas simplificada, un esquema de componente y propiedades. Aquí está el desarrollador Amit Zur explicando cómo utiliza el depurador de Firefox para profundizar en el código en JS Kongress : Fotos Porno y actrices porno

    Si está interesado en un tutorial detallado sobre la nueva versión debugger.html, diríjase a Mozilla Developer Playground . Hemos creado una serie de tutoriales para ayudar a los desarrolladores a aprender cómo utilizar eficazmente la herramienta para depurar su código.

    Herramientas de desarrollo de código abierto

    El debugger.htmlproyecto se lanzó hace unos dos años junto con una revisión completa de todas las Firefox DevTools. Queríamos reconstruir DevTools utilizando tecnologías web modernas para abrirlas a desarrolladores de todo el mundo. Y cuando una tecnología está abierta, es libre de crecer más allá de lo que nuestro pequeño grupo de Mozilla pueda imaginar.

     

    JavaScript es esencial para cualquier aplicación web avanzada, por lo que un depurador potente era una parte clave del conjunto de herramientas. Queríamos crear algo que fuera rápido, fácil de usar y adaptable, capaz de depurar cualquier nuevo marco de JavaScript que pudiera surgir. Decidimos utilizar tecnologías web populares porque queríamos trabajar más estrechamente con la comunidad. Este enfoque también mejoraría el depurador en sí: si adoptáramos WebPack y comenzáramos a usar una herramienta de compilación y mapas de origen internamente, querríamos mejorar el mapeo de origen y la recarga en caliente.

    Está debugger.htmlconstruido con React, Redux y Babel. Los componentes de React son livianos, comprobables y fáciles de diseñar. Usamos React Storybook para crear rápidamente prototipos de interfaz de usuario y documentar componentes compartidos. Nuestros componentes se prueban con Jest y Enzyme, lo que facilita la iteración sobre la interfaz de usuario. Esto facilita el trabajo con varios marcos de JavaScript (como React). Nuestra interfaz de Babel nos permite hacer cosas como mostrar la clase Componente y sus funciones en la barra lateral izquierda. También podemos hacer cosas interesantes como fijar puntos de interrupción a funciones, para que no se muevan cuando cambias tu código.

    Las acciones de Redux son una API limpia para la interfaz de usuario, pero podrían usarse con la misma facilidad para crear un depurador CLI JS independiente. La tienda Redux tiene selectores para consultar el estado de depuración actual. Nuestra prueba unitaria de Redux activa acciones de Redux y simula las respuestas del navegador. Nuestras pruebas de integración impulsan el navegador con acciones del depurador Redux. La arquitectura funcional en sí está diseñada para ser comprobable.

    Confiamos en la comunidad de desarrolladores de Mozilla en cada paso del camino. El proyecto se publicó en GitHub y nuestro equipo se puso en contacto con desarrolladores de todo el mundo para ayudar. Cuando comenzamos, las pruebas automatizadas eran un componente crítico para el desarrollo comunitario. Las pruebas previenen regresiones y documentan comportamientos que son fáciles de pasar por alto. Es por eso que uno de los primeros pasos que tomamos fue agregar pruebas unitarias para acciones de Redux y tipos de flujo para la tienda de Redux. De hecho, la comunidad se aseguró de que nuestra cobertura de Flow y Jest ayudaría a garantizar que cada archivo fuera escrito y probado.

    Como desarrolladores, creemos que las herramientas son más potentes cuanto más personas participan. Nuestro equipo central siempre ha sido pequeño (2 personas), pero tenemos un promedio de 15 colaboradores por semana. La comunidad aporta una diversidad de perspectivas que nos ayudan a anticipar desafíos y crear características que nunca hubiéramos soñado. Ahora formateamos pilas de llamadas para 24 bibliotecas diferentes, muchas de las cuales nunca habíamos oído hablar. También mostramos mapas WebPack y Angular en el árbol de origen.

    We plan to move all the Firefox DevTools to GitHub so they can be used and improved by a wider audience. We'd love for you to contribute. Head over to our GitHub project page for debugger.html to get started. We've created a full list of instructions on how to run the debugger on your own machine, where you can modify it to do whatever you'd like. Use it to debug JavaScript code for anything — browsers, terminals, servers, phones, robots. And if you see ways to improve it, let us know via GitHub.

    You can download the latest version of Firefox (and DevTools) over here.

    Further Reading

    • Knip: An Automated Tool For Finding Unused Files, Exports, And Dependencies
    • Recovering Deleted Files From Your Git Working Tree
    • The Future Of Frontend Build Tools
    • Overflow Issues In CSS

    (rb, ra, yk, il, mrn)Explore more on

    • JavaScript
    • Tools
    • DevTools
    • Debugging





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Depuración de JavaScript con un depurador real que no sabía que ya tenía

    Depuración de JavaScript con un depurador real que no sabía que ya tenía

    Design Token and UI Component Architecture, with Nathan Curtis SmashingConf New York 2024 Índice Dejar de

    programar

    es

    https://aprendeprogramando.es/static/images/programar-depuracion-de-javascript-con-un-depurador-real-que-no-sabia-que-ya-tenia-920-0.jpg

    2024-05-20

     

    Depuración de JavaScript con un depurador real que no sabía que ya tenía
    Depuración de JavaScript con un depurador real que no sabía que ya tenía

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20