Categorías: Labs

Edición para desarrolladores 54: nuevas funcionalidades en el inspector y depurador, ayuda de MDN en el monitor de red y más

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks.

No tuvimos oportunidad de escribir sobre la versión 53 así que ahora lo haremos para la versión 54 que ya está disponible. Así que descubramos las nuevas características y correcciones aplicadas a estos nuevos lanzamientos.

Hay mucho por cubrir así que empecemos.

El inspector

Ahora el inspector posee total compatibilidad con color CSS nivel 4, lo que significa que la sintaxis de color como  hsl(120deg 100% 50%) se reconoce dentro del panel de reglas de CSS.

La gente ama nuestra característica de captura de pantalla. En la edición de desarrollares 53 añadimos una característica que cuando se activa, copiará las capturas al porta-papeles directamente, para que puedas pegar esas imágenes en otras aplicaciones.

Los usuarios de Firebug estaban acostumbrados a copiar toda la ruta CSS de un nodo en particular desde el inspector. Esta funcionalidad ahora se añadió a las herramientas de desarrollo tal como se muestra aquí:

Cuando los nodos son contraídos en el inspector, no era posible saber si tienen hijos o no. Ahora una ayuda visual se muestra entre las etiqueta de apertura y cierre tal como se muestra a continuación:

Nodos hijoMucho trabajo se ha realizado para hacer el inspector mas rápido y mas confiable, particularmente ahora el árbol DOM se inicia con el evento DOMContentLoaded.

El inspector de cuadrícula CSS, que puede ser activado o desactivado desde el panel de reglas CSS, se muestra en casos como display:inline-grid o display:grid !important.

Asynchronous Panning and Zooming (APZ) es la tecnología en Firefox que hace que el desplazamiento en páginas largas sea súper rápido y suave. Ahora todas las capas que el inspector muestra en páginas web (como el modelo del caja o las líneas de cuadrícula CSS) se benefician de ello y se mueven suavemente con la página.

En algunas situaciones, puede ser difícil conocer la parte de una propiedad que esta siendo sobrescrita por una regla CSS. Por ejemplo, cuando un atributo de nombre largo (como margin-bottom en margin) sobrescribe a uno corto, el panel de reglas CSS no lo muestra al menos que expandas la propiedad. Esto ha cambiado y ahora el panel de reglas luce de esta forma:

Visualización de reglas sobrescritas

Al hacer clic derecho en un atributo en el inspector ahora te muestra una entrada de menú que permite copiar los valores de los atributos. (Adicionalmente a editar, añadir y borrar, que ya existían previamente.):

Copiado de atributos en las herramientas de Firefox

El depurador

Nuestra grandiosa interfaz de depuración (disponible por el momento a los usuarios de Nightly y edición de desarrolladores) obtuvo una gran cantidad de nuevas características en Firefox 54.

Ahora puedes agregar expresiones observables (watch) en la barra lateral, las cuales se evaluarán cuando pauses:

watch en Firefox

El estado de la interfaz ahora se guarda entre las sesiones: pestañas abiertas, si la barra lateral se ha contraído, el código fuente seleccionado, dónde quieres pausar en el depurador, etc., facilitando el proceso de volver a depurar.

Ahora el depurador soporta la contracción a una disposición vertical cuando no hay suficiente espacio:

Disposición vertical

La búsqueda de código ha mejorado: se resalta el texto que coincide, el número total de resultados se muestra en la barra de búsqueda y una nueva búsqueda de funciones ahora está disponible:

Búsqueda

La visualización agradable del código (pretty-printing) ha sido implementada, así que ahora puedes hacer que los archivos minificados sean más fáciles de leer. Esta funcionalidad muestra la versión agradable en una nueva pestaña:

mejorado del código

Finalmente, al pasar el cursor sobre una variable en la fuente, ahora muestra una previsualización para esta variable y permite ver el valor:

Almacenamiento

Primero un recordatorio: Si no ves el panel de almacenamiento en las herramientas de desarrollo, debes activarlo primero en el panel de configuración. (Estamos trabajando en una forma de abrir herramientas nuevas.)

Habilitar almacenamiento

En la sección de cookies, cuando hay varias cookies con el mismo nombre, ahora se muestran correctamente.

Datos locales almacenados por las WebExtensions ahora se muestran en el panel de almacenamiento.

