Herramientas de desarrollador de Firefox

La labor de desarrollar una página o un aplicación web puede resultar más o menos duro, dependiendo en gran medida de las herramientas utilizadas: IDEs, lenguajes, editores… Sin embargo, mucho más duro es ir a probar y testear nuestra aplicación desarrollada con esfuerzo, ya que dada la gran cantidad de dispositivos existentes hoy en día, no basta con abrirla en nuestro navegador favorito y comprobar que todo va de perlas. Para ver si realmente funciona hay que probarla en todos los navegadores posibles (Firefox, Chrome, Internet Explorer, Opera, Safari…), ya que cada cual tiene pequeñas particularidades y puede provocar reacciones diferentes al código, sobre todo a las hojas de estilos CSS.

Pero, además de esto, la gran cantidad de dispositivos diferentes complican la labor todavía más, pues una página puede verse perfecta en todos los navegadores del PC, pero ser insufrible cuando navegamos por ella con una Tablet o, aún peor, un Smartphone. Así pues, deberemos tener una gran cantidad de dispositivos desde los cuales conectarnos a la web y probar todas sus características. Esto aparte de caro (los dispositivos no son nada baratos), puede resultar engorroso y difícil de llevar a cabo, ya que nos obliga a tener múltiples hojas de estilos y scripts que nos dificultan encontrar el punto que falla de nuestra aplicación. Por ésta razón hace falta alguna herramienta que nos ayude en todo éste proceso, por ejemplo las herramientas del desarrollador de los navegadores. En el presente artículo voy a describir las herramientas de Mozilla Firefox, ya que es el navegador que más utilizo y el que mejor conozco, pero cualquier otro navegador dispone de las mismas o muy similares herramientas, por lo que será fácil ver la correspondencia y aprender a utilizarlas todas.

Para acceder a estas herramientas, casi todos los navegadores suelen utilizar la tecla F12, aunque también se puede navegar por el menú de herramientas y buscar las ‘herramientas de desarrollo’ o ‘herramientas para desarrolladores’. En Firefox se trata de un menú separado que se llama, simplemente: ‘Desarrollador’.

En éste menú de desarrollador encontramos todas las herramientas de desarrollador que hay disponibles, pero entremos en la que entremos, se desplegará un panel de la ventana del navegador con un menú que nos permitirá cambiar de una a otra directamente:

En la parte superior del panel, justo debajo del contenido de la página, está el menú de las herramientas con las diferentes opciones que iremos viendo: la rueda de opciones que nos permite configurar los diferentes aspectos del panel, Consola, Inspector, Depurador (de JavaScript), Editor de estilos, Analizador (de JavaScript), y Monitor de red. A continuación, en la misma línea, hay una serie de iconos con otras herramientas, solo que éstas son externas al panel y se ejecutan en la parte superior de visualización de la web: Selector de elementos (mostrará en código correspondiente en el inspector), alternar la división de consola (divide el panel en dos para mostrar la consola junto a las otras herramientas), resaltar el área pintada (muestra el área que se repinta de forma dinámica en la web cuando se interactúa con ella), vista 3D (muestra los elementos en formato de cajas en 3D), borrador (permite ejecutar órdenes de JavaScript de forma independiente a la página para realizar todo tipo de pruebas) y vista de diseño adaptable (permite emular tamaños de pantalla diferentes para ver cómo funcionaría en Tablets, Smartphones…).

Vamos a ir describiendo ahora las diferentes herramientas y sus posibilidades principales, debido a la gran cantidad de cosas que se pueden hacer, es imposible hacer un tutorial pormenorizado aquí, pero más adelante, haré tutoriales individuales de algunas de las herramientas.

• Consola web: Muestra los errores y advertencias de los diferentes elementos de la página web. Se puede mostrar todo u ocultar lo elementos que no nos sean útiles en un momento dado: HTML, CSS, JS… Además de su propia ventana en el panes, ésta consola se puede visualizar conjuntamente con otras herramientas para facilitar su utilización. Para ello pulsamos el icono descrito antes.

• Inspector de estilos y DOM: Muestra el código de la página web y pinta en la parte superior el elemento al que pertenece cada trozo de código. En la parte derecha encontramos las reglas de estilo que se aplican al elemento seleccionado. Tanto el código HTML de la parte principal, como los estilos CSS de la derecha se pueden editar, eliminar, o añadir nuevos para observar al momento como funcionaría la web. Al recargar la página, todos los cambios se eliminan, por lo que esto no afectará al código desarrollado. En caso de querer conservar estos cambios hay que copiar el código HTML (o CSS), y pegarlo en los archivos originales. Junto con el selector de elementos de la página, ésta herramienta ofrece mucha posibilidades y versatilidad.

• Depurador de JavaScript: Permite el análisis del código JavaScript. Se puede detener la ejecución del código, formatearlo    código para que sea más legible, poner puntos de ruptura para ejecución paso a paso…

• Editor de estilos: Permite modificar las hojas de estilos de la web para ver su comportamiento. También se puede anular un CSS para que no tenga efecto sobre la página y así poder analizar de qué se encarga cada uno, o importar uno externo para ver cómo quedaría. También es posible crear uno de 0 para ir analizando en tiempo real las propiedades que vayamos añadiendo. Los resultados de modificar un CSS o del CSS nuevo creado se pueden guardar para aplicarlos en el código fuente. Si no se hace esto, se perderán dichos cambios al recargar la página.

• Analizador JavaScript: Lo primero que debemos hacer es iniciar el análisis, y después recargar la página o realizar las acciones que queramos sobre ella. Cuando pausemos el análisis, ésta herramienta nos dará información acerca de la carga de ejecuciones JavaScript que ha habido a lo largo del tiempo durante el proceso. Ésta herramienta es muy compleja de utilizar, por lo que no es posible describirla totalmente aquí.

• Monitor de red: Analiza los tiempos de carga de los diferentes elementos de la página. Con ésta herramienta podemos trabajar modos de optimizar el tiempo de carga de la página web. También se puede seleccionar los elementos que queremos ver cuánto tardan en cargar y ver las cookies <<Aquí enlazaría al articulo de las cookies>> implicadas en cada petición. Además se puede hacer un análisis de rendimiento del cacheo de elementos.

En la configuración de las opciones podemos tener acceso a algunas otras herramientas, el editor de sombreadores (shaders), canvas y editor de audio web. Sin embargo, estas herramientas no las voy a describir, ya que son más específicas y me alargaría mucho en el tutorial. También podemos activar un botón extra en las herramientas de la derecha, que es el capturador de un color en la página, el cual nos copiará en el portapapeles en código de color en hexadecimal. Podemos elegir el tema de las herramientas del desarrollador, cambiar el formato en que se muestran los códigos de color, desactivar caché o JavaScript, etc.

Todas estas herramientas nos dan un amplio abanico de posibilidades de prueba y de análisis de webs de terceros para aprovechar el código en nuestras creaciones. Sin embargo la cosa no se queda ahí, al menos con Firefox, ya que, en el menú de Desarrollador, tenemos una opción que dice: ‘Obtener más herramientas’. Si nos dirigimos a ésta opción iremos a la tienda de complementos de Mozilla Firefox al apartado de herramientas para desarrolladores, donde podremos encontrar muchas más herramientas que nos ayuden en nuestra labor como desarrolladores web.

El artículo Herramientas de desarrollador de Firefox apareció por primera vez en Instinto Binario.