Cómo usar las herramientas de desarrollo web de Firefox

TL;DR

Firefox incluye un conjunto completo de herramientas para inspeccionar HTML/CSS, ejecutar JavaScript y depurar solicitudes de red. Aprende a usar el Inspector de página, el Inspector HTML, el Inspector de CSS, el Scratchpad de JavaScript y la Consola web; sigue las listas de verificación por rol y usa atajos y fragmentos para acelerar el trabajo.

Enlaces rápidos

• Inspector de página
• Inspector HTML
• Inspector de CSS
• Scratchpad de JavaScript
• Consola web
• Obtener más herramientas

Firefox ofrece un menú Web Developer con utilidades para inspeccionar páginas, ejecutar código JavaScript arbitrario y ver solicitudes HTTP y mensajes de depuración. Desde Firefox 10 se añadió un Inspector moderno y se actualizó Scratchpad con resaltado de sintaxis. En combinación con complementos como Firebug y la Web Developer Toolbar, Firefox es una excelente opción para desarrolladores web. Todas las herramientas están disponibles en el menú Web Developer.

Inspector de página

Inspecciona un elemento específico haciendo clic derecho sobre él y seleccionando Inspeccionar (o pulsando Q). También puedes abrir el Inspector desde el menú Web Developer.

Verás una barra de herramientas en la parte inferior de la pantalla que permite controlar el inspector. El elemento seleccionado se destaca y los demás elementos de la página se atenúan.

Si quieres elegir un nuevo elemento, haz clic en el botón Inspeccionar de la barra de herramientas, coloca el cursor sobre la página y haz clic en el elemento. Firefox resaltará el elemento bajo el cursor.

Puedes navegar entre elementos padre e hijo usando las migas de pan (breadcrumbs) en la barra.

Importante: el Inspector es ideal para localizar reglas CSS aplicadas y para reproducir problemas de maquetación. Sin embargo, en contenidos inyectados por shadow DOM o en iframes con políticas de origen mixto puede que algunas partes no sean accesibles.

Inspector HTML

Haz clic en el botón HTML para ver el código HTML del elemento actualmente seleccionado.

El inspector HTML permite expandir y contraer etiquetas, lo que facilita la visualización estructurada. Si quieres ver el HTML de la página como archivo plano, selecciona Ver código fuente de la página en el menú Web Developer.

Consejo rápido: al editar atributos o texto en el inspector, los cambios son locales y no se guardan en el servidor; sirven para prototipar y depurar.

Inspector de CSS

Haz clic en el botón Style para ver las reglas CSS aplicadas al elemento seleccionado.

También existe un panel de propiedades CSS: cambia entre Reglas y Propiedades con sus botones. Para encontrar propiedades concretas, el panel incluye un cuadro de búsqueda.

Puedes editar el CSS del elemento al vuelo desde el panel Reglas. Desmarca casillas para desactivar reglas, haz clic en el texto para cambiar valores o añade reglas propias en la parte superior del panel. Por ejemplo, puedes añadir font-weight: bold; para poner el texto en negrita.

Atajo útil: prueba a desactivar reglas sospechosas primero antes de editarlas; así compruebas el efecto sin perder los valores originales.

Scratchpad de JavaScript

El Scratchpad se actualizó en Firefox 10 e incluye resaltado de sintaxis. Puedes escribir código JavaScript para ejecutar en la página actual.

Tras escribir tu código, abre el menú Execute y selecciona Run para ejecutarlo en la pestaña actual.

Ejemplo rápido:

// Imprime un mensaje en la Consola web
window.console.log("Hello World");

// Oculta el elemento actualmente seleccionado en el Inspector
$0.style.display = "none";

Nota: $0 referencia el objeto actualmente seleccionado en el Inspector (más abajo se explica su uso en la Consola web).

Consola web

La Consola web reemplaza a la antigua Error Console. Muestra cuatro tipos de mensajes que puedes alternar: solicitudes de red, errores CSS, errores JavaScript y mensajes del desarrollador (web developer messages).

¿Qué es un mensaje de desarrollador? Es cualquier salida enviada al objeto window.console desde tu código. Por ejemplo, window.console.log(“Hello World”); imprime una línea en la consola. Los desarrolladores integran estos mensajes para depurar y seguir el estado de ejecución.

Actualiza la página y verás las solicitudes de red generadas y otros mensajes.

Usa el cuadro de búsqueda para filtrar mensajes; haz clic en una solicitud para ver más detalles.

Desde Firefox 10, la Consola web puede trabajar junto al Inspector de página. La variable $0 representa el objeto actualmente seleccionado en el Inspector. Por ejemplo, para ocultar el objeto seleccionado puedes ejecutar:

$0.style.display = "none";

Si quieres aprender más sobre funciones integradas de la consola, consulta la documentación de Mozilla Developer Network (MDN).

Obtener más herramientas

