Scribd
Upload
28 views

Lab 3: Simple Layouts: 1. Firebug Introduction

This document provides an introduction to Firebug, an extension for the Firefox browser that allows debugging and inspection of HTML, CSS, DOM, and JavaScript. It discusses how Firebug can be used to inspect website behavior, detect performance issues, modify styles and layouts in real-time, debug JavaScript code, and track cookies and sessions. Instructions are given on how to install and launch Firebug, and tutorials are listed on using its features to inspect page elements, modify HTML and CSS, and debug JavaScript. Exercises are provided to use Firebug to inspect code examples and build a layout from an image.

Uploaded by

Thu Vu
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
28 views

Lab 3: Simple Layouts: 1. Firebug Introduction

This document provides an introduction to Firebug, an extension for the Firefox browser that allows debugging and inspection of HTML, CSS, DOM, and JavaScript. It discusses how Firebug can be used to inspect website behavior, detect performance issues, modify styles and layouts in real-time, debug JavaScript code, and track cookies and sessions. Instructions are given on how to install and launch Firebug, and tutorials are listed on using its features to inspect page elements, modify HTML and CSS, and debug JavaScript. Exercises are provided to use Firebug to inspect code examples and build a layout from an image.

Uploaded by

Thu Vu
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 3

Lab 3: Simple Layouts

1. Firebug Introduction
What is Firebug? Firebug is an extension for the Mozilla Firefox browser that allows you to debug and inspect HTML, CSS, the Docu ent !b"ect Model #D!M$ and %a&aScript'

Why do we use Firebug? (nspect the beha&ior of HTML)CSS, and Debug "a&ascript ' Detect perfor ance of website' Trac. Coo.ies * Sessions' odify style * layout with true +,S(+,-'

How to install Firebug? To install Firebug for Firefox, go to http/))www'getfirebug'co How to launch Firebug? 0 ways/ 1ress F23 on the .eyboard' 1ress the Firebug button on the toolbar'

4ight clic. on an ele ent, choose 5(nspect 6le ent with Firebug78

Firebug utorials 2' Find out the attributes, D!M properties, CSS properties of the ele ent

3' Modifying HTML)CSS ele ents in real ti e

0' Debugging %a&aScript code

9' +eb 1erfor ance

:' Trac.ing Coo.ies and Sessions

!. "#ercises
a$ ;se Firebug to inspect HTML, CSS code of all gi&en exa ples' For ore basic layout exa ples, &isit/

http/))www'p ob'co'u.)te p)0colfixedtest<9'ht http/))www'ironspider'ca)webdesign2=3)tables9layout3'ht

b$ ;se HTML and CSS to build a layout li.e the picture below'

You might also like