IE debugging page 5: Using F12 Developer Tools to debug JavaScript errors (Windows)

With F12, Web developers can quickly debug JavaScript without leaving the browser.Code. Built into each Windows Internet Explorer 9 installation, the F12 tool provides debugging tools (such as breakpoint, monitoring, and local variable viewing) and a console for message and instant code execution.

This topic describes how to use the F12 tool to debug your JavaScript code. The purpose of this topic is not to provide a comprehensive debugging tutorial, but to focus on tools that can help you get started with your own code. From Internet Explorer 9, pressF12To open the tool, and then click the script tab to start using it.

On the script tabSource codePane, where you can view the JavaScript code, set the breakpoint and gradually execute the function execution path. In the right pane, you can switch between the "console", "monitoring variables", "local variables", "monitoring stack", and "breakpoint" tabs.

Start and Stop debuggingProgram

When you open the F12 tool and click the script tab for the first time, the Code is displayed on the left and the console is displayed on the right. In the console, a message may be displayed: "refresh this page to view messages that may have occurred before the F12 tool is opened. "When you refresh the webpage, the console displays you with any errors or warnings from your browser.

To set breakpoints, view monitoring and local variables, and view call stacks of a series of functions, click Start debugging. Click Start debugging to refresh the webpage and restart the code in the debugging program.

Use the console to find syntax and other code errors

In most coding projects, errors usually include syntax, logic, or data input errors. The console view displays JavaScript errors and exceptions, as well as Document Object Model (DOM) exceptions. In your code, you can use console objects to send status and program error messages to the console, instead of using "alert ()" call or screen space. For example, you can add a line to JavaScript code (for example

Javascript

 
Window. Console. Log ("the file opened successfully");) to get the status in the script without interrupting execution. For more information about how to use the console, see use the F12 tool console to view errors and statuses.
 

Beautiful scripts

The F12 tool can debug JavaScript at the row or statement level, regardless of whether the code is displayed by line or statement. Those large pieces of compact code can still be executed gradually. However, if you put all the code in a code block, it is sometimes difficult to follow the logic.

To set the script format or "Excellent print" script, click "Configure" and then click "format JavaScript ". The following screen snapshot shows the comparison between the JavaScript code block before and after formatting.

Interrupt Code Execution

