Integración de Firebug y las Herramientas de Desarrollo

9 enero, 2016 20:12 por

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

Tal vez ya hayas escuchado sobre el esfuerzo para unificar las herramientas nativas de desarrollo de Firefox y Firebug. Hemos trabajado bastante para portar todas las características preferidas de Firebug a las herramientas nativas de desarrollo y hacerlas compatibles con la arquitectura de multi-proceso, inclusive el soporte para la depuración remota. Hemos estado trabajando para hacer la transición desde Firebug a las herramientas de desarrollo tan simple y libre de problemas como sea posible. Sí, como lo mencionamos antes, ¡nos estamos enfocando en desarrollar una gran herramienta para los desarrolladores!

Así que observemos como luce ahora.

El principal objetivo de la próxima generación de Firebug es ayudar a los usuarios sentirse cómodos cuando trabajen con las herramientas de desarrollo nativas y aquí es donde entra Firebug 3 (mejor conocido como Firebug.next). Firebug 3 no es otra herramienta de desarrollo, sino más bien una ligera capa construida encima de las herramientas de desarrollo, brindando un nuevo tema para permitir ver las herramientas de desarrollo como si fuese Firebug. Además posee algunas funcionalidades adicionales que estamos migrando poco a poco a las herramientas nativas.

Si te hace falta alguna característica (ejem. alguna de las que usabas en versiones anteriores de Firebug), deberías esperarlas como parte de las herramientas de desarrollo en el futuro.

Firebug 3

Dale un vistazo a la captura de pantalla inferior donde se muestra como lucen las herramientas de desarrollo si instalas Firebug 3 (la primera beta). ¿Te parece familiar?

Firebug 3 (también conocido como Firebug.next) no se distribuye desde AMO, así que puedes necesitar configurar la preferencia xpinstall.signatures.required (a través de about:config) a false.

Es la apariencia visual de Firebug migrada a las herramientas de desarrollo de Firefox para brindar algunas ventajas de disposición e interfaz. También se incluye en la barra de herramientas de Firefox el famoso botón de inicio de Firebug, que representa el punto de entrada para la caja de herramientas.

Observa como la opción Firebug Theme (tema de Firebug) está actualmente activa.

Botón de inicio de Firebug

El proceso para entrar a tus útiles herramientas es exactamente el mismo: puedes presionar el botón de inicio o la tecla F12.

Puedes que seas un fanático del panel DOM que se utiliza para inspeccionar el DOM de la página en la que te encuentras actualmente. Aunque todavía no es posible hacerlo desde las herramientas nativas, Firebug sí ofrece esta funcionalidad.

DOM panel

La vista previa de peticiones XHR en el panel de la consola (muy solicitada) también es soportada.

Vista previa de XHR

Algunas de las extensiones más populares han sido re-implementadas sobre las herramientas de desarrollo, esto no solo ayuda a mantener vivas las funcionalidades más populares, sino que estas implementaciones también sirven de ejemplo de cómo puedes hacer nuevas extensiones para las herramientas de desarrollo. Firebug no es requerido para ejecutar estas extensiones.

Si eres un desarrollador de extensiones, tal vez estés interesado en algunos ejemplos y enlaces a otros recursos para entender como extender las herramientas de desarrollo.

Ahora observemos cuáles extensiones están disponibles.

FireQuery

FireQuery es un complemento de Firefox construido sobre las herramientas de desarrollo para el desarrollo con jQuery. Aunque Firebug 3 no es requerido, podrán observar en las siguientes capturas las herramientas de desarrollo con el tema de Firebug activado (los otros temas también son soportados).

Elementos asociados a jQuery data muestran un pequeño icono de sobre en el panel de consola. Puedes inspeccionarlos haciendo clic en el ícono. También hay un botón jQuerify en el panel de consola que puedes usar para cargar jQuery en la página actual.

FireQuery extension

