For many years, IE has been the hardest browser to debug JavaScript errors. The error messages given by IE are generally short and vague. And there is little context information, sometimes not even at all. The following sections will discuss some JavaScript errors that are difficult to debug in IE.
Operation ends
In versions before IE8, there was an error that was the most confusing, annoying, and difficult to debug compared to other browsers: operation aborted. An operation termination error occurs when modifying a page that has not yet been loaded. When an error occurs, a modal dialog box will appear, telling you that "Operation terminates." Click the OK button to uninstall the entire page and then display a blank screen; debugging is very difficult at this time. The following example will cause an operation termination error.
<body>
<div>
<script>
(("div"));
</script>
</div>
</body>
The problem in this example is that the JavaScript code needs to be modified when the page has not been loaded, and the script element is not a direct child of the body element. To be precise, when the script node is included in an element, and the JavaScript code uses appendChi1d, innerHTML, or other DOM methods to modify the parent or ancestor element of the element, an operation termination error will occur (because only the already loaded elements can be modified).
To avoid this problem, you can wait until the target element is loaded before operating it, or use other operation methods. For example, adding a cover layer that is absolutely positioned on the page is a very common operation. Usually, developers use the appendChild method to add this element, but it is also easy to use the insertBefore() method. Therefore, just modify a line of code in the previous example to avoid operation termination errors.
<body>
<div>
<script>
(("div"), );
</script>
</div>
</body>
In this example, the new div element is added to the beginning part instead of the end. Because all the information required to do this is known at the time of the script running, this does not throw an error.
In addition to changing the method, you can also move the script element from the containing element and directly serve as a child element of the body. For example:
<body>
<div>
</div>
<script>
(("div"));
</script>
</body>
This time, there will be no errors, because the script changes its direct parent element, not its indirect ancestor element.
In the same case, IE8 no longer throws an operation termination error, but instead throws a regular JavaScript error with the following error message:
HTML Parsing Error: unable to modify the parent Container element before the child element is closed (KB927917).
However, although the browser throws different errors, the solution is still the same.
Invalid characters
According to the syntax, a JavaScript file must contain only specific characters. When an invalid character exists in a JavaScript file, IE will throw an invalid character error. The so-called invalid characters are characters that are not defined in JavaScript syntax. For example, there is a character that looks like a minus sign but is represented by the Unicode value 8211 ( \u2013 ) that cannot be used as a regular minus sign (ASCII encoded as 45 ), because the character is not defined in JavaScript syntax. This character is usually automatically inserted in Word documents. If your code is copied from a Word document into a text editor and then runs in IE, you may encounter invalid character errors. Other browsers react to invalid characters similar to IE. Firefox will throw an illegal character (iIlegal character) error, Safari will report a syntax error, and Opera will report a ReferenceError (reference error). Because it interprets invalid characters as undefined identifiers.
Member not found
All DOM objects in IE are implemented as COM objects, not native JavaScript objects. This can lead to some very strange behavior related to garbage collection. The Member not found error in IE is directly caused by the garbage collection routine cooperation error.
Specifically, if the object is assigned a value after it is destroyed, it will result in an error of not finding a member. And the one that causes this error must be the COM object. The most common situation where this error occurs is when using the event object. The event object in IE is a property of window. This object is created when an event occurs and is destroyed after the last event handler is executed. Assuming that you use an event object in a closure and the closure will not be executed immediately, then when you call it in the future and assign a value to the event's attribute, it will cause a member error, as shown in the following example.
= function () {
var event = ;
setTimeout(function (){
= false; //Member not found error }, 1000);
};
In this code, we assign a click event handler to the document. In the event handler, it is saved in the event variable. Then, the closure in the successor setTimeout() contains the event variable. When the click event handler is executed, the event object will be destroyed, so the members of the reference object in the closure will become non-existent. In other words, since the COM object cannot be assigned a value to its member after it is destroyed, assigning a returnValue in the closure will result in a member not found error.
Unknown runtime error
When HTML is specified using innerHTML or outerHTML, an unknown runtime error occurs: one is when inserting a block element into an element in the row, and the other is when accessing any attributes of any part of the table (table, tbody, etc.). For example, from a technical point of view, the span tag cannot contain block-level elements like divs, so the following code will cause unknown runtime errors:
= "div Hi /div"; //Here, span contains the div element
When you encounter situations where block-level elements are inserted into inappropriate positions, other browsers will try to correct and hide the error, and IE is more serious at this point.
Syntax error
Generally, as long as IE reports a syntax error (syncax error), the cause of the error can be found very quickly. At this time, the reason may be that there is a missing semicolon in the code, or the curly braces are not corresponding to each other. However, there is another situation where the reason is not very obvious and needs special attention.
If you reference an external JavaScript file that does not return JavaScript code in the end, IE will also throw a syntax error. For example, the src attribute of the script element points to an HTML file, which will cause syntax errors. When reporting a syntax error, it is usually said that the error is located at the first character on the first line of the script. Opera and Safari also report syntax errors, but they will give information about the external file that causes the problem; IE will not give this information, so we need to repeatedly check the referenced external JavaScript file ourselves. But Firefox ignores parsing errors in non-JavaScript files that are embedded in documents as JavaScript content.
This error is more likely to occur when server-side components generate JavaScript dynamically. Many server-side languages insert HTML code into the output when a running error occurs, and this kind of output containing HTML can easily violate JavaScript syntax. If you are having trouble tracking down syntax errors, we recommend that you double-check the referenced external files to make sure that they do not contain HTML that the server inserted into it due to the error.
The system cannot find the specified resource
The system cannot locate the resource specified, which may be considered the most valuable error message given by IE. This error occurs when using JavaScript to request a resource URL, and the length of the URL exceeds the IE limit that the URL cannot exceed 2083 characters. IE not only limits the length of URLs used in JavaScript, but also limits the length of URLs used by users in the browser itself (other browsers do not have such strict restrictions on URLs). IE also has a limit on URL paths that cannot exceed 2048 characters. The following code will cause an error.
function createLongUrl(url){
var s = "?";
for (var i=0, len= 2500; i < len; i++){
s += "a" ;
}
return url + s;
}
var x = new XMLHttpRequest( );
("get", createLongUrl("/"), true);
(null);
In this example, the XMLHttpRequest object attempts to send a request to a URL that exceeds the maximum length limit. An error occurs when the open() method is called. The way to avoid this problem is nothing more than shortening the length of the query string by giving the query character parameters a shorter name or reducing unnecessary data. In addition, the request method can be changed to POST and data can be sent through the request body instead of the query string.