Firebug: Javascript Development Made Easier
-
Upload
binny-v-a -
Category
Technology
-
view
5.689 -
download
2
Transcript of 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?