debugging JavaScript code (browser F12 and vs debugger keywords) _javascript tips

At present, the commonly used browser ie, Chrome, Firefox have the corresponding script debugging function. As our. NET camp, learn how to debug JS in IE is enough, in the grasp of IE debugging methods, 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 the IE built-in developer development tools, to facilitate the development of HTML, CSS, JavaScript and other Web resources for tracking and debugging use.

If you are not docked at the bottom of the page, you can click on the button in the upper-right corner menu to complete.

We see a few tabs in the tool window: HTML, CSS, console, script, Profiler, and network, click on each tab to perform the corresponding task.

In the HTML tag window, the buttons in the toolbar perform the following illustration:

CSS tags are used to view the style, the console displays the 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 the file, and a button on the right to start debugging. When the click to start debugging, the debugger will maximize the window, we found in the selected files need to debug the 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 most common shortcut keys are as follows :

F9: Adding/removing breakpoints

F10: Step by step, that is, skip the method in the statement, expressions, etc.

F11: Debug-by-sentence, that is, single step debugging, will jump into the method, expression, tracking and debugging by the statement

In the process of execution, if we want to execute the real-time code, we need to enter the code in the right-hand pane, press ENTER.

If you want to execute multiple lines of code, click the double arrow to the right of the Run button, and the multiline mode opens. I'm not going to cut the picture anymore.

This method of debugging directly in the browser also applies to Google browser Chrome and Firefox firedebug, but only slightly different on the twig, the main function 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 this debugging window, which contains the Web page script file source code, click on the left button to open the selection File side window. There are debugging tools on the right button, but I do not like these pure English interface, so most of the debugging is still under IE. and will go to vs in IE.

Below I will explain how to debug our JS code in vs.

debugging with the Debugger keyword

This method is very simple, we only need to debug the place to join the Debugger keyword, and then when the browser runs to this keyword, will be prompted whether to open debugging, we choose to be on it. This type of debugging allows you to choose between Debugging tools, new open vs or debug in existing VS, which you can choose from, and individuals prefer to debug in this way.

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

If your browser does not eject this window, you need to do a simple setup and open the Internet option:

You can cancel the two items in the red box.

After setting up, you can use the debugger keyword for debugging; After this setting, we can also catch an unexpected error and do the tracking debugging.

Well, this article is introduced here, there is no understanding of the place please and I exchange. Debugging is a practice process, only the use of more times, to master the methods and skills.