Firebug 1.0 Is Out + Talk For Power-Users by Joe Hewitt
I've been using the latest and greatest version of the Firefox add-on Firebug 1.0 which made its debut this week. For those of you not familar, Firebug is a powerful plug-in that is like Venkman on steroids for javascript development, as well as powerful and easy-to-use CSS/DOM inspector tool. We were lucky enough to have its author, Joe Hewitt, come in to give a talk for all you would-be power users at HQ recently. You can catch this talk and more if you go check out the YUI Theater from Yahoo!. Below I've summarized some of the key highlights of the video in case you are pressed for time (it's almost an hour long).
The new version features enhancements to the DOM/CSS inspector, including inheritance and precedence information. It quickly tells you which rules override other rules and where they are, all packaged into a super-slick and usable GUI. It also features live editing of CSS and HTML right there in Firebug to help you work your kinks out faster. Click on the Inspect button to view the element in the DOM tree view. Edit the innerHTML of the element by clicking on it *or* right-click on the selected element and choose "Edit HTML" to more easily modify or add HTML right there. Same goes with CSS rules in the style tab. Hint: for numeric values in the CSS tab, you can use the up and down arrow keys to increment and watch the layout change as its css property value increases or decreases. You'll also want to check out the Layout tab that lives next to the styles tab once you've chosen a DOM node. For kicks, run the mouse over the offset, margin, border, and padding labels in that tab.
But the best new thing about Firebug I've found since I've been playing with 1.0 is the expansion of Javascript logging toys. Once you get going you'll see a new tab next to the Inspect tool called "Profile" which you can turn on while youre using a page that is executing some JS and it will record all kinds of useful info about whatever js functions were executed between when you first hit it to start recording and when you hit it again to stop recording. It tells you how many calls were made to each particular function as well as how much time it took and how much time it took relative to the other functions that also fired. The best part is that you can also turn the profiler on and off directly in your code just like a console.log or console.info... Just throw in a console.profile() before the code you want to measure to start the profiler and console.profileEnd() to stop it and your output will show up in the console with all the relevant info. This is a great leap forward for developers who are very performance-conscious about their apps, which in theory should be all of us. Another whizbang logging feature is console.trace(), which does a stack trace of all the functions being called at the particular moment that you invoke it and traces the values being passed around to each of them. More about FB logging.
Speaking of performance, another enhancement rolled into the new version is the "Net" tab, which essentially gives you a break-down all the HTTP calls your page is making and tells you how fast (or slow) they are returned. Each file type is grouped and has its own sub-tab (HTML, CSS, Scripts, XHR -aka XMLHttp Request or AJAX, Images, and even Flash has its own tab). An interesting factoid about performance brought to you courtesy of the Performance group at Yahoo! is that most of the time spent fetching a file from a server is spent on the actual HTTP request, not the data transmission itself. Think about that next time you are trying to decide whether to put your javascript or css into separate files or include them inline. The Network tab is also a handy tool for debugging your XHR requests, as every file request is clickable in Firebug and expands to reveal its HTTP headers and content.
One thing to note is that javascript event logging has changed and is now tied to the DOM inspector. To log events now, you just hit "Inspect" and choose the DOM node you want to watch; its kind of like attaching a special Firebug event listener to an element in the page. Once you've chose the element you want to watch, right click the highlighted DOM node and choose "Log Events" from the menu. Now you can zoom over to the console and interact with the element while you watch all the events fly by.
Firebug features many new, advanced Javascript debugging tools which I won't go into further detail about here because using them is hard to write about, so I'll just point you to spots in the embedded movie clip above that you can jump straight to that are relevant if you're interested:
Using break-points for debug --> 27:00
Using watch-expressions for debug --> 28:45
Using mini javascript command line --> 29:20
Run-to-line feature --> 32:35
Other quick pointers: you can detach Firebug's window by clicking the up arrow icon next to the search box on the upper right. You can also jump right to certain lines in javascript files by typing the # symbol and line number into that same search box. You can also expand the command line by clicking on the up-arrow in the lower right hand corner.
The new version features enhancements to the DOM/CSS inspector, including inheritance and precedence information. It quickly tells you which rules override other rules and where they are, all packaged into a super-slick and usable GUI. It also features live editing of CSS and HTML right there in Firebug to help you work your kinks out faster. Click on the Inspect button to view the element in the DOM tree view. Edit the innerHTML of the element by clicking on it *or* right-click on the selected element and choose "Edit HTML" to more easily modify or add HTML right there. Same goes with CSS rules in the style tab. Hint: for numeric values in the CSS tab, you can use the up and down arrow keys to increment and watch the layout change as its css property value increases or decreases. You'll also want to check out the Layout tab that lives next to the styles tab once you've chosen a DOM node. For kicks, run the mouse over the offset, margin, border, and padding labels in that tab.
But the best new thing about Firebug I've found since I've been playing with 1.0 is the expansion of Javascript logging toys. Once you get going you'll see a new tab next to the Inspect tool called "Profile" which you can turn on while youre using a page that is executing some JS and it will record all kinds of useful info about whatever js functions were executed between when you first hit it to start recording and when you hit it again to stop recording. It tells you how many calls were made to each particular function as well as how much time it took and how much time it took relative to the other functions that also fired. The best part is that you can also turn the profiler on and off directly in your code just like a console.log or console.info... Just throw in a console.profile() before the code you want to measure to start the profiler and console.profileEnd() to stop it and your output will show up in the console with all the relevant info. This is a great leap forward for developers who are very performance-conscious about their apps, which in theory should be all of us. Another whizbang logging feature is console.trace(), which does a stack trace of all the functions being called at the particular moment that you invoke it and traces the values being passed around to each of them. More about FB logging.
Speaking of performance, another enhancement rolled into the new version is the "Net" tab, which essentially gives you a break-down all the HTTP calls your page is making and tells you how fast (or slow) they are returned. Each file type is grouped and has its own sub-tab (HTML, CSS, Scripts, XHR -aka XMLHttp Request or AJAX, Images, and even Flash has its own tab). An interesting factoid about performance brought to you courtesy of the Performance group at Yahoo! is that most of the time spent fetching a file from a server is spent on the actual HTTP request, not the data transmission itself. Think about that next time you are trying to decide whether to put your javascript or css into separate files or include them inline. The Network tab is also a handy tool for debugging your XHR requests, as every file request is clickable in Firebug and expands to reveal its HTTP headers and content.
One thing to note is that javascript event logging has changed and is now tied to the DOM inspector. To log events now, you just hit "Inspect" and choose the DOM node you want to watch; its kind of like attaching a special Firebug event listener to an element in the page. Once you've chose the element you want to watch, right click the highlighted DOM node and choose "Log Events" from the menu. Now you can zoom over to the console and interact with the element while you watch all the events fly by.
Firebug features many new, advanced Javascript debugging tools which I won't go into further detail about here because using them is hard to write about, so I'll just point you to spots in the embedded movie clip above that you can jump straight to that are relevant if you're interested:
Using break-points for debug --> 27:00
Using watch-expressions for debug --> 28:45
Using mini javascript command line --> 29:20
Run-to-line feature --> 32:35
Other quick pointers: you can detach Firebug's window by clicking the up arrow icon next to the search box on the upper right. You can also jump right to certain lines in javascript files by typing the # symbol and line number into that same search box. You can also expand the command line by clicking on the up-arrow in the lower right hand corner.
posted by cyclona23 at 5:13 PM
0 Comments:
Post a Comment
<< Home