Firefox Developer Edition 48 – Firebug, almacenamiento, mejoras en el inspector y más

6 junio, 2016 4:03 por

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

Ya se ha liberado Firefox Developer Edition (Edición para Desarrolladores) 48, preparando la llegada de Firefox multi-proceso y el fin de soporte del complemento Firebug, por ello estamos migrando las características de Firebug a las herramientas de desarrollo del navegador. También hemos hecho mejoras a las herramientas actuales las cuales cubriremos en este artículo.

Tema de Firebug

Hemos migrado la apariencia de Firebug a las herramientas de desarrollo, brindando a los usuarios de Firebug un ambiente familiar para comenzar. Cabe destacar que es el lanzamiento inicial de este tema, así que por favor informarnos por aquí si encuentras cualquier error.

A continuación puedes observar como luce:

Nueva apariencia de Firebug

Panel del DOM

El panel del DOM es otra funcionalidad que migramos de Firebug. Este panel provee una vista de árbol para navegar e inspeccionar la estructura DOM de tu página, aquí podrás ver como luce esta herramienta:

Panel del DOM

Edición del almacenamiento

Se ha implementado una de las características más solicitadas. En este lanzamiento, hemos añadido la habilidad para editar y borrar cookies, almacenamiento local y entradas de almacenamiento de la sesión. Puedes editar una celda haciendo doble clic en ella, también puedes borrarlas usando el menú contextual.

Edita el almacenamiento del navegador

Borrar información del almacenamiento del navegador

Editor de geometría

En este lanzamiento, hemos añadido una herramienta de edición que te permite mejorar fácilmente la ubicación de elementos absolutamente posicionados o fijamente posicionados. Puedes cambiar los valores de los atributos top, left, bottom y right usando esta herramienta. Para usar el editor de geometría, ve a la pestaña «Modelo de caja» en el inspector y haz clic en el ícono Geometry editor icon.

Editor de geometría

Mejoras a la herramienta de Memoria

La herramienta de memoria ha sido mejorada con una nueva vista de mapa de árbol que permite dar una vista general de como se está usando la memoria. Esta nueva vista agrupa objetos de acuerdo a sus tipos, lo que te permite ver fácilmente la cantidad de elementos similares (arreglos cuando se dibujan líneas en el canvas, scripts cuando se carga un sitio pesado, etc.) que están llenando la memoria. También, el tamaño de cada elemento es proporcional a la cantidad de bytes usados, lo que te permite ver rápidamente cuales elementos están tomando gran parte de la memoria.

Vista de árbol de la herramienta de memoria de Firefox

La herramienta de memoria provee una vista muy útil, la vista de agregado que agrupa todas las instancias del mismo tipo de nodo. En esta versión, ahora puedes hacer clic en el ícono ⁂ para ver todas las instancias individuales de un tipo específico en una vista separada. También puedes ver las rutas de retención usando el panel que se agregó en la versión anterior, esto te permite descubrir como un objeto en específico está desbordando memoria cuando depures tu aplicación web.

Vista de nodos individuales

Finalmente, hemos añadido la posibilidad de eliminar capturas realizadas, desde la barra lateral de la herramienta de memoria.

Mejoras al inspector

Hemos pulido la experiencia de usuario en el inspector para hacerlo más fácil de utilizar. El autocompletado en la vista de reglas ahora selecciona los atributos más utilizados para incrementar la velocidad de tu trabajo. Por ejemplo, background será seleccionado en vez de backface-visibility porque se usa más frecuentemente. Aquí puedes ver una animación de cómo se usa:

Animación sobre las nuevas reglas CSS en las herramientas de desarollo de Firefox

Adicionalmente hemos mejorado cómo se manejan los valores grandes en la vista de reglas. Un nuevo modo de multi-línea se ha añadido específicamente para este tipo de valores, que te permite seleccionar y editar parte del valor en edición.

Entrada multilínea para valores grandes en Firefox

