How to debug Javascript code

Currently, Common Browser IE, Chrome, and Firefox all have corresponding script debugging functions. As our. NET camp, it is enough to learn how to debug JS in IE. After mastering the debugging methods in IE, the debugging methods in Chrome and Firefox become quite simple.

Debug in F12 Developer Tools

Open IE and press the F12 key to open the developer tool, which is a built-in developer development tool for IE, this allows developers to track, debug, and use HTML, CSS, Javascript, and other webpage resources.

If the page is not fixed at the bottom of the page, click the button in the menu bar in the upper right corner.

The tool window contains several tabs: HTML, CSS, console, script, probe, and network. Click each tab to execute the corresponding task.

In the HTML Tag window, the buttons in the toolbar perform the following operations:

CSS labels are used to view styles. The console displays various JS output information on the webpage, including error information and user logs. Open the script tab, which is what we want.

In the figure, I use a yellow rectangle to select a control. The drop-down list on the left is used to select a file, and the button on the right is used to start debugging. After you click Start debugging, the debugging program will maximize the window. in the selected file, locate the position to be debugged and click Add breakpoint on the left sidebar for debugging.

When a program runs at our breakpoint, You can debug it.

Here, we can use shortcut keys for operations. The common shortcut keys are as follows:

F9: Add/Remove breakpoints

F10: Process by process, that is, skip the methods and expressions in the statement.

F11: Statement-by-statement debugging, that is, one-step debugging, jumps into methods and expressions for statement-by-statement tracing debugging.

 

If you want to execute Real-Time Code during execution, you need to enter the code in the right pane and press Enter.

If you want to execute multiple lines of code, click the double arrow at the right of the run button to open the multiline mode. I will not film any more.

 

This method of debugging directly in the browser is also suitable for Google Chrome and FireFox FireDebug, but it is somewhat different on the bottom of the branch, and the main functions are the same.

Press the F12 key to enter the developer tool. You can view the source code, style, and js.

Click the Scripts button to open the debugging window, which contains the script file source code on the webpage. click the button on the left to open the side window of the selected file. There are debugging tool buttons on the right, but I don't like these pure English interfaces, so most of the debugging is still performed in IE. And will be switched to VS in IE.

Next I will introduce how to debug our JS Code in.

Use the debugger keyword for debugging

This method is very simple. We only need to add the debugger keyword to the debugging place. When the browser runs this keyword, it will prompt whether to enable debugging. We can choose yes. For such debugging, you can select the debugging tool, whether to enable the new vs or debug the existing VS. I personally prefer this debugging method.

When we run this program, the debugging Prompt window will pop up:

If this window does not pop up in your browser, you need to make a simple setting to enable the Internet option:

Deselect the two items in the red box.

After setting, you can use the debugger keyword for debugging. After such setting, we can also capture unexpected errors for tracking and debugging.

 

Well, this article will introduce you here. If you have any questions, please contact me. Debugging is a practical process. you can master the methods and skills only when you have used more times.

----------------------------------------

June 14, 2013

• Debug Javascript in IE
• Debug Javascript in Visual Studio
• Debug Javascript in Google Chrome