Dev Tools for Ajax – FireBug Javascript profiler/debugger

The previous article mentions a bunch of interesting dev tools for Ajax web apps. FireBug is one among those and specific to FireFox browser.

The FireBug is available as a FireFox extension. FireBug is a profiler cum debugger for Javascript, DOM and CSS.

What can we do with FireBug?

– Debug javascript code

– Monitor network activity

– Explore the DOM

– Live edit HTML pages

– Logging javascript calls

– Profile javascript

– Execute javascript on the fly

– Tweak CSS

Debug javascript

Find the loaded js files, Keep breakpoints, Keep conditional breakpoints, Explore the call stack, Watch the variables, Variable tool tips, Log function calls

Monitor Network activity

Watch the time taken to load a file, Find out if a file was from browser cache, Check the contents of HTTP requests/response

useful tips:

JavaScript files load one at time, never in parallel. This will help you tune the order of files in page so that the user spends less time waiting for things to show up.

Requests served from cache are color coded with light gray.

Explore the DOM

View the functions, properties, constants. Color coded variable names. Object representations. Live edit of variable values. Autocomplete editing. Navigation to javascript code.

useful tips:

Top panel shows the DOM hierarchy during navigation.

Options drop-down provides filtering choices.

Live edit HTML pages

Find elements on mouse over, Quick search HTML source, Live edit HTML elements

userful tips:

Inspect button toggles the mouse over functionality

Logging javascript calls

Console.log function, Categorize the log entry[info, dbg, warn] in color codes, Measure the time, Profile the calls, Print stack trace

usefule tips:

console.log, console.warn, console.time, console.timeEnd, console.profile, console.profileEnd, console.trace are few functions

Profile javascript

Profile a scenario without writing any special code, Get to know the list of functions called and the time taken by each one of them.

useful tips:

Go to Console tab and get to see the Profile button in the top panel. Click the Profile button once to start profiling. Click it again to end profiling

Execute javascript on the fly

Its a Javasript Shell!! Write a one liner or a whole bunch of js functions.

usefule tips:

use $1 to refer to the last variable used in the shell. press SHIFT+ENTER to search for the variable in all the tabs.

References:

http://www.getfirebug.com