El panel del inspector también muestra el icono de sobre para elementos con datos de jQuery. Al hacer clic, se despliega un menú con más detalles.

fire-query-popup

Para mas información:

PixelPerfect

Pixel Perfect es un complemento de Firefox que permite facilitar a desarrolladores y diseñadores web la superposición  de una imagen (de un diseño) sobre la capa web. De esta manera puedes comparar pixel a pixel la página y el diseño.

Existe un botón de inicio para el acceso rápido a esta funcionalidad.

Botón de inicio de pixel art

Y aquí está la interfaz final de Pixel Perfect que puedes abrir al hacer clic en el botón anterior.

pixel-perfect-ui

Para más información, puedes ver:

Exportar a HAR

El soporte para exportar a HAR (HTTP Archive format, formato de archivo HTTP) desde el panel de red es ahora una característica nativa y no necesitas una extensión para ello. Todo lo que necesitas es seleccionar el panel de red (recarga la página si es necesario) y utiliza los siguientes dos menús contextuales:

  • Copiar todo como HAR: copiar los datos recolectados en el portapapeles.
  • Guardar todo como HAR: guarda los datos recopilados en un archivo.

La exportación de los datos desde el panel de red suele hacerse en procesos automatizados  (ejemplo, cuando se prueban aplicaciones web usando Selenium). Si deseas crear un archivo HAR automáticamente con cada carga de página, cuando lo necesites, debes configurar la siguiente preferencia (usando about:config) a true:

devtools.netmonitor.har.enableAutoExportToFile

Algunos sistemas automatizados necesitan mayor flexibilidad que solo crear archivos HAR después de cada carga de página. A veces es necesario enviar datos a un servidor remoto, recolectar y exportar HAR entre dos acciones específicas de usuario, entre otros. Por eso hemos introducimos una sencilla extensión llamada HARExportTrigger, para mejorar la automatización permitiendo exportar el API HAR al contenido de la página. Esto brinda posibilidad de usar pequeños scripts para disparar HAR en cualquier momento.

Aquí hay un ejemplo para obtener datos HAR desde el panel de red:

var options = {
  token: "test",
  getData: true,
};

HAR.triggerExport(options).then(result => {
  console.log(result.data);
});

Para mayor información:

Usando APIS de console.* en el servidor

La comunidad de Firebug ha implementado muchas extensiones que permiten a los desarrolladores utilizar las APIs console.* en el lado del servidor (HTTP), así puedes ver registros (logs) del backend desde tu navegador. Esta característica ahora es soportada en Firefox de forma nativa y no necesitas instalar una extensión adicional.

Todo lo que necesitas es activar los registros provenientes desde el servidor dentro del panel de la consola.

Logging del servidor en Firefox

Esta característica soporta un protocolo existente (utilizado en Chrome Logger) que envía los registros a través de cabeceras HTTP al cliente. Estos registros son posteriormente mostrados en el panel de la consola como si fuesen generados por el código JavaScript de la página. Para utilizarlo, puedes usar muchas librerías del lado del servidor que proveen el API del servidor en varios lenguajes (NodeJS, Ruby, Python, PHP, .NET, Java, etc.)

Aquí hay un ejemplo del registro desde el lado del servidor:

var chromelogger = require('chromelogger');
var http = require('http');
var server = http.createServer();

server.on('request', chromelogger.middleware);
server.on('request', function(req, res) {
  res.chrome.log('Hello from Node.js %s', process.version);
  res.end();
});

server.listen(7357);

Así es como luce un registro del lado servidor en el panel de la consola:
Registro del servidor en Firefox

Palabras finales

Como se mencionó al principio del artículo, estamos tratando de unificar las herramientas de desarrollo de Firefox y Firebug, pues creemos que es una estrategia muy efectiva para brindar excelentes herramientas a los desarrolladores. Hay más por venir, pero esta entrada debería darte una vista general de nuestro plan y hacia donde nos dirigimos. ¡Estén pendientes!

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