JavaScript Debugging with FireBug

Firebug is the browser debugger, available as a firefox add-on. Client-side debugging, which becomes particularly important in Ajax applications with extensive JavaScript, is made much simpler with this add-on feature. Some of the features offered are 

1. Http Monitoring and Inspection - The HTTP Requests, Responses, Headers, Response times (along with their Ajax XMLHttpRequest counterparts) can be viewed and monitored.

2. Breakpoint Debugging - Breakpoints can be set and the code flow can be stepped in , stepped out or stepped over.

3. Console Logging - In firefox browsers, an implicit object called console is made available, Log statements can be inserted using console.log("Logged")

4. DOM Inspection - The HTTP DOM tree can be inspected down to the smallest elements

5. Profiling - console.profile() and console.profileEnd() methods could be used to analyse the time elapses within code blocks..

Firebug can be opened in the same browser tab as the HTML page or a different tab. Its as simple to use as it sounds too :). Open Firebug (preferably in the same browser tab), explore the tabs, go to say script tab, the entire Javascript of the HTML page is made available here. Set the breakpoints, and refresh the browser. The requests, headers can be seen and  the debugging cursor stops at the first breakpoint. Step over, step in, step out , monitor and inspect the Javascript objects and HTML objects. If you are still stuck, insert log statements and check them in the console...Go, debug the bugs..

 With Firebug, client side debugging seems to have truly evolved...

Comments:

sdfasdf

Posted by pal on May 22, 2008 at 03:59 AM SCT #

rrrrrrr

Posted by rrrrr on May 29, 2008 at 06:27 AM SCT #

Post a Comment:
  • HTML Syntax: NOT allowed
About

nitkal

Search

Categories
Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today
Bookmarks