Firebug: JavaScript Development made easier Binny V A http://www.openjs.com/

Firebug: An Introduction Firefox plugin JavaScript Debugger DOM Viewer JavaScript Profiler JavaScript Logging Engine And a LOT more... Its a... getfirebug.com

Firefox plugin

JavaScript Debugger

DOM Viewer

JavaScript Profiler

JavaScript Logging Engine

And a LOT more...

Disadvantages of Firebug Big(relatively) – causes firefox to be slower Might make firefox unstable Makes you hate IE even more No firebug for IE

Big(relatively) – causes firefox to be slower

Might make firefox unstable

Makes you hate IE even more

No firebug for IE

Firebug

Finding an Element Inspect Right Click > Inspect Firebug Toolbar > Inspect > Click on Element HTML Tab > Find Find hidden elements this way.

Inspect

Right Click > Inspect

Firebug Toolbar > Inspect > Click on Element

HTML Tab > Find

Find hidden elements this way.

Firebug, the CSS Editor Ability to locate CSS rules Live updation of CSS Values Disable rules individually See inheritance of CSS rules

Ability to locate CSS rules

Live updation of CSS Values

Disable rules individually

See inheritance of CSS rules

CSS Editor Special handling of margin/padding – useful for designers Shows the 'Box Model' in Layout Tab Shows Computed Style(final style)‏

Special handling of margin/padding – useful for designers

Shows the 'Box Model' in Layout Tab

Shows Computed Style(final style)‏

HTML Viewer Highlights the element under the mouse.

HTML Viewer Highlight changes in DOM Delete Nodes Edit the HTML Add/Edit/Delete attributes 'Scroll into View'

Highlight changes in DOM

Delete Nodes

Edit the HTML

Add/Edit/Delete attributes

'Scroll into View'

DOM Viewer See the element's DOM Properties Editing Possible(double click)‏ See all the functions for that DOM node

See the element's DOM Properties

Editing Possible(double click)‏

See all the functions for that DOM node

Net View See load times for all items See Headers

See load times for all items

See Headers

Console Log Ajax Calls Log Events The Profiler Live execution of JS Code

Log Ajax Calls

Log Events

The Profiler

Live execution of JS Code

Console API Logging Engine console.log(“We are at point A”); console.info(“We are at point B”); console.warn(“At point C!”); consele.error(“We reached point D :-(“); You don't have to use alert for debugging any more

Logging Engine

console.log(“We are at point A”);

console.info(“We are at point B”);

console.warn(“At point C!”);

consele.error(“We reached point D :-(“);

You don't have to use alert for debugging any more

JavaScript Debugger Everything expected from a debugger Breakpoints Run Step Into Step Over Line by line execution Variable value on hover Watches Stacks

Everything expected from a debugger

Breakpoints

Run

Step Into

Step Over

Line by line execution

Variable value on hover

Watches

Stacks

Other Web Development Plugins for Firefox Web Developer HTML Validator Greasemonkey Yslow ColorZilla MeasureIt Live HTTP Headers

Web Developer

HTML Validator

Greasemonkey

Yslow

ColorZilla

MeasureIt

Live HTTP Headers

Non-Firefox Browser Helpers Firebug Lite IE DebugBar Dev Toolbar

Firebug Lite

IE

DebugBar

Dev Toolbar

Thank You - Questions?