Cutting Crip debugging skills-breakpoint debugging _ javascript skills-js tutorial

This article introduces breakpoint debugging of javascript Debugging techniques. It mainly describes how to use Firebug, debugger, and debugger to add breakpoint debugging to a program. However, these Debugging techniques do not rely on tools other than browsers, other browsers are mainly opera, safari, chrome, and ie8. If you are interested, take a look. First of all, among all browsers, the best support for breakpoint debugging is Firefox, firefox can not only use Firebug to debug page js scripts, but also use advanced debugging tools such as JavaScript Debugger (Venkman) to debug js in Firefox extensions. In addition, Firefox also supports more advanced breakpoint debugging and variable monitoring functions.

Debugging functions of Opera, Chrome, and Safari are also useful in other browsers. Opera's DragonFly is relatively fast, its interface is refreshing, and its functions are powerful, but it is not as friendly as Safari. In comparison, IE8's programmer tools are useless.
The time is limited. Let's summarize the debugging skills in Firefox.

1. Use Firebug for breakpoint debugging

It is very convenient to debug JavaScript using Firebug. Procedure:

A. After opening Firebug, enable "script" debugging and find the referenced script file (or In-line js );

Use Firebug to find the script to be debugged (click to zoom in)

B. Add breakpoints at appropriate locations;

C. If the breakpoint has been executed, refresh the page and the script will be interrupted at the breakpoint. If the breakpoint has not been executed, you can directly execute the actions on the page (such as clicking a button), and the Code will be interrupted at the breakpoint;

Use Firebug for breakpoint debugging (click to zoom in)

D. Observe the function call stack, observe the local variable, and perform single-step execution and debugging.

It's really simple! The advantages of breakpoint debugging with Firebug are summarized as follows:

Lines that can add breakpoints use green line numbers, which is very intuitive;

Call stack is displayed in two ways, which is convenient;

The local variables are clearly displayed.

2. Use JavaScript Debugger for breakpoint debugging

This is an old debugging tool called Venkman. It can be installed in Firefox as an extension. Here we will call it Venkman. It can not only debug page scripts, but also debug js in Firefox extension. Venkman is an essential tool for Firefox extension development! Of course, the logic Implementation of Firefox is also implemented using JavaScript. Now we can use Venkman to debug Firefox itself. The core js of Firefox is browser. js. In this path:

Chrome: // browser/content/browser. js

After enabling Venkman, enter "browser" in Loaded Scripts. js, The js file will be filtered out (if you do not see browser. js, you may need to check whether Debug-> Exclude browser files is selected ).

Venkman: select the js file to be debugged (click to enlarge)

Find the code to let the browser back up, and click the back button of Firefox, then Venkman will stop on the BrowserBack method! Let's take a further look at what Firefox has done. Btw, JavaScript code for implementing Firefox is not very beautiful ~~~

Debug Firefox with JavaScript Debugger breakpoint (click to enlarge)

Venkman also has a console. With this console, we can see what windows and document at the browser level are. Similar to the console of Firebug and other browsers, you just need to enter the js code snippet directly!

Use the console provided by Venkman (click to enlarge)

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

3. Use debugger to add breakpoints to the program

There is also a slightly unknown method for adding breakpoints. We can add the debugger statement to the program, so that the debugging tool of Firefox will stay on this statement and the code will be suspended, which is the same as adding a breakpoint. For example:

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

When the page is reloaded, the breakpoint will stay on the debugger statement. In this way, we can add breakpoints whenever we want to write code. In addition, other browsers (including IE8! Surprise !) The debugger statement is also supported!

The last time I summarized the JavaScript breakpoint debugging skills in Firefox, I will take a look at debugging in other browsers. One note is that the debugging skills here are not based on tools other than browsers, such as Aptana and VS2008. If you want to find some materials in this area, I don't have them here.

Other browsers, mainly Opera, Safari, Chrome and IE8. In addition to IE8, these debugging functions are quite good. You can basically search scripts, add breakpoints, view the call stack, local variables, and powerful console.

1. Use Opera's Dragonfly for breakpoint debugging

Use Opera Dragonfly for breakpoint debugging

Open Tools-Advanced-Developer Tools and you will see the development tool similar to Firebug, called Dragonfly, that is, Dragonfly. You can view the Page Structure, network interaction, and breakpoint debugging, and use Command Line (console) during the debugging process ).

Opera on WindowsXP is also A-grade to be supported by YUI (see this table). Therefore, we should try our best to support it during development. In addition, the Dragonfly DOM viewing tool has a bright spot: Export current DOM view. We can make some DOM changes online, and then Export them to get the modified HTML code, which is very convenient.

2. Use Chrome and Safari For breakpoint debugging

If you think Opera is too small, you can debug it on Safari or Chrome. The debugging methods and interfaces of the two browsers are extremely similar. Therefore, Safari 4.0 is used as an example. Open Menu-Develop-Start Debugging JavaScript to bring up a Debugging tool. It is worth mentioning that the debugging tools of Safari and Chrome should not Dock to the browser, because the debugging interface is just right when it pops up.
First, find the script to debug:

Debug JavaScript using Safari: Find the script

Set a breakpoint to reload the page (or execute an action ):

JavaScript Debugging Using Safari: set breakpoints

Check the local variables and function call stack on the right side:

JavaScript Debugging Using Safari: viewing Variables

One of the highlights of the Safari debugging tool is that the console and breakpoint debugging are on the same interface, which makes it easy to use the console for some verification operations when the program is interrupted.

3. breakpoint debugging of IE8

The developer tool provided by IE8 is extremely difficult to use, but can also be used for breakpoint debugging. The breakpoint debugging method is similar to the above.

Use IE8 Developer Tools for breakpoint debugging

As you can see, IE8 seems to have ended the identification of js Code inexplicably. In this case, there is no way to add a breakpoint from line 74. This is incredible. But sometimes we have to perform some debugging in IE to be compatible with IE. What should we do? You can use the method in the previous article to add the debugger statement to the position where the program needs to be interrupted, so that IE8 will be interrupted in the debugger statement when the program runs.

The above content is a small Editor to share with you the JavaScrip debugging skills, Firefox power-off debugging, I hope you like it.