Firebug Tutorial
What is Firebug
Firebug is a free web development tool.
In this tutorial we are going to discuss following -
- How to install Firebug.
- Inspect and edit HTML with Firebug.
- Inspect and edit CSS with Firebug.
- Debug and profile JavaScript with Firebug.
- Execute JavaScript on the fly with Firebug.
- Logging for JavaScript with Firebug.
- Monitor network activity with Firebug.
Installing Firebug
You can download and install Firebug from https://addons.mozilla.org/en-US/firefox/addon/1843/.
After visiting the page referenced above, click on the Download button, it shows a window to and click on the Install button there. It takes a while and asks you to restart the Firefox browser. Once rebooted, click on Firebug under Firefox(top left corner of your Firefox browser) > Web developer.
At this stage firebug is not activated. If you click that icon, Firebug will get activated.
Components of Firebug
Firebug Options
![firebug options](https://www.w3resource.com/w3r_images/firebug-opitons.png)
Click an element in the page to inspect
![Click-an-element-in-the-page-to-inspect](https://www.w3resource.com/w3r_images/Click-an-element-in-the-page-to-inspect.png)
Go back and forward
![go back and forward](https://www.w3resource.com/w3r_images/go-back-forward.png)
Show command line
![show-command-line](https://www.w3resource.com/w3r_images/show-command-line.png)
Panel selector
![panel-selector](https://www.w3resource.com/w3r_images/panel-selector.png)
Console
![console](https://www.w3resource.com/w3r_images/console-and-enabling-it.png)
HTML Panel
![HTML-panel](https://www.w3resource.com/w3r_images/HTML-panel.png)
CSS Panel
![CSS-panel](https://www.w3resource.com/w3r_images/CSS-panel.png)
Script Panel
![Script-panel](https://www.w3resource.com/w3r_images/Script-panel.png)
DOM Panel
![DOM-panel](https://www.w3resource.com/w3r_images/DOM-panel.png)
Net Panel (used for profiling so useful for page speed measuring and optimization)
![Net-panel](https://www.w3resource.com/w3r_images/Net-panel.png)
Buttons for other activities
![other buttons](https://www.w3resource.com/w3r_images/other-buttons.png)
1 - Minimize Firebug.
2 - Attach Firebug to the browser window.
3 - Deactivate Firebug for this site.
Test your Programming skills with w3resource's quiz.
- Weekly Trends and Language Statistics
- Weekly Trends and Language Statistics