El monitor de red recargado (parte 1)

14 octubre, 2017 0:01 por

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

La herramienta del monitor de red ha estado disponible en Firefox desde los primeros días de las herramientas de desarrollo de Firefox. Es una herramienta indispensable para cualquier persona que se preocupa por el rendimiento de carga de las páginas web y las páginas web modernas y rápidas. Esta herramienta pasó por una extensa refactorización recientemente (bajo el nombre Netmonitor.html) y este artículo pretende ser una explicación de cómo diseñamos la nueva arquitectura y qué nuevas tecnologías hemos utilizado.

Observa el monitor de red ejecutándose dentro de la caja de herramientas de desarrollador de Firefox:

Monitor de red

Objetivos

Uno de los principales objetivos de la refactorización fue reconstruir toda la herramienta utilizando tecnologías web estándar. Hemos eliminado todo el código antiguo específico de Firefox como XUL (XML User Interface Language), pero también el código que utilizaba APIs específicas de Firefox. Este es un gran paso adelante, ya que utilizar estándares web ahora te permite ejecutar todo el código en dos entornos diferentes:

  • Caja de herramientas de desarrollo
  • Cualquier página web

El primer caso es bien conocido para cualquiera que este familiarizado con las herramientas de desarrollo de Firefox (también puedes ver la imagen anterior). La caja de herramientas de desarrollo puede ser abierta fácilmente en la parte inferior de la ventana del navegador con varias herramientas, monitor de red incluido, a tu alcance.

El segundo caso de uso es nuevo. Ahora la herramienta puede cargarse dentro de una pestaña del navegador como cualquier otra aplicación web estándar. Observa cómo se ve en la siguiente captura de pantalla:

Monitor de red versión web

Nota que la página se carga desde localhost:8000. Ahí es donde se está ejecutando el servidor de desarrollo.

¡La posibilidad de ejecutar la herramienta como una aplicación web es una gran oportunidad! Ahora podemos utilizar todas las herramientas del navegador para el trabajo de desarrollo. Aunque antes era posible usar las herramientas de desarrollo para depurar las herramientas de desarrollo (con la caja de herramientas del navegador), ahora es mucho más fácil y más conveniente simplemente el uso de las herramientas del navegador. Y por supuesto, podemos ejecutar la herramienta en otros navegadores. El desarrollo también es más simple ya que no tenemos que compilar Firefox. En su lugar, una simple recarga de la pestaña es suficiente para volver a cargar el monitor de red y probar tus cambios en el código.

Arquitectura

Hemos construido el front-end del nuevo monitor de red sobre las siguientes tecnologías:

Las herramientas de desarrollo de Firefox necesitan funciones complejas para la interfaz gráfica y estamos usando el popular combo React & Redux para todas nuestras herramientas para construir un código limpio y consistente. El monitor de red no es una excepción. Hemos implementado un conjunto de componentes de React los cuales son responsables de procesar la vista (interfaz), un almacén con todos los datos interceptados por HTTP y finalmente un conjunto de acciones que el usuario podría querer ejecutar.

También hemos cambiado la forma en la que escribimos las pruebas. En lugar de utilizar la infraestructura de pruebas específica de Firefox, estamos cambiando lentamente hacia bibliotecas bien conocidas como Mocha y Enzyme. De esta manera es más fácil entender nuestro código y también contribuir a él.

Estamos utilizando Webpack para crear un paquete cuando se ejecuta dentro de una página web. Por consiguiente el paquete es servido a través de localhost:8000.

La arquitectura general está basada en un flujo introducido en el concepto React & Redux.

Arquitectura de herramientas de desarrollo

  • El componente raíz que representa el NetMonitorApp puede ser renderizado dentro de la caja de herramientas o en una página web.
  • Las acciones son responsables de cosas como el filtrado, limpieza de la lista de peticiones, ordenamiento y apertura de un panel lateral con información detallada.
  • Todos nuestros datos son almacenados dentro del objeto de almacenamiento. Incluyendo todos los datos recopilados sobre el tráfico HTTP.

Nuevas características

Hemos estado centramos principalmente en la refactorización del código, pero también se han implementado algunas nuevas características / mejoras en la interfaz de usuario a lo largo del camino. Veamos algunas de ellas.

Selector de columna

Hay nuevas columnas con información adicional sobre las solicitudes individuales y el usuario puede usar el menú contextual para seleccionar las que son importantes.

Columnas de monitor de red

Resumen de datos

Hemos implementado un mejor resumen de las solicitudes mostradas actualmente en la lista. Ahora se encuentran en la parte inferior del panel.

Resumen de datos

  • Número de peticiones en la lista
  • Tamaño / tamaño transferido de todas las peticiones
  • Tiempo total requerido para cargar todas las peticiones
  • Tiempo en que el evento DomContentLoaded
  • Tiempo en que el evento load ocurre

Filtrado por propiedades

La interfaz de usuario del filtrado es ahora mucho más potente. Es posible filtrar la lista de peticiones conforme a varias propiedades. Por ejemplo, puedes escribir: larger-than:50 en la caja de entrada del filtro para ver sólo aquellas peticiones que son mayores de 50 bytes.

Lee más sobre el filtrado por propiedades en MDN.

Filtrado de propiedades

Aprende más en MDN

Hay enlaces en muchos lugares de la interfaz de usuario que llevan a MDN para obtener más información. Por ejemplo, puedes aprender rápidamente cómo se utilizan varias cabeceras de HTTP.

Enlaces a MDN

Conclusión

Creemos que construir la nueva generación de herramientas para desarrolladores de Firefox utilizando estándares web es el camino correcto, ya que significa que las herramientas pueden ejecutarse en diferentes entornos e integrarse de manera más eficaz con otros proyectos (por ejemplo, IDEs). Basarse en estándares web hace muchas cosas posibles: ahora también podemos pensar en empaquetar nuestras herramientas como un servicio web que pueda beneficiarse de la plataforma de Internet. Podemos compartir datos recopilados, así como el contexto de depuración a través de la web, abriendo así las puertas a un verdadero mundo de depuración social.

El equipo de Netmonitor.html ha hecho una gran cantidad de trabajo en la refactorización. Muchas gracias al equipo principal:

  • Ricky Chien
  • Fred Lin

Pero también ha habido muchos contribuyentes externos:

  • Jaroslav Snajdr
  • Leonardo Couto
  • Tim Nguyen
  • Deepjyoti Mondal
  • Locke Chen
  • Michael Brennan
  • Ruturaj Vartak
  • Vangelis Katsikaros
  • Adrien Enault
  • Y muchos más…

Haznos saber lo que piensas. Puedes unirte a nosotros en el canal de Slack devtools-html.

The following two tabs change content below.

jorgev

AMO Product Manager 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.

Compartir artículo:

Start the discussion at foro.mozilla-hispano.org

  • ¡Participa!

    Firefox Friends »
    Agrega botones de Firefox en tu sitio web y comparte tu amor por Mozilla Firefox.
    Ayuda a otros usuarios en Twitter.
    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