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:
www.getfirebug.com
No comments:
Post a Comment