Adentrándonos en el monitor de red de Firefox (parte 2)

10 marzo, 2018 2:02 por

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

En la publicación pasada, El monitor de red recargado, expusimos las razones por las cuales se rediseñó el Monitor de Red dentro de las herramientas de desarrollador. También aprendimos que usar los estándares de la web para construir herramientas de desarrollo nos permite ejecutarlas en diferentes entornos, cargadas ya sea dentro de la caja de herramientas de desarrollador de Firefox, o bien dentro de una pestaña del navegador como cualquier otra aplicación web.

En este artículo complementario, te mostraremos cómo probarlas y ver el monitor de red en acción.

Obtener el código

El código de las herramientas de desarrollador de Firefox es actualmente parte del repositorio de código de Firefox, así que descargarlo requiere descargar el repositorio completo. Hay muchas maneras de conseguir el código y trabajar en él. Posiblemente podrías iniciar con nuestra documentación de GitHub para obtener instrucciones más detalladas al respecto.

Una opción es usar Mercurial y clonar el repositorio de mozilla-central para obtener una copia local.

# Esto puede tomar un rato ...
hg clone https://hg.mozilla.org/mozilla-central
cd mozilla-central

Parte de nuestra estrategia de usar los estándares web para desarrollar herramientas para la web también incluye mudar nuestro código de Mercurial a Git (en github.com). Así que, a la larga, la manera de obtener código fuente cambiará permanentemente, y esto hará más fácil y más rápido clonar el código para poder trabajar en él.

Ejecutar la caja de herramientas de desarrollador

Por ahora, si tu deseas compilar el monitor de red y ejecutarlo dentro de la caja de herramientas de desarrollador, debes seguir detalladamente estas instrucciones.

Esencialmente, todo lo que necesitas hacer es usar el comando mach.

cd mozilla-central
./mach build

Después de que la compilación está terminada, ejecuta el binario compilado y abre la caja de herramientas de desarrollador (Herramientas -> Desarrollador web -> Alternar herramientas).

Puedes recompilar rápidamente después de hacer algún cambio al código fuente de la siguiente forma:

./mach build faster

Ejecutar servidor de desarrollo

Para poder ejecutar el monitor de red dentro de una página web (función experimental) necesitarás instalar los siguientes paquetes:

Hemos desarrollado un contenedor sencillo que te permite ejecutar las herramientas de desarrollador de Firefox (no solo el monitor de red) dentro de una página web. Se llama Launchpad. Launchpad es responsable de establecer la conexión a la instancia de Firefox que está siendo depurada y de cargar la herramienta del monitor de red.

El siguiente diagrama describe todo el concepto:

Diagrama Launchpad

  • El monitor de red (cliente) está ejecutándose dentro de una pestaña del navegador (Browser) tal como cualquier otra aplicación web estándar.
  • La aplicación es servida por el servidor de desarrollo (Server) a través de localhost:8000.
  • El monitor de red (cliente) está conectado a la instancia final de Firefox siendo depurada a través de un WebSocket.
  • La instancia final seleccionada de Firefox necesita escuchar el puerto 6080 para permitir que la conexión WebSocket sea creada.
  • El servidor de desarrollo es iniciado usando yarn start

Demos una mirada más a fondo en cómo establecer el entorno de desarrollo.

Primero necesitamos instalar las dependencias para nuestro servidor de desarrollo:

cd mozilla-central
cd devtools/client/netmonitor
yarn install

Ahora ya podemos ejecutarlo:

yarn start

Si todo está correcto, deberíamos ver el siguiente mensaje:

Development Server Listening at http://localhost:8000

Después, necesitamos escuchar las conexiones entrantes dentro de nuestro navegador Firefox que deseamos depurar. Abrimos la caja de herramientas de desarrollador (Herramientas -> Desarrollador web -> Caja de herramientas de desarrolladores) y escribir el siguiente comando dentro de ella. Esto iniciará el monitoreo, tal que las herramientas puedan conectarse a este navegador.

listen 6080

La interfaz de la caja de herramientas de desarrolladores debería ser abierta al fondo de la ventana del navegador.

Caja de herramientas de desarrolladores

Finalmente, puedes cargar localhost:8000

Interfaz de Launchpad

Ahora tu deberías de ver la interfaz de usuario de Launchpad, la cual lista las pestañas abiertas del navegador Firefox seleccionado. Deberías también de ver cuál de esas pestañas es el Launchpad en sí (la última pestaña del navegador ejecutándose desde localhost:8000)

Todo lo que necesitas hacer es dar click en la pestaña que deseas depurar. Tan pronto como Launchpad y las herramientas del monitor de red se conecten a la pestaña del navegador seleccionada, puedes recargar la pestaña conectada y ver una lista de las peticiones HTTP.

Monitor de red

Si cambias el código subyacente y recargas la página, verás tus cambios inmediatamente.

Dale un vistazo a nuestro siguiente vídeo para un detallado paso a paso de la puesta en marcha de la herramienta monitor de red sobre el Launchpad y sobre cómo utilizar la asombrosa característica de recarga para ver los cambios del código instantáneamente.

Igualmente podrías querer revisar mozilla-central/devtools/client/netmonitor/README.md para información más detallada acerca de cómo compilar y ejecutar la herramienta monitor de red.

Planes a futuro

¡Creemos que construir herramientas para la web usando tecnologías web estándares es el camino correcto a seguir! Nuestras herramientas son para desarrolladores web. Nos gustaría que fueras capaz de trabajar con nuestras herramientas usando las mismas habilidades y conocimientos que aplicas cuando desarrollas aplicaciones y servicios web.

Estamos planeando muchas más poderosas características para las herramientas de desarrollador de Firefox, y creemos que el futuro nos espera con muchas más cosas emocionantes. Aquí hay un adelanto de lo que está por venir:

  • Conexión con Chrome
  • Conexión con NodeJS
  • Integración con IDEs existentes

¡Mantente al tanto!

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.

Compartir artículo:

Notable Replies

  1. Interesante, no conocía que se podía hacer eso.

Continue the discussion foro.mozilla-hispano.org

Participants

  • ¡Participa!

    Firefox Friends »
    Agrega botones de Firefox en tu sitio web y comparte tu amor por Mozilla Firefox.
    Armada alucinante »
    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