Firebug is an extension for the Mozilla Firefox browser that allows you to debug and inspect HTML, CSS, the Document Object Model (DOM) and JavaScript.
To install Firebug for Firefox, go to http://www.getfirebug.com (click on Install Firebug). Restart FireFox, and you’re good to go.
How to use Firebug for HTML Development
After successful installation you should see Firebug icon in the top right side of the Firefox browser.
Lets say we want to edit website page ( CSS or HTML code).
3 Ways to Launch Firebug
1. Press F12 on the keyboard.
2. Press the Firebug icon on the toolbar.
3. In the current webpage, right click on an element ( image, text, background, etc). In the drop down menu, click on Inspect Element with Firebug.
It will open new Firebug editor window by default, body HTML Element selected.
Now you can see HTML source code in the left side of the window and CSS in right, as well location and line number of the Styles. For example span with class image-title related to CSS code #as-menu span.image-title { …} that located in the ext.asmenu.css file on line 38.
We can use it like a real-time test tool for design.
- Split screen in two windows ( Firefox website page and related Firebug window) or use two monitors.
- Add or change existing styles and see results in the opened Firefox website window.
Additional resource :
https://addons.mozilla.org/en-US/firefox/addon/firebug
HOLA hice todo esto me descarge el FIREBUG y logre cambiar la apariencia de mi plantilla pero al volver a cargar la direccion en mi localhost vuelve a ser la que era antes mi platilla es decir se pierden los cambios….