How to debug JavaScript code

How to debug JavaScript code from the original

At present, the common browser ie, Chrome, Firefox have the corresponding script debugging function. As our. NET Camp, learning how to debug JS in IE is enough, after mastering the debugging methods in IE, Chrome and Firefox debugging methods have become quite simple.

Debugging in the F12 developer tool

Open IE browser, press the F12 key, will open the developer tool, this is IE built-in developer development tools, convenient for developers to HTML, CSS, JavaScript and other Web resources for tracking debugging use.

If you are not fixed at the bottom of the page when you open it, you can click on the button in the top right-hand corner menu bar to complete.

We see several tabs in the tool window: HTML, CSS, consoles, scripts, profilers, and networks, each of which can be executed with each tab.

In the HTML tag window, the buttons in the toolbar perform actions such as:

CSS tags are used to view the style, the console displays various output information of JS in the Web page, including error messages, user logs, etc. open the Script tab, which is what we want.

I select a control with a yellow rectangle in the diagram, a drop-down list on the left to select a file, and a button on the right to start debugging. When you click Start Debugging, the debugger will maximize the window, we found in the selected files need to debug location, click on the left sidebar to add breakpoints to debug.

When a program runs to our breakpoint, it can be debugged.

Here, we can use the shortcut keys to operate, the commonly used shortcut keys are as follows:

F9: Add/Remove Breakpoints

F10: Step over, that is, skip the method, expression, etc. in the statement

F11: Sentence-by-statement debugging, that is, single-step debugging, will jump into the method, the expression, the statement-by-track debugging

In the process of execution, if we want to execute the immediate code, we 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 to the right of the Run button to open the multiline mode. I'm not going to be a movie anymore.

This method of debugging directly in the browser also applies to Google Chrome and Firefox firedebug, except that there are some differences on the CE, the function of the subject is the same.

Press F12 to enter the developer tool to view the source code, style, and JS.

Click the Scripts button, you can open the Debugging window, which contains the Web page script file source code, click on the left side of the button to open the selection of the File window. There are debugging tool buttons on the right, but I don't like the plain English interface, so most of the debugging is done under IE. and will go to vs in IE.

I'll show you how to debug our JS code in vs.

debugging with the Debugger keyword

This method is very simple, we just need to add the Debugger keyword in place of debugging, and then when the browser runs to this keyword, we will be prompted whether to open the debugging, we choose Yes. This kind of debugging can choose Debugging Tools, is the new open vs or in the existing VS debugging, can choose, personal preferred the debugging method.

When we run this program, we will pop up the debug prompt window:

If your browser does not pop up this window, you need to do a simple setup to turn on Internet options:

Uncheck the two items in the Red box to select it.

You can use the Debugger keyword to debug it later, and in such a setting, we can catch an unexpected error and debug the trace.

Well, this article is introduced here, there is no understanding of the place please communicate with me. Debugging is a practical process, only the number of times used to master the methods and techniques.

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

June 14, 2013

• debugging JavaScript in IE
• debugging JavaScript in Visual Studio
• Debug JavaScript in Google Chrome

If you think this article is helpful, don't forget to support it!

How to debug JavaScript code