debugging breakpoints in JavaScript debugging techniques

First of all, in each browser, the best of the breakpoint debugging support is of course firefox,firefox can not only use the Firebug Debug page JS script, but also with advanced debugging tools such as JavaScript Debugger (Venkman) To debug the JS in the Firefox extension. In addition, Firefox also supports some of the more advanced breakpoint debugging, variable monitoring functions.

in other browsers, the debug features of Opera, Chrome and Safari are also useful. Opera's dragonfly speed is relatively fast, the interface is refreshing, powerful, but not as friendly as safari. In contrast, IE8 's programmer tools are simply useless.

This time is limited, first to summarize the Firefox debugging skills.

1. Using Firebug for breakpoint debugging

debugging JavaScript with Firebug is handy. Specific steps:

A. After opening firebug, enable "script" debugging, find the referenced script file (or inline JS);

Use Firebug to find the script to debug (click to enlarge)

B. Add a breakpoint at the appropriate location;

C. If a breakpoint has been executed, the page is refreshed and the script breaks at the breakpoint. If the breakpoint is not executed, the action on the page can be executed directly (for example, by clicking on a button), then the code will break at the breakpoint;

Debug breakpoints with Firebug (click to enlarge)

D. Observe the function call stack and observe the local variable, or you can perform a single step and debug.

Very simple indeed! The advantages of using Firebug breakpoint debugging are summarized as follows:

• Can add breakpoint line with the Green line number, very intuitive;
• Call stack is displayed in two ways, very convenient;
• The display of local variables is very clear and unambiguous.

2. Debugging breakpoints using JavaScript debugger

This is a veteran debugging tool, previously called Venkman , can be installed in the form of the extension of Firefox, we are here to call him Venkman it. It is not only able to debug page scripts, but also debug the Firefox extension (extension) JS. When we do the development of Firefox expansion, Venkman is an indispensable tool, the old field strongly recommended! Of course, the logical implementation of Firefox itself is also done with JavaScript. We can now use Venkman to debug Firefox itself. Firefox's core JS is browser.js, under this path:

Chrome://browser/content/browser.js

After we open the Venkman, in the loaded scripts fill in the Browser.js, this JS file will be filtered out (if you do not see browser.js, then you may need to check if you choose Debug->exclude browser files).

Venkman: Select the JS file to debug (click to enlarge)

We find the code to get the browser back, then click on the Firefox back button, then Venkman will stop on the Browserback Method! Let's take a step-by-step look at what Firefox has done. BTW, the realization of Firefox JS code is not very beautiful ~ ~ ~

Debug Firefox with JavaScript debugger breakpoints (click to enlarge)

Venkman Of course also comes with a console, and with this console we can look at the browser-level window and document. Similar to the console of Firebug and other browsers, just enter the JS code snippet directly!

Use the console that comes with Venkman (click to enlarge)

If you are interested, you can find more interesting things about Firefox development (and extended development) here!

3. Use debugger to add breakpoints to your program

There is also a less-known breakpoint addition method. We can add the debugger statement to the program so that Firefox's debugging tools stay on the statement, the code pauses, and the effect of adding breakpoints. For example:

var myfunc = {    get_field_value_callback:function () {        debugger;        var ed = this, target = Ed.currspan;        /* Do something more */    }}

When the page reloads, the breakpoint is stuck on the debugger statement. In this way, we can add breakpoints whenever we want to write code. In addition, other browsers (including ie8! surprise! also supports debugger statements!

last summed up javascript breakpoint debugging under Firefox tips, check out the debugging in other browsers this time. As a point of note, the debugging techniques here do not rely on tools outside the browser, such as aptana,vs2008. If you want to find some information on this, I do not have Kazakhstan.

Other browsers, mainly opera, Safari, Chrome and IE8. In addition to IE8, their debugging functions are pretty good, basically can search scripts, add breakpoints, see the call stack, local variables, as well as the powerful console.

1. Use Opera's Dragonfly for breakpoint debugging

Use opera Dragonfly for breakpoint debugging

open Tools–advanced–developer tools to see a development tool similar to Firebug, named Dragonfly , that is, dragonflies. Here you can view the page structure, view network interactions, and debug breakpoints, and use command Line (console) during debugging.

Opera on WindowsXP also belongs to Yui to support the A-grade ( See this form ), so we should try to support it when we develop it. Also Dragonfly's DOM viewing tool has a highlight, Export current DOM view. We can do some DOM changes online, and then export it to get the modified HTML code, very convenient.

2. Debugging breakpoints using Chrome and Safari

If you think opera is too small, you can debug on safari or Chrome. Two browsers are very similar in debugging and interface, so take Safari 4.0 for example. Open Menu–develop–start debugging JavaScript to bring up a debugging tool. It's worth mentioning that the debugging tools for Safari and Chrome are best not to dock to the browser, because the debug interface is just fine.

First find the script you want to debug:

Using Safari for JavaScript debugging: Finding a script

To set a breakpoint, reload the page (or perform an action):

Using Safari for JavaScript debugging: Setting breakpoints

View local variables and function call stacks on the right:

Using Safari for JavaScript debugging: Variable viewing

One of the highlights of Safari's debugging tools is that the console and breakpoints are debugged on the same interface, which makes it very easy to use the console to do some validation when the program is interrupted.

3. IE8 's breakpoint Debugging function

IE8 's own developer tools, although extremely difficult to use, but also can be breakpoint debugging. The breakpoint debugging method is similar to the above.

debugging breakpoints using the IE8 developer tool

As you can see, IE8 seems to have somehow terminated the identification of the JS code. In this case, from 74 lines back, there is no way to add a breakpoint, it is incredible. But we sometimes to be compatible with IE, have to do some debugging under IE, how to do? You can use the method of the previous article to add the debugger statement where the interrupt is required, so that when the program runs, the IE8 will be interrupted on the debugger statement.

Reprint http://blog.csdn.net/teresa502/article/details/5087241

debugging breakpoints in JavaScript debugging techniques