Web Development Evolved.
JavaScript Debugger and Profiler
Firebug includes a powerful JavaScript debugger that
lets you pause execution at any time and see what each variable looked
like at that moment. If your code is a little sluggish, use the
JavaScript profiler to measure performance and find bottlenecks fast.
Find scripts easily
Many web applications are comprised of quite a number of files, and finding the one you want to debug can be a chore. Firebug's script file chooser sorts and organizes files into very clean list that will help you find any file in a snap. You can also type to filter the list.
Pause execution on any line
Firebug allows you to set breakpoints, which tell the debugger to pause execution when it reaches a specific line. While execution is pause, you can see the value of any variable and inspect objects while time is frozen.To set breakpoints, just click on any line number, and a red dot will appear to indicate that the breakpoint is set. Click the red dot again to remove the breakpoint.
Pause execution, but only if...
Breakpoints can be troublesome if you find them breaking too often. Sometimes you only want to pause under very specific conditions. Firebug allows you to set conditional breakpoints, which check an expression that must be true for the breakpoint to pause.To set a conditional breakpoint, just right-click on any line number. A bubble will appear that prompts you to enter a JavaScript expression. You can right-click again at any time to change the expression, or left-click to remove the breakpoint altogether.
One step at a time
Once the debugger is paused, you can continue execution one line at a time. This allows you to see exactly how variables and objects are effected when a particular line is executed.You can also choose to step execution for more than one line. From the context menu, choose "Run to this Line" to continue execution until it passes through the line you clicked.
I break for errors
You don't always choose to use the debugger. Sometimes the debugger chooses you. Firebug gives you the option to break into the debugger automatically when an error occurs so you can examine the screwed up conditions that got you into trouble.
Stack traces unstacked
When the debugger is paused, Firebug shows you the call stack, which is the set of nested function calls that are currently running and waiting to return.The call stack is represented as a compact strip of buttons in the toolbar, each with the name of a function on the stack. You can click any button to jump to the line where that function is paused, and look at the local variables inside that function.
Watch expressions
While debugging, you often want to see the value of complex expressions or objects that are buried in the DOM. Firebug allows you to type in arbitrary JavaScript expression whose value will be updated every time you step in the debugger.As you type in these expressions, don't forget that you can use the tab key to autocomplete the properties of objects.
Variable tooltips
While the debugger is paused, you can move the mouse over any variable in the current function to see a tooltip that reveals the value of that variable. It's a great way to keep your eye on the code and find answers as you read.
Profile JavaScript performance
Your web app is almost perfect. You've got all the bugs worked out, the artwork has been dropped in, and the users are loving it. Only one problem - some of your features are a little bit sluggish and you're not sure why.With Firebug, you'll never again wonder why your code is slow. Using the Firebug profiler, you can separate the tortoises from the hares within seconds.
To use the profiler, just go to the Console tab and click the "Profile" button. Then use your app for a bit or reload the page and then click the "Profile" button again. You'll then see a detailed report that shows what functions were called and how much time each one took.
Logging function calls
Sometimes a problematic function is called so many times that you can't break into the debugger every time. You just want to know when it's called and what parameters were passed in.To track all calls to a function, just right click on it in the Script tab and choose "Log calls to 'function name'". Then hop over to the Console and watch the calls stream in.
Go directly to line 108, do not pass go
Often times you want to jump directly to a specific line of your script. Doing this couldn't be easier, just type the line number into the quick search box, preceded by the pound sign, as seen in the screen shot on the right.
Browser and eval() generated code
For various kinds of events Firefox generates small Javascript functions. These appear
in Firebug under the URL of the page they were generated from followed by event and with
a name derived from their source code. You can breakpoint these functions like any other. Similarly Javascript created by
eval() calls appear in the list of files under the
page URL that called eval(), with a source code summary for the name.
Executable lines are marked
Firebug's Script panel is using green color for a line number if the related line is executable. This way you can always know where to create a breakpoint.
Break notifications
The debugger can halt JavaScript execution for many reasons. For example, the debugger can hit a standard script breakpoint, HTML breakpoint, XHR or error brakpoints, etc. To make sure the user understands the right reason a notification with details is displayed.
Open in external editor
Individual script files displayed by Firebug can be opened in external editors or IDEs. Firebug also allows to properly configure arguments such as line number, url, etc.Links and Elsewhere
Firebug around the web
- Firebug Tips & Tricks Learn more about Firebug features
- Extending Firebug How to build an extension for Firebug
- Follow us on Twitter Firebug news on Twitter
- Firebug Extensions List of Firebug extensions
No comments:
Post a Comment