Firebug: Javascript Development Made Easier

2005-12-31

Your NameYour Title

Your Organization (Line #1)Your Organization (Line #2)

Firebug: JavaScript Development made easier

Binny V A

http://www.openjs.com/

2

Firebug: An Introduction

Firefox pluginJavaScript DebuggerDOM ViewerJavaScript ProfilerJavaScript Logging EngineAnd a LOT more...

Its a...

getfirebug.com

3

Disadvantages of Firebug

Big(relatively) – causes firefox to be slowerMight make firefox unstableMakes you hate IE even more

No firebug for IE

4

Firebug

5

Finding an Element

InspectRight Click > InspectFirebug Toolbar > Inspect > Click on Element

HTML Tab > FindFind hidden elements this way.

6

Firebug, the CSS Editor

Ability to locate CSS rulesLive updation of CSS ValuesDisable rules individuallySee inheritance of CSS rules

7

CSS Editor

Special handling of margin/padding – useful for designersShows the 'Box Model' in Layout Tab

Shows Computed Style(final style)

8

HTML Viewer

Highlights the element under the mouse.

9

HTML Viewer

Highlight changes in DOMDelete NodesEdit the HTMLAdd/Edit/Delete attributes'Scroll into View'

10

DOM Viewer

See the element's DOM PropertiesEditing Possible(double click)See all the functions for that DOM node

11

Net View

See load times for all itemsSee Headers

12

Console

Log Ajax CallsLog EventsThe ProfilerLive execution of JS Code

13

Console API

Logging Engineconsole.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

14

JavaScript Debugger

Everything expected from a debuggerBreakpoints

RunStep IntoStep OverLine by line executionVariable value on hover

WatchesStacks

15

Other Web Development Plugins for Firefox

Web DeveloperHTML ValidatorGreasemonkeyYslowColorZillaMeasureItLive HTTP Headers

16

Non-Firefox Browser Helpers

Firebug LiteIE

DebugBarDev Toolbar

17

Thank You - Questions?