La opción Obtener más herramientas te lleva a la colección Web Developer’s Toolbox en el sitio de complementos de Mozilla. Allí encontrarás add-ons útiles para desarrolladores, incluyendo Firebug y la Web Developer Toolbar.

Metodología breve para depurar una anomalía visual (mini-metodología)

1. Reproduce el problema en la página.
2. Abre el Inspector y localiza el elemento afectado.
3. Isola reglas CSS: desactiva reglas sospechosas y prueba cambios en vivo.
4. Usa la Consola para buscar errores JS o mensajes relacionados.
5. Revisa las solicitudes de red para detectar recursos con error o latencia.
6. Si hace falta ejecutar código, usa Scratchpad para probar parches rápidos.
7. Confirma los cambios en distintos tamaños de pantalla y navegadores.

Lista de verificación por rol

• Diseñador:

  • Verifica el box model y márgenes con la herramienta de diseño.
  • Comprueba fuentes y colores en el panel de reglas.
  • Prueba variantes responsivas en la vista adaptativa.

• Desarrollador frontend:

  • Reproduce el error y usa el Inspector para localizar el nodo.
  • Edita CSS en vivo y actualiza la hoja final en el proyecto.
  • Ejecuta fragmentos JS en Scratchpad para validar soluciones.

• QA/Probador:

  • Filtra la Consola por errores y regístralos en el sistema de incidencias.
  • Captura solicitudes de red con fallos y guarda los detalles (headers, response).
  • Verifica que los cambios no rompen otras páginas.

• Especialista en accesibilidad:

  • Inspecciona atributos ARIA y roles.
  • Verifica el orden del foco y la semántica del HTML.
  • Usa la Consola para detectar avisos relacionados con accesibilidad.

Fragmentos y atajos útiles (cheat sheet)

• Abrir Inspector: Q o clic derecho → Inspeccionar.
• Ocultar elemento seleccionado: $0.style.display = "none";
• Imprimir variable en Consola: console.log(miVar);
• Ejecutar Scratchpad: menú Execute → Run.
• Buscar propiedad CSS: usa el cuadro de búsqueda en Propiedades.

Fragmentos rápidos:

// Seleccionar primer enlace y resaltar
var a = document.querySelector('a');
console.log(a);
a.style.outline = '3px solid #f90';

// Reintento de una consulta de red simple (uso en Scratchpad para pruebas)
fetch('/api/endpoint')
  .then(r => r.json())
  .then(data => console.log('Datos:', data))
  .catch(err => console.error('Error fetch:', err));

Cuándo las herramientas pueden fallar o ser insuficientes (contraejemplos)

• Contenido en shadow DOM: algunos elementos encapsulados no muestran sus estilos desde el árbol principal.
• Iframes con políticas de mismo origen: si el iframe viene de otro origen, el Inspector no podrá acceder a su DOM por seguridad.
• Recursos ofuscados o minificados: debugging de código minificado es más difícil sin sourcemaps.
• Problemas de rendimiento en producción: la edición en vivo no reemplaza sesiones de profiling avanzadas (usa herramientas de rendimiento específicas).

Alternativas y compatibilidad

• Complementos populares: Firebug (legacy) y Web Developer Toolbar siguen siendo útiles en ciertos flujos de trabajo.
• Otras herramientas del navegador: las DevTools de Chrome y las de Edge ofrecen funciones similares; la elección depende de la integración y preferencias del equipo.
• Compatibilidad: las funciones descritas están presentes desde Firefox 10 en adelante. Para features muy nuevas (por ejemplo, inspección de Shadow DOM avanzado) revisa la versión de Firefox y la documentación de MDN.

Glosario breve (1 línea cada término)

• Inspector: vista y edición del DOM y estilos aplicados.
• Consola web: registro de errores, mensajes y peticiones de red.
• Scratchpad: editor temporal para ejecutar JavaScript en la pestaña actual.
• Rule/Regla CSS: definición que aplica estilos a selectores.

Notas de privacidad y seguridad

• Ten cuidado al ejecutar código en páginas de terceros; el Scratchpad ejecuta scripts en la página abierta y puede exponer datos o desencadenar acciones no deseadas.
• No pegues fragmentos de procedencia desconocida en la Consola o Scratchpad.

Resumen final

Las herramientas de desarrollo de Firefox permiten inspeccionar estructura, editar CSS en vivo, ejecutar JavaScript y analizar solicitudes de red. Usa el flujo: inspeccionar → aislar → probar → parchear. Complementa con add-ons cuando necesites funciones avanzadas.

Importante: las ediciones en el Inspector y Scratchpad son temporales; recuerda aplicar los cambios definitivos en tu repositorio o en los archivos fuente.

Si llevas años usando Firefox, quizá recuerdes el DOM Inspector. Las herramientas integradas han evolucionado mucho desde entonces; hoy permiten un ciclo de depuración más fluido y colaborativo entre diseño y desarrollo.