El tipo de almacenamiento IndexedDB ahora se puede ver en una nueva columna. Puedes aprender mas sobre estos tipos de almacenamiento en MDN.

Tipo de almacenamiento

Finalmente, el panel de almacenamiento ahora carga mas rápido cuando tu perfil de Firefox tienen muchos datos de tipo IndexedDB.

Monitor de Red

Tal vez ya sabes que duramos bastante tiempo el año pasado en migrar nuestras herramientas del markup XUL y JavaScript exclusivo de Firefox a HTML, CSS y JavaScript estándar. Bueno, estamos felices de reportar que el Monitor de Red ahora es parte del conjunto de herramientas reescritas. Debería ser mas fácil trabajar en el panel si tienes experiencia en HTML, CSS, y React.

También hemos añadido alguna documentación de MDN en el Monitor de Red. Particularmente, tanto los códigos de estado HTTP y respuestas HTTP traen enlaces que permiten abrir documentación relevante en MDN:

Enlazes a MDN

Ahora aparece el “transferido” en la barra del monitor de red, que indica cuántos datos realmente se transfirieron sobre la conexión (útil cuando los datos son comprimidos). Como antes, al hacer clic en esta etiqueta se mostrará un vista con información del rendimiento, pero ahora esta vista incluye el tamaño transferido:

Transferido

Modo de diseño adaptable

Los controles de la dimensión se han movido a la parte superior de la vista para facilitar su uso y visualización:

Controles en la vista adaptable de Firefox

También hemos añadido la habilidad para que los usuarios puedan agregar sus dispositivos personalizados a la lista de los equipos predefinidos:

Equipos personalizados

Visor JSON

El visor JSON ha estado en los canales Nightly y Edición para Desarrolladores por un tiempo. Con Firefox 53, lo activamos para todos los canales, lo que significa que si corres la versión estable de Firefox, las respuestas en formato JSON serán mas fáciles de leer y explorar:

Visor JSON

El visor de JSON se muestran para archivos con el mime-type application/manifest+json.

Nuevas API de WebExtensions para las herramientas

Las WebExtensions es la nueva manera de escribir extensiones para Firefox y que son compatibles en gran parte con Google Chrome y Opera.

Firefox ahora soporta APIs de WebExtensions para las herramientas de desarrollo, ¡lo que significa que las extensiones para las herramientas de desarrollo de Chrome ahora también funcionan con las de Firefox!

Particularmente, es posible crear nuevos paneles de las herramientas de desarrollo con el API devtools.panels.create, o inclusive ejecutar código en la ventana de contenido con el API devtools.inspectedWindow.eval.

Hemos creado un repositorio en GitHub que contiene ejemplos de cómo construir extensiones con WebExtensions usando el API para las herramientas de desarrollo.

Mejoras en el contenido de derecha-a-izquierda

Muchas mejoras se han hecho RTL (derecha-a-izquierda) en este par de lanzamientos. El panel de configuración ahora soporta en su totalidad RTL, los estilos computados en el panel de estilos en el inspector también funciona mejor con RTL,  el visor JSON lo soporta, el panel DOM y el panel de tipografía en el inspector recibieron cariño de RTL.

Más mejoras

El tema de Firebug recibió varias mejoras y ahora funciona mejor para los usuarios de Linux y Mac (particularmente el tamaño de la fuente, mejor espacio, el menú y algunos colores fueron arreglados).

El icono para la vista de diseño adaptable en la caja de herramientas ha sido cambiado. Era muy similar al icono de ocultar y ahora es mas fácil de encontrar:

Finalmente, todos los botones se mostrados en la barra de herramientas, ahora muestras su respectivo atajo de teclado al pasar el cursor por encima.

Atajos de teclado

¡Gracias!

Muchos voluntarios ayudaron a mejorar los bugs e implementar nuevas características en estos lanzamientos, para ver la lista de ellos puedes verla aquí si estas interesado(a).

Como siempre, nos gustaría saber qué opinas de esto. Puedes añadir un comentario por aquí, reportar un bug si ves algo mal, o discute nuevas ideas o pregunta por ayuda en el foro oficial.

The following two tabs change content below.
Colaborador de Mozilla Venezuela e Hispano en las áreas de desarrollo y medios sociales, entre otros. También soy desarrollador Web, Skateboarder, Profesor universitario, jugador de Playstation y PC, usuario Linux, Blogger, Geek, entre otros.