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).
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:
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 desde 2017 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.
La ventana de Herramientas para desarrollador web se puede abrir de varias maneras:
... se abrirá un menú de opciones similar al menú
en el que debe elegir la opción "Alternar herramientas":
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).
La ventana de herramientas para Desarrollador Web se puede cerrar de varias maneras:
La ventana de Herramientas para desarrollador web contiene su propio menú, que da acceso a cada una de las herramientas.
La vista de diseño adaptable (en inglés, responsive mode) permite probar en Firefox cómo se visualizaría la página web en diferentes dispositivos móviles.
Puede consultar información detallada en MDN: Responsive Design Mode.
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 el ejemplo siguiente, en el que se ha seleccionado un párrafo <p>, se muestran todas las propiedades que afecta al párrafo ordenadas por reglas. Para cada regla se muestra el selector, el nombre de la hoja de estilo y el número de línea en la que se encuentra y las propiedades.
Si una misma propiedad se establece en diferentes reglas, las propiedades que no se aplican por tener la regla menos prioridad se muestran tachadas.
En la parte central, 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.