debugging JavaScript errors using the F12 developer tool __java

Using the debugger in the F12 tool, Web developers can improve development efficiency by quickly debugging JavaScript code without leaving the browser, and quickly locating the error codes for JavaScript files.

start using the debugger

The new version of IE11, using debugger tools to debug without refreshing the page, retains the state, and the F12 tool can still be adsorbed in the browser window.

Open the problematic Web page in Internet Explorer 11, press F12, or select the F12 Developer Tool option from the Tools menu.

The default display layout for the debugging tools is three panes, and you can change the size of each pane by dragging.

The Script window (left) interface displays the HTML and JavaScript source code of the Web page, and the Top tab allows you to quickly switch files to edit them. The scroll bar around the Script pane also highlights the location of the breakpoint that has been marked.

The value of the variable is displayed in the Watch pane (upper-right corner). When you are in break mode, it shows the variable of your current position code,

The two features at the bottom right are call stacks and breakpoints:

Call stack: A function call chain that displays the current breakpoint.

Breakpoints: Displays a list of settings for breakpoints and trace points, and provides functions for deleting, switching, and editing breakpoints.

When the debugger executes to a breakpoint, you can tell it what to do next by controlling the icon button.

Icons are represented from left to right:

Continue (F5 or F8): Leaf break mode, and continue to the next breakpoint.

Break (Ctrl + Shift + B): Break the operation at the next statement.

Step Into (F11): If not in a function, to the next statement or step to the function called.

Stepping (F10): If not in a function, to the next statement or step in the function being called.

Step Out (Shift + F11): Steps from the current function and the calling function.

Break when a new worker process occurs (Ctrl + Shift + W): interrupted when creating a new Web worker.

Exception control (Ctrl + Shift + E):

By default, this ignores exceptions, and they simply log to the console tool. You can select all exceptions, or just not be interrupted by a try ... catch exception handler in your code.

The last two icons enable high quality printing (Ctrl + Shift + P) and enable automatic wrapping (ALT+W) to increase the readability of compressed code.

If you want a property or variable to break when it reaches a specific value during debugging, you can set a breakpoint in the Script window, and then, in the Breakpoints tab, right-click the breakpoint that you want to use, and click the condition option. In the Criteria dialog box, add a valid JavaScript conditional statement. When you run the code, if the statement is True, the code stops running at the breakpoint.