0

Edición para desarrolladores 50: consola, herramienta de memoria, monitor de red y más

16Nov
en Blog, Desarrollo web, Firefox, Web

Esta es una traducción del original publicado por Mozilla Hacks.

Firefox Edición para Desarrolladores 50 está aquí con numerosas mejoras que te ayudarán a trabajar con: peticiones de red iniciadas por scripts, manipular datos de indexedDB y mucho más. También introduce algo que deseábamos desde hace mucho, así que vamos directo a ello.

Consola

Después de una larga espera, llega la característica a las herramientas de desarrollo, pero aún necesitamos tu ayuda en la fase final de pruebas. La característica de source maps (mapas de fuente) está desactivada por defecto, tal como siempre lo hacemos antes de liberarlo al resto de las personas.

Si tienes curiosidad de por qué esto ha sido una tarea retadora, puedes leer este artículo en inglés de James Long: On the Road to Better Sourcemaps in the Firefox Developer Tools.

Pero si deseas saber como surgió la solución, te parafrasearemos lo escrito por Joe Walker,

“Los pasantes no suelen tener todo el transfondo de la dificultad de los bugs, y algunas veces saltan a bugs realmente retadores – lo que quiero decir, ¡gracias, pasantes!”

Así que, muchas gracias al pasante de las herramientas de desarrollo de Firefox Jaideep Bhoosreddy por descubrir cómo solucionarlo.

Los source maps te permiten compactar todos los archivos JavaScript en un solo archivo, para ahorrar tiempo de descarga a tus usuarios o para compilarlo de otro lenguaje (como TypeScript o CoffeeScript) a JavaScript, mientras se mantiene la referencia a los archivos originales, para que no sea una pesadilla depurarlos.

Los source maps eran soportados por el depurador pero no en la consola, hasta ahora. Esto significaba que cualquier mensaje registrado tenía su ubicación (el archivo y la línea de donde el registro se emitió) apuntando al archivo JavaScript compilado, pero si ese archivo era muy largo o minificado, la información de ubicación era casi inútil.

Pero ya esos tiempos finalizaron, ahora la consola mostrará el archivo original y no la versión compilada. Puedes verlo en acción en la imagen inferior con un archivo de CoffeeScript:

webconsole_sourcemap-1

Esta característica actualmente se encuentra desactivada por defecto y puede ser activada desde las preferencias. Debido a que existen varias implementaciones para construir el archivo source map, deseamos realizar una prueba inicial en cada una diferentes variaciones, y solo lo podemos hacer con tu ayuda:

Para activar el soporte de source map en la consola, debes activar la preferencia.

  • Ve a about:config
  • Busca devtools.sourcemap.locations.enabled
  • Haz doble clic en la línea para cambiar el valor a true
  • Cierra y vuelve a abrir la consola.

Activar source map en Firefox

Si ves algo mal, comunícate con @firefoxdevtools en Twitter o avísanos en el canal IRC de #devtools.

Trazado de la pila de red

En Firefox Edición para Desarrolladores 50, la consola ahora muestra la traza de la pila de red proveniente de una petición HTTP. Esto ya viene activado por defecto.

Traza de red en la consola de Firefox

Herramienta de memoria

Ahora la herramienta de memoria es activada por defecto. Esta es una de las herramientas obligatorias para depurar y mantener el rendimiento de una aplicación, pues te ayuda a encontrar y arreglar fugas de memoria en tus aplicaciones. Si deseas aprender más sobre ello, puedes leer el artículo en MDN.

Monitor de red

En Firefox 49 se agregó la columna “Causa”, la cual muestra cómo se inició la petición de red, su tipo y la traza de pila que la creó (si está disponible). El diálogo de la traza de pila ahora muestra la causa del marco asíncrono (XHR, Promise, setTimeout, etc.), similar al panel de la traza de pila.

Traza de red asíncrona

Además, las entradas pueden ser ordenadas por su causa al hacer clic en la cabecera de la columna. Esto puede ser de ayuda para encontrar rápidamente todas las peticiones de red que fueron iniciadas, por ejemplo, por fetch.

Visor de JSON

El visor de JSON ha sido refinado y muestra los datos de mejor manera:

Inspector de almacenamiento

Siguiendo el esfuerzo global realizado por Mike Ratcliffe y Jarda Snajdr para mejorar el inspector de almacenamiento, ahora es posible remover un solo registro de indexedDB desde el menú contextual.

Remover entrada de IndexDB

about:debugging

Los Service Workers son definitivamente la gran innovación del desarrollo Web, proveyendo un conjunto de herramientas que puedes usar para construir aplicaciones web progresivas que tengan la misma funcionalidad que las nativas, con capacidad de funcionar sin conexión y notificaciones push.

¿Sabías que puedes administrar los Service Workers en la página de about:debugging#workers? Esta página ahora también muestra puntos de suscripción de tipo push y te permite enviar una notificación de prueba con tan solo hacer clic en un botón.

Servicio de notificaciones push

Otras notas

Íconos: Se mejoraron todos los íconos de la barra superior de las herramientas de desarrollo de Firefox 50. Ahora tienen una apariencia más consistente y lucen mas nítidas.

Iconos en Firefox 49

Iconos en Firefox 49

Iconos en Firefox 50

Iconos en Firefox 50

WebAssembly: Como dijo Luke Wagner en una entrada anterior:

“WebAssembly es un estándar emergente cuya meta es definir una forma segura, portable, compilador binario con tiempo de carga y tamaño eficiente que apunta a ofrecer rendimiento cercano al nativo”

Los archivos WebAssembly ya estaban soportados en el depurador y ahora son resaltados lo que los hace lucir mejor.

Resaltado de WebAssembly en las herramientas de desarrollo de Firefox

Y para finalizar, un cambio menor pero muy útil: el editor de estilos se puede desactivar para ahorrar espacio si no lo usas.

Con esto, hemos completado las nuevas características de la Edición para Desarrolladores 50. Descarga la última actualización y permítenos conocer que piensas. Por cierto, una última cosa, gran parte de las mejoras cubiertas en esta entrada fueron posibles gracias a nuestros grandiosos colaboradores. Muchas gracias a todos ellos.

Las herramientas de desarrollo están escritas utilizando HTML estándar, JavaScript y CSS, así que si tienes alguna experiencia en frontend, puedes contribuir sin problemas. Si deseas hacer las herramientas de desarrollo cada vez superior, puedes encontrar bugs sencillos para empezar, en el sitio https://firefox-dev.tools/. ¡Todos son bienvenidos!

Fuente: Blog Lab de Mozilla Hispano

Dejar un comentario

¿Eres humano? Entonces resuelve esta operación: * Límite de tiempo se agote. Por favor, recargar el CAPTCHA por favor.