The method for setting breakpoints in F12 is similar to that in binary code debugging programs (such as Microsoft Visual Studio. In the left-side pane, click the left side of the code line to be interrupted. You can click to add a breakpoint and click again to remove the breakpoint.

You can add any number of breakpoints to the code. You can right-click the code line and click "insert breakpoint", or click the left margin next to the statement to be interrupted.

By using the F12 tool, you can set breakpoints at the statement level, even if these statements are in multiple statement blocks or rows. In this way, it can be interrupted in a compact code section. The best way to set a breakpoint under these conditions is to right-click the code and then click Insert breakpoint from the shortcut menu ". You can also use the script formatting (beautiful display) function described earlier to format the code lines so that you can click in the margin.

Manage multiple breakpoints by using the breakpoint Tab

If you have a large code library that contains many breakpoints (or even multiple files), the breakpoint tab helps you track all these breakpoints. On the script tab, click the breakpoint tab in the properties pane (right pane. For examples, see.

On the breakpoint tab, you can enable or disable, delete, select, and copy breakpoints without going to the exact location where you want to set them. To enable or disable a breakpoint, click the check box next to the setting you want to change. Double-click the list to jump to the breakpoint in the Code immediately. By pressingCTRLClick multiple breakpoints to select multiple breakpoints.

The breakpoint tab also has a shortcut menu (available when you right-click) that allows you to delete, enable, disable, or copy breakpoints in batches. The following table shows related options.

Menu item	Function
Delete	Permanently delete a breakpoint.
Delete all	Permanently delete all breakpoints.
Enable all	Set all check boxes in the list.
Disable all	Clear all check boxes in the list.
Condition	Allows you to set conditional breakpoints for breakpoints. If multiple breakpoints are selected, this option is disabled.
Copy	Copy the text of the selected breakpoint description.
Select All	Highlight all breakpoints in the list.
Go to source code	Navigate to the left-side code pane to display the selected breakpoint. If multiple breakpoints are selected, this option is disabled.

Conditional breakpoint

It is helpful to interrupt a line of code unconditionally, but it is even more useful when an attribute or variable reaches a specific value. To interrupt when a specific value is reached or set, set the breakpoint and open the "breakpoint" tab. Right-click the breakpoint you want to use and click condition ".

In the condition dialog box, add a valid JavaScript statement. When you run the Code, if the statement is true, the Code stops running at the breakpoint. For example, when the oaudio. paused attribute is false, the Code stops running.

You can use either a single condition or a logical statement to disconnect a database based on more complex conditions. Keep in mind that the variables and objects will have the same scope, as if they were checked at breakpoints in the monitoring window. If a condition that is not in the scope is used, the condition is not calculated as true.

Step-by-Step Code Execution

When code execution stops at a breakpoint, you can use the navigation button to continue executing the function (F5), All interrupted execution functions (CTRL + Shift + B) Or execute a function by statement (F11), Process-by-process execution function (F10) Or jump out of function execution (Shift + F11). When the breakpoint is paused or is being executed gradually, the debugging window is actually a mode window.

For this reason, when you interact with the web page again, you need to stop debugging (Shift + F5) Or continue to execute the code (F5). If your webpage does not seem to be able to respond, it is necessary to remember this point. If multiple windows are opened and the debugger is not at the top, it may be waiting for a response at the breakpoint. If this happens, find the corresponding webpage in the debugging window and pressF5Continue to run the code, or pressShift + F5Stop debugging to return control to the webpage.

Use the "monitoring" and "local variables" tabs to monitor Variables

Use the monitoring tab to set and monitor variables in the code. The names, values, and types of the specified variables are listed. On the monitoring tab, click the row marked as "click to add..." and enter the variable name. If you do not want to type a variable name, copy it and paste it into the monitoring list.

The monitoring variable List displays the value of the code you are debugging. When debugging and tracing code is enabled or breakpoints have been set, the scope of the variable value in the list is your position in the script. If debugging is disabled, the scope is global and only the global variables display the value.

Unlike the monitoring tab (whether the variables are out of scope), the local variables Tab View Only displays the variables in the current scope. You do not need to add the variable to be monitored because it updates all available variables as the scope changes.

To view the differences, open the following example in Internet Explorer 9 and follow these steps.

 <!  Doctype html  >  <  Html  >  <  Head  >      <  Title  > Javascript debugging example </  Title  >          <  Script  Type  = "Text/JavaScript"  >          //  Create a global variable for our <div>          VaR  Display;  Function Init (){  //  Initialize only after the HTML has been loaded  Display  =  Document. getelementbyid (  "  Results  "  );} Function  Firstparam (){  //  Set breakpoint here              VaR  A  =   5  ; Secondparam ();}  Function Secondparam (){  VaR  B  =   10  ; Thirdparam (a, B );}  Function  Thirdparam (a, B ){  VaR  C  =  15  ;  VaR  D  =  A  +  B  +  C;  // Display to console if F12 tools is open              If  (Window. Console  &&  Window. Console. Log) {window. Console. Log (  +   "  +  "   +  B +   "  +  "   +  C  +   "  =  "   +  D );} Else  {Display. innertext  =  A  +   "  +  "   +  B  +   " +  "   +  C  +   "  =  "   +  D ;}}  </  Script  > </  Head  >  <  Body  Onload  = "Init ();"  >          <  P  > <  Button  Onclick  = "Firstparam ();"  > Run </  Button > </  P  >          <  Div  ID  = "Results"  > </  Div  >  </  Body  >  </  Html  > 

1. In Internet Explorer 9, load the example.
2. PressF12Open the F12 tool and click the script tab.
3. In the left-side pane, scroll to the first function, right-click the row whose content is "Var A = 5;", and click "insert breakpoint ".

   FunctionFirstparam (){//Set breakpoint hereVaRA = 5; Secondparam ();}

4. Click Start debugging, and then click run on the web page in the browser.
5. In the F12 tool, click the "monitoring" tab on the right and add the variables "A, B, C, and D ".
6. By pressingF11Step-by-Step code execution, or click the "one-step execution" button to monitor the variables on the "monitoring" tab.

When performing each function step by step, you should see that the monitored value is changed from undefined to a value.

To view the difference on the "local variables" tab, pressF5Continue to use the F12 tool. In the browser, click the "run" button on the webpage to re-run the code and return to the F12 tool. In the right pane of the script tab, click the local variables tab and pressF11To gradually execute the function again. In the local variable list, note that only variables with values are listed. The local variables view also displays the parameters, parameter values, and types passed to a function.

View call stack

Use the "call stack" tab to view the path used to call a function in your code. This helps you find unexpected code paths as bugs. On the "call stack" tab, you can double-click any function and go to the corresponding call in the source code.

Try the example mentioned above and view the "call stack" tab when tracking the function.

On the call stack tab, the current function or position is always at the top (the position pointed by the arrow in the call stack tab and in the Code margin ). When you double-click any function in the list, the statements that call the function are highlighted.

Debug multiple scripts

A large webpage usually contains multiple JavaScript files. The F12 tool allows you to operate multiple script files when debugging code. To view different files, click the downward arrow next to the start debugging button to display the list of scripts associated with the web page. When you use the F12 tool to gradually execute code, the F12 tool will follow the execution path across multiple files. You can add variables for monitoring from any script file. The "call stack" View displays the execution path of functions contained in different script files.

Change document Mode settings

The document mode setting on the right of the menu bar can be used on any Tab Of the F12 tool, but it is especially useful when debugging code on the script tab. With Internet Explorer 9, you can change document mode to simulate earlier Windows Internet Explorer standards. In Internet Explorer 9, stop using <! The doctype> declaration will set the document type to the quirks mode by default. Use new features or standard features (such as HTML5AudioOrCanvas), Some bugs that may seem to be coding errors are actually caused by the lack of a document type declaration or incorrect document type declaration.

the Internet Explorer 9 F12 tool cannot fix your code, but it makes it easier to find JavaScript errors.