Usar Firebug para ver y editar HTML y CSS


El sitio oficial de Firebug ha anunciado que ha dejado de continuar el desarrollo, actualización y mantenimiento de Firebug, e invita a todos a usar las herramientas integradas de Firefox.DevTools。

Descripción

En el tutorial de este capítulo, discutiremos cómo usar Firebug para ver y editar HTML y CSS.

Usar Firebug para ver y editar HTML

Haz clic derecho en el elemento que deseas ver y luego haz clic enInspect Element (Ver elemento).

inspect-html-firebug

Ahora, en la ventana de Firebug, haz clic enEdit (Editar) 。

inspect-html-firebug1

Modifica el código <h1>Components of Firebug</h1>.

inspect-html-firebug2

Basta con que modifiques el código en la ventana de Firebug para ver en tiempo real el efecto de visualización en el navegador; también puedes copiar el código en tu archivo HTML.


Usar Firebug para ver y editar CSS

Haz clic derecho en el elemento que deseas ver y luego haz clic enInspect Element (Ver elemento)Como se muestra a continuación, haz clic en el archivo de estilos.

inspect-css-firebug

Al modificar el código acolor:red;para modificar el color del título

Una vez completada la modificación, puedes ver el efecto inmediatamente.

Ahora puedes copiar el estilo modificado, reemplazar el código original y guardarlo para que tenga efecto:

inspect-css-firebug2

Otras extensiones