La vista del inspector ahora hace énfasis entre un nodo padre y sus hijos. El elemento seleccionado ahora tiene una línea bajo ella que resalta los nodos hijos. Esto te permite identificar fácilmente los nodos hijos del elemento seleccionado cuando el HTML es complejo.

Relación de padre e hijo en nodos

Se ha añadido una manera rápida de cambiar entre diferentes unidades de ángulos en la vista de Reglas, ahora hay un ícono de gráfico al lado de los ángulos en los cuales puedes presionar Shift + clic para rotar entre las diferentes unidades, similar a la interacción con los colores. Esta característica fue añadida por nuestro contribuyente colaborador Nicolas Chevobbe.

Rotar entre unidades de ángulos

Finalmente, hemos añadido atajos de teclado para navegar de forma sencilla entre la vista HTML y los resultados de búsqueda. Ahora puedes usar Shift+Enter para navegar hacia atrás en los resultados de búsqueda. También, Ctrl/Cmd+G y Ctrl/Cmd+Shift+G ahora funcionan como alias de Enter y Shift+Enter. Estos atajos de teclado fueron añadidos por el colaborador Steve Melia.

Mejoras a la consola

La consola recibió ligeras mejoras que mejorarán la experiencia diaria con esta herramienta. La primera mejora proviene de las características de Firebug que estamos migrando, ahora puedes expandir los registros de red para inspeccionarlos y ver sus detalles como en Firebug. Observa como es en la siguiente imagen:

Inspección de HTTP

Si estás trabajando con objetos Map o Set, ahora puedes ver e inspeccionar entradas individuales desde la barra lateral de la consola. Esta funcionalidad fue agregada por el contribuyente Jarda Snajdr.

map_set

Finalmente añadimos soporte para console.clear() para limpiar la salida de la consola.

Características de about:debugging

En preparación para el soporte de WebExtensions, hemos añadido una característica para ayudar a los desarrolladores de complementos. Ahora puedes recargar todos los complementes desde about:debugging, lo que te permite desarrollar rápidamente tus complementos sin tener que reinstalarlos cada vez que realices un cambio.

Recarga los complementos desde about:debugging

Si estás trabajando con Service Workers, notarás que añadimos una funcionalidad para remover workers. A continuación puedes ver una captura de pantalla:

Removiendo workers individuales

Otros cambios notables

Adicionalmente a los cambios anteriores, se han pulido varias áreas de la caja de herramientas como:

  • Las animaciones en pseudo-elementos ::before y ::after ahora se pueden inspeccionar desde el menú de inspección de animación. (Bug 1206420)
  • Los breadcrumbs se han movido a la parte inferior del inspector del panel. (Bug 1256422)
  • Ahora existe un botón para crear un nuevo nodo en el inspector. (Bug 1261781)
  • El cambio entre archivos en el depurador ahora es más rápido. (Bug 1233927)
  • Se ha mejorado el rendimiento del inspector de almacenamiento cuando se seleccionan valores grandes . (Bug 1156720)
  • Se ha mejorado la experiencia de los breakpoints para ser menos confusa. (Bug 1245030)
  • Nuevos íconos en la barra de herramientas. (Bug 1225184)
  • Se ha actualizado el ícono de limpiar (Bug 1251256) y ahora se encuentra consistente a lo largo de todas las herramientas. (Bug 1220208)

¡Gracias a todos los contribuyentes de este lanzamiento! Asegúrate de descargar una copia de Firefox Edición para Desarrolladores y comparte tus opiniones. Si tienes retroalimentación sobre diferentes características de Firebug que se están migrando, nos gustaría escuchar tus sugerencias y comentarios constructivos aquí.

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.

Compartir artículo:

  • ¡Participa!

    Colabora con la comunidad »
    En Mozilla lo importante son las personas. Descubre cómo puedes colaborar.

    Boletín Firefox

    Suscríbete al boletín de novedades de Firefox.

  • Descargas

    Descarga los programas de Mozilla.

    Lo más visto

    cc-by-sa