Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Like this? Share it with your network

Share

Debugging with Firebug

on

  • 2,273 views

 

Statistics

Views

Total Views
2,273
Views on SlideShare
2,027
Embed Views
246

Actions

Likes
0
Downloads
29
Comments
0

1 Embed 246

http://uiengineer.com 246

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Debugging with Firebug Presentation Transcript

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