Firefox. Herramientas para Desarrollador Web

En esta lección se comentan las herramientas de desarrollador web incluidas en la versión estándar de Firefox. Existe también una versión especial de Firefox llamada Developer Edition, que está basada en Firefox Beta y que tiene además una configuración optimizada para las herramientas de desarrolladores (y alguna herramienta experimental todavía no disponible en la versión estándar 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:

Herramientas para Desarrollador Web

Desde Firefox 16 (publicado en octubre de 2012), Firefox incluye una ventana de Herramientas para Desarrollador Web que facilita el análisis técnico de las páginas web. Estas herramientas son similares a las que ofrecen Chrome y Edge. Estas herramientas son herederas de una extensión de Firefox llamada Firebug, que ya no está en desarrollo.

En el blog Mozilla Hacks se pueden consultar las novedades sobre estas herramientas, que se van incorporando en cada nueva versión de Firefox.

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 su propio menú, que da acceso a cada una de las herramientas.

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.


En la pestaña Reglas, se pueden modificar las hojas de estilo y ver el resultado inmediatamente. Estas modificaciones son "virtuales" y al actualizar la página se vuelve a la vista original.