Firebug: A Debugging and Inspecting Tool for HTML, CSS, and JavaScript in Mozilla Firefox, Slides of Javascript programming

Download Firebug: A Debugging and Inspecting Tool for HTML, CSS, and JavaScript in Mozilla Firefox and more Slides Javascript programming in PDF only on Docsity!

Debugging JavaScript and CSS

Using Firebug

Notice for Copying JavaScript Code from these Slides

• When copying any JavaScript code from these slides, the console might

return the following:

• To fix this, retype each quote.

What is Firebug?

• 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.

INTRODUCTION

Why do Web Developers use Firebug?

• Inspect the behavior of HTML/CSS, and modify style & layout with

true WYSIWYG

• Debug JavaScript
• Detect performance of website
• Track Cookies & Sessions INTRODUCTION

2 Ways to Launch Firebug With the Mozilla Firefox browser open… 2 ) Press the Firebug button on the toolbar (By default, body HTMLElement is selected)* OR INTRODUCTION

1. Press F12 on the keyboard (By default, body HTMLElement is selected)* *Note: Firebug may continue from a last saved session if it is still running

The 3 rd Way to Launch Firebug

1) In the current webpage, right click on an element (an image, text,

background, etc).

2. In the dropdown menu, click on Inspect Element with Firebug…

(the element you right clicked on is selected.)

INTRODUCTION

Firebug Toolbar FIREBUG TOOLBAR

PANELS

Console: Brings up a Interactive JavaScript Console HTML: Brings up the HTML View (see previous) CSS: Brings up the CSS View Script: Brings up the JavaScript Debugger (used later) DOM: A list of all the DOM Properties (defaults to window object) Net: Displays requests made from the browser Cookies: Displays sessions & cookies from the browser

Firebug Toolbar – Firebug Button FIREBUG TOOLBAR

1. The Firebug Button a. Hide Firebug (hides the panel) b. Deactivate Firebug (turns off Firebug) c. Firebug UI Location… a. Detached b. Left/Right c. Top/Bottom d. Open with Editor e. Options f. Firebug Online g. Customize Shortcuts h. About Bold: Useful things in Firebug

Firebug UI Locations - UnDocked

To dock Firebug, click on

List of Useful Firebug Shortcuts FIREBUG TOOLBAR

Firebug Toolbar – Arrows, Quick Console, Show Hide Panels FIREBUG TOOLBAR

3. Back/Forward – Switches between Panels
4. Quick Console – Interactive JavaScript console
5. Show or Hide Panels – Show or hide all panels

FIREBUG TUTORIALS

Firebug Tutorials Outline

1. Inspecting HTML/CSS elements and their properties

2. Modifying HTML/CSS elements in real time

3. Debugging JavaScript & Analyzing Behavior of JavaScript code

4. Web Performance

5. Cookies and Sessions

Finding the Attributes & DOM properties of the Element

1) Use the Inspect Element feature in Firebug. ( Right click on the element,

and click on Inspect Element with Firebug )

INSPECTING HTML/CSS ELEMENTS

AND THEIR PROPERTIES

Note: We can also use this

button and click on the

element

Finding the Attributes & DOM properties of the Element

2. The HTML Panel is displayed with the element selected. INSPECTING HTML/CSS ELEMENTS AND THEIR PROPERTIES From the highlighted area, we know the following about the element: I’m a cool button.