Categorías: Sin categoría

Firefox Developer Edition 47 – Emulación de agente de usuario, depuración de popups y más

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

En otros artículos hemos cubierto el complemento DevTools Reload y las herramientas de service workers, así que asegúrese de revisarlos. En este post, vamos a cubrir el resto de las actualizaciones y cambios en la versión 47 del Developer Edition.

Emulación de agente de usuario

Hemos añadido la capacidad de emular un agente de usuario personalizado en cualquier página web desde el modo responsivo. Ahora puedes simplemente escribir su nueva cadena de agente de usuario dentro del campo “agente de usuario personalizado”. Puedes usar esto para verificar si un sitio utiliza la captura de agente de usuario. Por ejemplo, puedes escribir el agente de usuario de un navegador móvil para ver cómo un sitio web se vería en tu teléfono.

Aquí una animación de la función:

Emulación de agente de usuario

Grafos de rutas de retención

En la versión anterior habíamos añadido una vista dominador para ayudarle a depurar aplicaciones con uso intensivo de memoria. En esta versión, la hemos mejorado mediante la incorporación de un panel de rutas de retención, lo que te da un gráfico que muestra todos los nodos que están impidiendo un nodo seleccionado sea tomado por el recolector de basura. Esto es particularmente útil cuando se está depurando una posible fuga de memoria. Puedes leer más sobre esta opción en la documentación MDN aquí.

Acá hay una captura del grafo:

Vista dominador

Entrada multilínea de la consola

La manera en que se maneja la entrada de varias líneas en la consola ha sido mejorada. Cuando se pulsa la tecla “Enter”, la consola ahora detecta si tu entrada es completa o no. Si es así, pulsar la tecla “Enter” simplemente ejecuta el comando. Si no es así, pulsar la tecla “Enter” agregará una nueva línea a la entrada, para que puedas continuar escribiendo el comando sin problemas.

Inspector de almacenamiento

El inspector de almacenamiento ahora tiene soporte para el almacenamiento de caché, lo que es muy útil si estás depurando un service worker. Asegúrese de revisar la entrada en el blog de Sole Penadés que se sumerge en los detalles de la depuración de service workers.

Además del soporte de almacenamiento de memoria caché, ahora se puede filtrar los contenidos de la tabla utilizando el cuadro de búsqueda situado en la barra de herramientas superior. Aquí hay una captura de la función:

Inspector de almacenamiento

Cambios de tema

En esta versión, le dimos un afinamiento visual a la caja de herramientas. Hemos hecho pequeños retoques como la reducción del tamaño por defecto de las pestañas y añadimos nuevos íconos dentro de la herramienta de memoria, pero también hemos hecho algunos cambios importantes. Por ejemplo, le dimos un cambio de imagen completo al tema claro, para darle un aspecto más ligero y más pulido.

Aquí está una captura de pantalla del nuevo tema claro:

Tema claro

También hemos actualizado el estilo de la viñeta del depurador – los puntos de ruptura condicionales se destacan en la viñeta en naranja. Aquí hay una captura de pantalla:

Depurador

Por último, hemos movido la barra de herramientas de monitor de red a la parte superior para ser más accesible y más consistente con las otras herramientas.

Monitor de red

Depuración de popups para complementos

Preparándonos para el lanzamiento de WebExtensions, estamos añadiendo nuevas características que harán más fácil la depuración de los complementos. En esta versión, hemos hecho mucho más fácil la inspección de los popups (ventanas emergentes). Ahora puedes bloquear las ventanas emergentes para que no desaparezcan una vez que se hace clic en otro lugar. Para utilizar esta función, es necesario lanzar la Caja de Herramientas del Navegador y hacer clic en el icono con los cuatro cuadrados ubicados en la esquina superior derecha de la caja de herramientas. Puede leer más acerca de cómo depurar las extensiones aquí.

Aquí un vídeo que muestra esta función en acción:

Otros cambios notables

Además de las mejoras anteriores, hemos pulido varias zonas a través de la caja de herramientas, en particular:

También hemos eliminado la vista 3D, ya que esta función entra en conflicto con la versión de multiproceso de Firefox. Si deseas utilizar esa función, puedes instalar este complemento en su lugar.

Por último, el inspector de fuentes ha sido deshabilitado por defecto, ya que se retrabajará para futuras versiones. Puedes volver a activar la herramienta alternando la preferencia devtools.fontinspector.enabled en about:config.

¡Gracias a todos los que han contribuido a esta versión del Developer Edition! Obtiene una copia de la última edición para desarrolladores ahora y dinos lo que piensas.

The following two tabs change content below.

jorgev

Add-ons Developer Relations Lead at Mozilla
Jorge trabaja para el equipo de complementos de Mozilla, y se dedica a Mozilla Hispano y Mozilla Costa Rica en su tiempo libre. Actualmente está encargado del blog de Mozilla Hispano Labs.