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:
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:
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:
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:
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:
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.
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:
- Ahora hay una configuración en el inspector para cambiar el truncamiento de los atributos DOM (Bug 1225063, notas de desarrollo)
- Ahora puedes obtener documentos de MDN utilizando el comando ‘mdn css’ en la consola de comandos (Bug 768469, notas de desarrollo)
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.
Latest posts by jorgev (see all)
- Simplificando los Canales de Distribución de Firefox - 29/08/2017
- Reporte de Hardware de Firefox para desarrolladores web - 08/07/2017
- Mejorando los temas en Firefox - 04/07/2017
Artículos relacionados
La detección de Agente de Usuario, historia y lista de verificación
Firefox para Desarrolladores 42: depuración de WiFi, Windows 10, Multiproceso, herramientas para ReactJS y más
Herramienta para animaciones web, panel de seguridad de red, mejoras en el inspector de tipografías y más – Firefox Developer Tools episodio 37
Pseudo elementos, inspección de promesas, cabeceras sin procesar y mucho más – Firefox Developer Edition 36
Start the discussion at foro.mozilla-hispano.org