- S.Pradeep Kumar
How it is Useful for Web
Developer ?
Inspect Html
Inspect Html
● View HTML live (Advance Version of View
Source)
● View Selected Source
● View XPATH,Selector,InnerHtml of S...
Tweak CSS
● Box Model View: To Evaluate
Height,Width,Padding,Border and Margin
● Shows all selectors impacting the element...
Debug Javascript
● Javascript Console feature to inspect javascript
objects at run time.
● Useful Console API's
logging – ...
● Debugging features presented in IDE are well
integrated here
1)Add Break point,To Stop script execution at
specific poin...
Break Points
● Standard BreakPoint – Script Panel ()
● Error Break Point – Console Panel (Enable
Break on Errors)
● Html B...
Net panel
● To view the Http Traffic Done on the web page
View all Ajax requests
View all Html/Css/JS/Images/Video files
d...
FireBug Extended
● FireQuery
● Reference:
http://getfirebug.com/wiki/index.php/Firebug_Ex
tensions#Firediff
References
● Http://getfirebug.com
● http://getfirebug.com/wiki/index.php/Main_Page
● http://getfirebug.com/doc/breakpoint...
Debugging with Firebug
Upcoming SlideShare
Loading in...5
×

Debugging with Firebug

2,300

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,300
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
47
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Debugging with Firebug

  1. 1. - S.Pradeep Kumar
  2. 2. How it is Useful for Web Developer ?
  3. 3. Inspect Html
  4. 4. Inspect Html ● View HTML live (Advance Version of View Source) ● View Selected Source ● View XPATH,Selector,InnerHtml of Selected Element ● Edit Html Element ● Add/Delete/Edit attributes of Html Element ● Break on Script that Changes Html Element Note:Javascript Debugger should be Enabled
  5. 5. Tweak CSS ● Box Model View: To Evaluate Height,Width,Padding,Border and Margin ● Shows all selectors impacting the element in order of Specificity ● Allows to Edit style properties defined in the selectors (Note:properties part of css parser of the browser specification are shown,Hacks are not shown) ● Live Edit,Changes are shown on fly
  6. 6. Debug Javascript ● Javascript Console feature to inspect javascript objects at run time. ● Useful Console API's logging – Console.log ,Console.info,Console.warn, debugging – Console.debug(),Console.dir(), profiling – console.time(),Console.timeEnd(),Console.profi le,Console.profileEnd,Console.m
  7. 7. ● Debugging features presented in IDE are well integrated here 1)Add Break point,To Stop script execution at specific point in the script to take control. 2)Follow the Stack Trace of the methods 3)Add Expressions at break point,To Break on Expressions 4)View all Break points
  8. 8. Break Points ● Standard BreakPoint – Script Panel () ● Error Break Point – Console Panel (Enable Break on Errors) ● Html Break Point – Html Panel (Enable Break on Mutate) ● Dom Break Point – DOM Panel (View Element in Dom Panel add Break Point) ● AjaxBreak Point – Net Panel
  9. 9. Net panel ● To view the Http Traffic Done on the web page View all Ajax requests View all Html/Css/JS/Images/Video files downloaded View the Request/Response Headers
  10. 10. FireBug Extended ● FireQuery ● Reference: http://getfirebug.com/wiki/index.php/Firebug_Ex tensions#Firediff
  11. 11. References ● Http://getfirebug.com ● http://getfirebug.com/wiki/index.php/Main_Page ● http://getfirebug.com/doc/breakpoints/demo.html ● http://doxygen.db48x.net/mozilla-full/html/d7/d35/in
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×