Home > Developer > JavaScript
No matter how careful we write the code, it is impossible to completely avoid bugs in the program, which requires us to find errors in debugging and modify the code.
JavaScript is a flexible language, flexible syntax, and it explains the nature of execution, making JavaScript errors more difficult to detect, and when we're running to find bugs, we're going to debug JavaScript in the browser. Currently the largest number of users on the market browser IE naturally also has the function of debugging JavaScript, let us take a look at it!
IE Developer ToolsIE is the host of our JavaScript programs and is responsible for interpreting and executing JavaScript code.
The new version of IE has been integrated with developer tools that you can find in the Tools menu. IE9 and above versions, such as:
Alternatively, you can use the shortcut key F12 to open the developer tools. Open the tool window as follows:
This tool window is attached to the IE window and you can minimize, open a separate window or close it by using the three buttons on the right.
Here is a special note, in the IE6 is not the tool, you need to download IE Developer Toolbar, and then to use, the future version is already integrated, if you need to debug the code, click F12 Call out the debug window.
debugging JavaScript codeTo demonstrate the debugging capabilities of JavaScript, I made a page like this, and the code is simple:
<!DOCTYPE HTML><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"/> <title>Debug Page</title> <Scripttype= "Text/javascript"> functionBtn_click () {vara= 1; varb= "2"; varC=a+b; alert (c); } </Script></Head><Body> <inputtype= "button"value= "OK"onclick= "Btn_click ()" /></Body></HTML>
When we click on the "OK" button in the page, the Btn_click () method is executed. This time, the page pops up the value of C:
The value we want to get is 3, but the popup here is 12, which is obviously not the result we want (see where the error is?). The value defined by B is the string "2", and when a is added to a, a is converted to a string type by default, and A+b is added as two strings, with the result of course "12".
Assuming we don't know why, we need to debug this little piece of code now. Press the F12 key to open the developer tools and click on the "Scripts" tab:
How do we add a breakpoint to the Btn_click () method? You can use the mouse to click the beginning of a line of code to add a breakpoint, you can also put the cursor to a line, press F9 to add a breakpoint.
After adding a breakpoint, click on the "Start Debugging" button, this time the Developer tool window will be out of IE, open a pair of debugging window, and enter the debug mode:
We click on the "OK" button, and this time the developer tool will be able to capture the breakpoint:
This line of our break has become yellow, indicating that the code runs to this line, and if you want to execute our code, press F10 or F11:
After we press F10, the code executes to the next line, when a has been defined and assigned, we can look at the value of a: Put the mouse on the variable A, you will see a current value:
This is only a temporary view of the method, if you want to monitor the variable value changes, always move the mouse is inconvenient, we can select the variable a, click on the variable a right mouse button, select "Add Watch", such as:
Monitoring of variable A has been added to the Watch window on the right side of this time:
The name, value, and type of the scalar are listed in the Watch table.
In addition to this method of adding monitoring, we can also directly under the Watch table, there is a line "Click to add ..." Text, we can click to add any of us want to monitor the object. If we want to monitor the document object, enter the document inside and press ENTER:
This adds to the monitoring of the Document object, because this object contains a lot of properties and methods, so there is a plus icon, click on this icon, you can expand the document properties and methods to facilitate our monitoring of the object.
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
Executing javascript statementsIn the process of debugging, we are not able to edit the JavaScript code, if we need to run a certain line of JavaScript code, we can enter the code in the console, and execute:
We do a = 2; This line of statement, and then go to the Watch window, this time a value has become 2:
Another way to change the value of a variable is to edit it directly in the value of the Watch window: Double-click the cell that corresponds to the value of the A variable to edit it:
If you want to end the debugging, click the "Stop Debugging" button to do it.
This article describes how to debug JavaScript code in IE, and in the following sections, I'll show you how to debug JavaScript in Visual Studio and how to debug JavaScript in Chrome, so stay tuned!
debugging JavaScript in IE
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
