Tuesday May 13, 2008

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...

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