Firebug Tutorial

What is Firebug?

Firebug is an open-source web development tool.

In this chapter tutorial, we will discuss the following:

• How to install Firebug.

-Using Firebug to inspect and edit HTML.

-Using Firebug to inspect and edit CSS.

-Using Firebug to debug JavaScript.

-Dynamically executing JavaScript in Firebug.

-Using Firebug to log JavaScript logs.

-Using Firebug to monitor the network.

Installing Firebug

Firebug download link: https://addons.mozilla.org/en-US/firefox/addon/1843/

Visit the above download link using the Firefox browser, open the page, click the download button, and a pop-up page will prompt you with the installation directory. After installation, restart your Firefox browser.

After restarting, you will see the Firebug icon in the Firefox browser. Click the Firebug icon (located in the top right corner of the Firefox browser) to activate the Firebug plugin.

Firebug Components

Firebug Options

Inspect Element by Clicking on the Page

Undo and Redo

Show Command Line

Panel Selection

Console

HTML Panel

CSS Panel

Script Panel

DOM Panel

Network Panel (for web page speed testing and optimization)

Other Buttons

• 1 - Minimize Firebug.

• 2 - Install Firebug in the browser window.

• 3 - Deactivate Firebug.