Firebug tutorial

Firebug tutorial

---

What is a Firebug?

Firebug is an open source web development tool.

In this chapter we'll discuss the following:

• How to install a Firebug.
• Use Firebug to examine and edit HTML.
• Use Firebug to check and edit CSS.
• Use Firebug to debug JavaScript.
• Perform JavaScript dynamically in Firebug.
• Use Firebug to log Javascript.
• Use Firebug to monitor your network.

---

Install Firebug

Firebug Download Address: https://addons.mozilla.org/en-US/firefox/addon/1843/

Use Firefox browser to access the above download address, open the page, click the download button, there will be a window page, prompt the installation of the directory, after installation to restart your Firefox browser.

After the restart, you can see the Firebug icon in the Firefox browser. Click on the Firebug icon (in the upper right corner of the Firefox browser) to activate the Firebug plug-in.

---

Firebug components

Firebug option

Tap Check elements on the page

Undo and restore

The command line is displayed

Console

HTML panel

CSS panel

Script panel

DOM panel

Network panel (for web speed measurement and optimization)

Other buttons

• 1 - Minimize Firebugs.
• 2 - Install Firebug in the browser window.
• 3 - Deactive Firebug.