Debugging JavaScript Using Firefox Addons

1
Debugging JavaScript Using Firefox Add-ons
Krishna S Chaparala
2
(No Transcript)
3
Debugger

• Firefox Add-ons

4
Venkman JavaScript Debugger

• Venkman JavaScript Debugger is available as an
  add-on for Mozilla .
• It is both a graphic and a console debugger.
• It allows you to view and debug JavaScript
  located in source files or within a Web page.

5
Venkman JavaScript Debugger Interface
6
Venkman JavaScript Debugger Interface
Venkman JavaScript Debugger Interface

• Loaded Scripts
• Local Variables
• Breakpoints
• Source Code
• Interactive Session

7
Features Provided

• Breakpoint management
• Call stack inspection
• Variable/object inspection
• View source code
• Execute JavaScript code

8
Toolbar
9
Toolbar

• Stop
• Continue
• Step Over
• Step Into
• Step Out
• Profile

10
Debugging

• Open the page in Mozilla.
• Select the development gt JavaScript Debugger in
  tools.
• Make use of Loaded scripts window to see the
  various details of the page

11
Debugging

• Example of Using the window for evolution object

12
Debugging

• Code step by step

13
Debugging

• The three step buttons
• Step Into
• Step Out
• Step Over

14
Profiling with Venkman JavaScript Debugger

• The Profile drop-down menu allows
• Start collecting
• Clear profiling data
• Save profile data
• Profiling data may be saved as HTML, XML, text,
  or a comma-delimited file.

15
(No Transcript)
16
(No Transcript)
17

• Using Firebug
• HTML Development
• CSS Development
• JavaScript Debugging
• Finding Errors
• JavaScript Logging
• Firebug lite

18
Using Firebug
19
Using Firebug

• Use that second monitor
• Blacklists and whitelists
• F12 is your friend

20
HTML Development
21
HTML Development

• View source live
• See changes highlighted
• Instant HTML editing
• Find elements with the mouse
• Search and you shall find
• Inspect, edit, reload
• Copy the source

22
CSS Development
23
CSS Development

• Inspect the cascade
• Preview colors and images
• Tweak tweak tweak
• A little higher... a little lower...
• Learn as you go
• Now you see it, now you don't
• Inspect any style sheet
• Copy colors and image URLs

24
JavaScript Debugging
25
JavaScript Debugging

• Find scripts easily
• Pause execution on any line
• Pause execution, but only if...
• One step at a time
• I break for errors
• Stack traces unstacked

26
JavaScript Debugging

• Watch expressions
• Variable tooltips
• Profile JavaScript performance
• Logging function calls
• Go directly to line 108, do not pass go

27
Finding Errors
28
Finding Errors

• Status bar error indicator
• No error soup
• Informative JavaScript errors
• Jump to the debugger
• Quick search
• Filtering errors

29
JavaScript Logging
30
JavaScript Logging

• Your new friend, console.log
• Logging object hyperlinks
• String formatting
• Color coding
• Timing and profiling
• Stack traces
• Nested grouping
• Object inspection
• Be assertive

31
Firebug lite
32
Summary

• So clearly with both these add-ons Firefox
  has scored big time with both of them offering
  exhaustive features.
• JavaScript developers need Venkman
  JavaScript Debugger for Mozilla. The add-in
  allows you to easily step through code execution,
  monitor variables and objects, and locate any
  code that may adversely affect performance.

33

• Firebug is a great addition to a Web
  developers toolbox. It provides everything
  necessary to pull back the covers and take a look
  at what is really going on within a Web page
  albeit HTML, CSS, or JavaScript.
• Comparatively Firebug scores over Venkeman as
  it integrates debugging with HTML and CSS
  debugging and its interface is a lot lighter.

34
References

• http//www.getfirebug.com/install
• http//blogs.techrepublic.com.com/programming-and-
  development/?p425
• http//blogs.techrepublic.com.com/programming-and-
  development/?p477

35

• Thank you