JavaScript Debugging Tips: Breakpoint Debugging

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

In other browsers, Opera, Chrome, and Safari also have a better debugging function. Opera's dragonfly speed is relatively fast, the interface is refreshing, powerful, but not as friendly as safari. In comparison, IE8 programmer tools are simply useless.

This time is limited, first to summarize the debugging techniques under Firefox. 1. Use Firebug for breakpoint debugging

debugging JavaScript with Firebug is handy. Specific steps:

A. After opening the 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 position;

C. If the breakpoint has already been executed, refresh the page, and the script will break at the breakpoint. If the breakpoint has not been executed, you can directly perform the action on the page (for example, clicking a button, etc.), and then the code breaks at the breakpoint;

Breakpoint Debugging with Firebug (click to enlarge)

D. Observe the function call stack, observe the local variables, you can also perform a single step, debugging.

Very simple indeed. The advantages of using Firebug breakpoint debugging are summarized as follows: The line with the breakpoint is Green line number, very intuitive; Call stack is easy to display in two ways; the display of local variables is very clear. 2. Use JavaScript debugger for breakpoint debugging

This is the old debugging tool, previously called Venkman, can be installed in the extended form of Firefox, we call him here as Venkman Bar. It not only can debug the page script, but also debug the Firefox extension (extension) in the JS. When we do Firefox expansion development, Venkman is an essential 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, in this path:

chrome://browser/content/browser.js

After we open the Venkman, in 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 whether the Debug->exclude browser files).

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

We find the code that lets the browser back up and click on the Back button of Firefox, and then Venkman stops at the Browserback method. Let's take a closer look at what Firefox has done. BTW, the implementation 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, using this console, we can look at the browser level window and document what are all things. Similar to the Firebug and other browser console, just enter the JS code snippet directly.

Use the console 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 a breakpoint to the program

There is also a less-known breakpoint addition method. We can add the debugger statement to the program so that the Firefox debugging tool stays on this statement, and the code is paused, as does the addition of the breakpoint. For example:

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

When you reload the page, the breakpoint stays on the debugger statement. In this way, we can add breakpoints as we write code. In addition, other browsers, including IE8. Surprise. also supports debugger statements.

Last summed up Firefox under the JavaScript breakpoint debugging techniques, this time to look at other browsers debugging. As a note, debugging techniques here are not based on tools other than browsers, such as aptana,vs2008. If you want to find some information on this, I do not have a ha.

Other browsers, mainly opera, Safari, Chrome and IE8. In addition to IE8, they are very good debugging functions, basically can search the script, add breakpoints, view the call stack, local variables, and powerful console. 1. Use Opera's Dragonfly for breakpoint debugging

Using opera dragonfly to debug breakpoints

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

Opera on Windows XP also belong to Yui to support the A-grade (see this form), so we in the development of time, we should try to support. In addition Dragonfly's DOM View tool has a bright spot, Export current DOM view. We can do some DOM changes online, and then export, you can get the modified HTML code, very convenient. 2. Use Chrome and Safari for breakpoint debugging

If you think opera is too small, you can debug on safari or Chrome. The two browsers are very similar in their debugging and interface, so take Safari 4.0 for example. Open Menu–develop–start debugging JavaScript to eject a debugging tool. It is worth mentioning that Safari and Chrome's Debugging tools are best not to dock to the bottom of the browser, because the debugging interface is just right when it bounces out.

First find the script you want to debug:

JavaScript debugging with Safari: finding a script

Set breakpoints, reload pages (or perform actions):

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 console and breakpoint debugging are in the same interface, which makes it easy to use the console to do some validation when the program interrupts. 3. IE8 Breakpoint Debugging function

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

Breakpoint debugging using the IE8 Developer tool

As you can see, IE8 seems to have somehow terminated the recognition of the JS code. In this case, from 74 lines, there is no way to add breakpoints, it is incredible. But we sometimes in order to compatible with IE, have to do some debugging under IE, how to do it. You can use the previous article to add the debugger statement where the interrupt is needed, so that when the program runs, the IE8 is interrupted on the debugger statement.