How do you debug a JavaScript program? The most primitive way to print content on a page with alert () is to use Console.log () to output content on the JavaScript console with a slightly improved approach. Well, using these two methods really solves the debugging problems of many small JavaScript scripts. But it's a pity to put the more powerful developer tools in Chrome. This article mainly introduces the JavaScriptBreakpoint SettingsAndDebugfunction, which is the Sources Panel (formerly called Scripts). If you are proficient in the various Java debugging techniques in Eclipse, the concepts here are similar. The version of Chrome that was used to write this article is 25.0.1364.172.
Basic Environment the left side of the Sources Panel is the content source, including the various resources on the page. Among them, also divide Sources and Content scripts. Sources is the various resources contained in the page itself, it is organized according to the fields appearing in the page, which is our concern. The asynchronous loading of the JS file will also appear here after loading. Content scripts is an extension of Chrome that is organized by an extended ID, which is actually a resource embedded in the page, and they can also read and write to the DOM. Developers who write and debug such extensions are concerned about them, and if your browser does not have any extensions installed, thenContent scripts can't see anything.
the intermediate main area of the Sources Panel is used to display the contents of the left resource file.
on the right side of the Sources Panel is the debug ribbon, with the topmost row of buttons paused/resumed, stepping, stepping in, stepping out, disabling/enabling all breakpoints. The following are the various specific functional areas. described later.
Note that the left and right sides of the area default may shrink on both sides of the display, click on both sides of the scaling buttonShow up. When the left area is displayed, the default is auto-shrinking, and clicking the Pin button next to it will not shrink back.
There are also some feature buttons at the bottom that are useful.
to set breakpoints on source codeThrough the left content source, open the corresponding JavaScript file, the mouse click on the file line number can set and delete breakpoints. Each breakpoint that you add appears in the Breakpoints list in the debug area on the right, and clicking on the list breakpoint will position you on the break point in the content area. If you have multiple files and multiple breakpoints, it is convenient to use the breakpoints in the breakpoints list to quickly locate them.
There are two states for each breakpoint that has been added: active and disabled. The breakpoint you just added is active, and the disabled state is the one that retains the breakpoint but temporarily cancels the breakpoint function. In theThere is a check box before each breakpoint in the Breakpoints list, and the breakpoint will be disabled if unchecked. Breakpoints can also be disabled in the right-click menu of the breakpoint location. You can also temporarily disable all added breakpoints on the right-hand ribbon button, and then click Restore Status.
Conditional Breakpoint: In the right-click menu of the breakpoint location, select "Edit breakpoint ..." To set the condition for triggering a breakpoint, which is to write an expression that is true when the breakpoint is triggered.
to view the environment of a breakpoint
Call Stack：when the breakpoint is stopped, the call stack on the right side of the debug area shows the stack of method calls where the current breakpoint is located, such as having a function g () where the function f () is called, and I set a breakpoint in F (), and when I execute the function g () in the console the breakpoint is triggered The stack is displayed as follows:The top is f () and then G (). Each layer in the call stack is called a frame, and clicking on each frame can jump to the call point of the frame. In addition, the current frame can be restarted on the frame with the right-click menu, which is executed from the beginning of the frame. For example, Restart frame on a frame of function f (), the breakpoint jumps to the beginning of f () and the value of the variable in the context is restored.This combination of variable modification and editing of code and other functions, you can be repeated in the current frame debugging, without refreshing the page to re-trigger the breakpoint.
View VariablesBelow the call Stack list is a list of Scope Variables, where you can see the values of local variables and global variables at this time.
code to execute the selectionWhen debugging a breakpoint, you can see the current value of the expression by selecting the variable or expression you want to view, and then executing "Evaluate in Console" On the right-click menu.
Interrupts
the next JavaScript statement to executeThe "Break/Continue" button on the right side of the debug area also has a feature thatWhen a breakpoint is not triggered, click this button to go to the "Ready" interrupt state, the next time the page executes the JavaScript statement will be automatically interrupted, such as triggered a click action will be executed when the code.
temporarily modify JavaScript codeUsually we are accustomed to debugging code: Modify the Code → refresh the page → recheck, such a loop. But in fact, Chrome can temporarily modify the contents of the JS file, save (Ctrl+s) can be effective immediately, combined with the console and other functions can be re-debugged immediately. But notice that this change is temporary, refresh the page changes will be gone.
Breakpoint at Exceptionbelow the interface, you can seebutton, which is a switch that sets whether the program breaks when it encounters an exception when it runs. Clicking this button toggles between 3 states:
- Default encountered exception not interrupted
- All exceptions will be interrupted, including captured cases
- Interrupts only if an uncaught exception occurs
Explain the difference between state 2 and State 3.
Try {
Throw ' A exception ' ;
}catch(e) {
Console . Log (e);
}
The code in the above try encounters an exception, but the catch code behind it catches the exception. If all exceptions are interrupted, the code is automatically interrupted when it executes the throw statement that produces the exception, and if it is interrupted only by an uncaught exception, there is no interruption. In general, we are more concerned about situations where an uncaught exception is encountered.
to set breakpoints on DOM elements
Sometimes we need to listen to a DOM being modified, without worrying about which line of code is being modified (and there may be multiple changes to it). Then we can set breakpoints directly on the DOM. As you can see, there are three different cases of breakpoints in the right-click menu of an element in the Elements Panel of the element review:
- Child node Modification
- Self-Property modification
- The node itself is deleted
When selected, the DOM breakpoint appears in the DOM breakpoints list on the right side of the Sources Panel. Once executed to make the appropriate modifications to the DOM, the code stops there, as shown in.
XHR BreakpointThe right side of the debug area has a XHR breakpoints, click + and enter the URL contains a string to listen to the URL of the Ajax request, the input content is equivalent to the URL of the filter. If you do not fill in anything, then listen to all XHR requests. Once the XHR call is triggered, it is interrupted at Request.send ().
trigger Breakpoint by Event typethe right side of the debug areaEvent Listener list, which lists the various possible eventstype. Tick the corresponding event type and the JavaScript code that triggered the event of that type is automatically interrupted.
Debugging shortcut KeysThe shortcut keys in all development tools can be found in the settings in the lower right corner of the interface. Breakpoints are typically used for F8, F10, F11, or SHITF+F11, but function keys such as F10 on Mac OS may conflict with the system's default shortcut keys. It doesn't matter, they can use cmd+/, cmd+ ', cmd+ respectively; , shift+cmd+; Replace.
//@ sourceURL give the eval code a name.sometimes very dynamic code is created as a string in the current Javascript context using the eval () function instead of being loaded as a standalone JS file. You can't find this file on the left side of the content area, so it's hard to debug. In fact, we just add a line at the end of the code created by eval//@ sourceurl=
name " You can give this code a name (the browser treats this particular form of comment in a special way) so that it will appear on the left side of the content area, as if you had loaded a JS file with the specified name, you can set breakpoints and debug. , we executed a piece of code through eval and took advantagesourceURL named it dynamicscript.js, the "file" appears in the left-hand content area after execution, and its content is the content of the eval.
You can also take a look at this to dynamically compileout ofcoffeescript code-namedExample:
var Coffee = Coffeescript . Compile (code. value ) +"//@ sourceurl="+(evalname. value || "coffeeeeeeee!" );
Eval (coffee);
In fact,//@ sourceURL can not only be used in eval code, any JS file, or even Javascript Console input code can be used, the same effect!
format code (pretty Print)The button is used to reformat the messy code into beautiful code, such as some of the compressed JS files are basically impossible to see, more impossible to debug. Click Format, then click to cancel Formatting. Before beautification
After landscaping
JavaScript breakpoint settings and debugging tips in Chrome
