Herramientas para Desarrollador Web de Firefox

Selector de color

Un selector de color permite obtener el código RGB de los píxeles de la pantalla. En Firefox 31 (publicado en julio de 2014) se añadió un selector de color a las herramientas para desarrollador web .

Notas:


Para abrir el selector de color hay que abrir el menú de heramientas y seleccionar la opción Selector de color:

Menú Herramientas > Desarrollador Web > Selector de color

El cursor se convierte en una lupa que muestra el color del píxel central:

Menú Herramientas > Desarrollador Web > Selector de color

Al hacer clic, el valor de color se copia en el portapapeles y se cierra el selector de color.

Menú Herramientas > Desarrollador Web > Selector de color

Herramientas para Desarrollador Web

Seguramente la extensión de Firefox más popular para desarrolladores web ha sido siempre Firebug, que permite analizar en profundidad muchos aspectos de una página web.

En 2010, Firefox decidió incluir sus propias herramientas para desarrolladores web, basándose sobre todo en Firebug (y contratando a algunos de los autores de Firebug). Desde 2011 se han ido incluyendo nuevas herramientas y el desarrollo sigue a buen ritmo.

A partir de Firefox 16 (publicado en octubre de 2012), Firefox incluye una ventana de Herramientas para Desarrollador Web que unifica su acceso.

En el blog Mozilla Hacks se pueden consultar las novedades sobre estas herramientas. Uno de los objetivos es que las herramientas de desarrollador incorporen todo lo que hace Firebug.

Abrir la ventana de Herramientas para desarrollador web

La ventana de Herramientas para desarrollador web se puede abrir de varias maneras:

La ventana de Herramientas para desarrollador web se abre en la parte inferior de Firefox. Esta ventana personalizable da acceso directo a casi todas las herramientas disponibles (y se pueden incluir el resto en caso necesario).

Herramientas para Desarrolador Web

Cerrar la ventana de Herramientas para desarrollador web

La ventana de herramientas para Desarrollador Web se puede cerrar de varias maneras:

Elementos de la ventana de Herramientas para desarrollador web

La ventana de Herramientas para desarrollador web contiene tres partes. De arriba a abajo:

Herramientas para Desarrolador Web

Inspector de elementos

El inspector de elementos permite seleccionar visualmente un elemento de una página y ver el código html del elemento elegido y las propiedades CSS que se le aplican.