Home > Developer > Web Develop
Javascript debugging in IE browser and iejavascript debugging
In the previous blog post, I briefly learned about Dom objects. In this talk, I want to continue to learn Dom through code. However, during my blog writing, I often encounter errors in the code, the following describes how to debug javascript.
<Html>
The above is the main code for this study. Now we can go to the javascript debugging status to see it.
How can I access the debugging status of javascript? Different browsers have different implementations. For example, Firefox has its own firebug, and chrome has its own debugging.
Let's talk about the debugging of IE browser. After all, IE still occupies a large share in the current browser market.
If you want to debug code in IE, You Can breakpoint the code like java code.
The breakpoint method in Javascript is the debugger keyword. Add it where debugging is needed.DebuggerAnd then enable javascript debugging to enter the debugging mode.
Next, we will demonstrate the specific debugging of javascript.
First, modify the above Code to add a debugger line in var hrefs = document. getElementsByName ("clj;
<script><!--getElementsByName-->debugger;var hrefs = document.getElementsByName("clj");for (var i=0; i < hrefs.length; i++) {var aHref = hrefs[i];if (aHref.href.search("http://www.baidu.com") > -1) {alert(aHref.href);break;}}</script>
Then open the page
Next, press F12 to enter the developer mode.
In developer mode, click the tab on this page and click Start debugging to enter debugging mode.
After entering the debugging status, the row where the debugger is located has an arrow pointing to, meaning that the Debugging starts from here, just like the breakpoint in the java code.
Finally, press F5 to refresh the page and start debugging.
Debugging shortcuts
There are several shortcut keys for debugging.
F5 continue
F5 continue debugging and jump to the next debugger
Modify the code above.
<script><!--getElementsByName-->debugger;var hrefs = document.getElementsByName("clj");for (var i=0; i < hrefs.length; i++) {debugger;var aHref = hrefs[i];if (aHref.href.search("http://www.baidu.com") > -1) {alert(aHref.href);break;}}</script>
Start debugging: the code that just starts debugging, that is, the code before pressing f5.
After you press F5, the code is directly transferred from line 14 to line 17, that is, the place where the next debugger breakpoint is located, for example.
F11 Statement by statement
F11 Statement by statement, that is, every line of code goes through
Next, press the breakpoint above, F11, and continue debugging.
After pressing F11, we found that the breakpoint went down one line and went to 18 lines.
F11 is the function of reading and debugging code in a row.
F10 process by Process
The above shows a process by process, but when I debug it, I found that its role is the same as that of F11, and it is a line of read code. Here we can refer to the function of F11.
If a friend knows or understands other functions of F10, you can talk to me and learn it modestly.
Shift + F11 jump out
Shift + F11 shows the jump debugging, but during the operation, it is found that it only jumps to the next debugger breakpoint, that is, similar to F5, here refer to F5.
If a friend knows or understands the other functions of Shift + F11, you can talk to me and learn it modestly.
Breakpoint line code tracking
It seems that debugging keywords are not enough.
I still don't know how to go to every line of code and continue to look at the specific content of the variable. Don't worry. Next, let's look at what we can do when the breakpoint reaches every line.
Continue with the code at F11.
Select the variable aHref and right-click to view the menu
There are too many menu items that we will not read for the moment. We will focus on adding the monitoring (W) menu, because it allows us to see the specific variable content and the attributes and methods of the variable.
Is the view after you click Add monitoring.
Because this line of code has not passed and the variable has not been initialized, the variable value is undefined and the type is Undefined.
Press F10,
Value changed {...} Type to DispHTMLAnchorElement.
{...} Indicates that the variable is of the object type or set type.
Click the plus sign (+) in front of aHref to expand the aHref variable to see what is available.
The above is Events, which indicates which Events can be bound to the object.
The following is Methods, which indicates the Methods that can be operated on the object.
Then there is the available attribute information. In the attribute information, we can see the value of each specific attribute item and whether the value is the value we want, so that we can easily understand the code, debug the code.
AccessKey is an attribute with a null string.
All is a set property with a value {...}, Click it to view the specific attribute values of all.
Now, the method section is complete.
Breakpoint method without debugger
If we get code from someone else and cannot add another debugger breakpoint, what should we do? Find the page and add the breakpoint.
Remove the debugger in the above Code. After debugging is started, click var hrefs = document. getElementsByName ("clj ").
When a breakpoint occurs on the page, you can continue debugging according to the above method.
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
