Chapter 14 Error Handling and Debugging
1. Turn on browser error reporting
1.1 Internet Explorer
□Toos → Internet Option → Advanced → Display a notification about every script error
1.2 Firefox
□Tools → Error Console (Firebug)
1.3 Safari
□Edit → Preferences → Advanced → Show develop menu in menubar/Develop → Show Error Console
1.4 Opera
□Tools → Advanced → Error Console
1.5 Chrome
□Control this page → Developer → JavaScript console
2. Error handling
2.1 Try-catch statement
try{
//Code that may cause errors
}catch(error){
//How to handle when an error occurs
}
□When an error occurs, catch will recover an object containing error information. There is a message attribute that is compatible with all browsers.
2.1.1 finally clause
The try-catch clause is optional. Once the finally clause is used, its code will be executed anyway.
2.1.2 Error type
□Error: base type. The main purpose is for developers to throw custom errors.
□EvalError: Thrown when an exception occurs using the eval() function.
□RangeError: Triggered when the value exceeds the corresponding range.
□ReferenceError: When the object cannot be found
□SyntaxError: Pass the JavaScript string with syntax errors into the eval() function.
□TypeError: When an unexpected type is stored in a variable, or when a non-existent method is accessed.
□URIError: When encodeURI() or decodeURI() is used and the URI format is incorrect.
Perform error handling according to different error types:
try{
soemFunction();
}catch(error){
if(error instanceof TypeError){
//processing Type error
}else if(error instanceof ReferenceError){
//Handling reference errors
}else{
//Handling other type errors
}
}
2.1. 3 Make good use of try-catch
□Use try-catch statement, the browser will think that the error has been handled.
□Use the try-catch statement, which is most suitable for catching errors that we cannot control.
□If you clearly know that an error occurs in your code, you should not use try-catch but fix the error.
2.2 Throwing errors
①There is a throw operator paired with the try-catch statement. Code execution stops immediately when the throw operator is encountered. Code execution will continue only if a try-catch statement captures the thrown value.
②throw new Error("something bad happened."); Or use the prototype chain to create a custom error type by inheriting Error.
2.2.1 Timing of throwing errors
2.2.2 Throwing errors and using try-catch
2.2.3 Error events
①Any error that is not handled by try-catch will Trigger the error event of the window object.
②In any browser, the onerror event handler will not create an event object. But it accepts 3 parameters: error message, URL where the error is located, and line number. (Only error messages are useful)
③ Specify the onerror event handler, which must use DOM0 level technology.
window.onerror = function(message,url,line){
alert(message);
return false; //By returning false, this function actually acts as a try-catch statement for the entire document. Catch all runtime errors handled without code.
};
④Images also support error events. As long as the URL in the src attribute of the image cannot return a recognized image format, the error event will be triggered. The error event at this time follows the DOM format and returns an event object targeting the image.
3. Error handling strategy
3.1 Common error types
□Type conversion error
□Data type error
□Communication error
3.1.1 Type conversion error
Type conversion The error occurs when using an operator or other language construct that may automatically convert a value to a data type. Type conversion errors most commonly occur when using the equality (==) and inequality (!==) operators, or when using non-boolean values in flow control statements such as if, for, and while.
3.1.2 Data type errors
Data type errors are most likely to occur when unexpected values are passed to functions.
3.1.3 Communication error
①The URL format is incorrect or there is a problem with the data sent. For query strings, the encodeURIComponent() method must be used.
② Communication errors may also occur when the data responded by the server is incorrect.
3.2 Distinguish between fatal errors and non-fatal errors
① Non-fatal errors
□ Does not affect the user’s main task
□ Only affects part of the page
□ Can be recovered
□ Repeat the same operation Errors can be eliminated
② Fatal error
□ The application cannot run at all
□ The error obviously affects the user's main operation
□ Will cause other associated errors
3.3 Record the error to the server: ( (omitted)
4. Debugging technology
4.1 Logging messages to the console
①For IE8, Firefox, Chrome and Safari, messages can be written to the JavaScript console through the console object. The object has the following methods:
□error(message): Log error messages to the console
□info(message): Log information messages to the console
□log(message): Log general messages To the console
□warn(message): Record the warning message to the console
② Another solution is to use LiveConnect, which is to run Java code in JavaScript.
③Uniform interface for writing messages to the JavaScript console:
function log(message){
if(typeof console == "object"){
console.log(message);
}else if(typeof opera == "object"){
opera.postError(message);
}else if(typeof java == "object" && typeof java.lang == "object"){
java.lang.System.out.println(message);
}
}
4.2 Record the message to the current page
4.3 Throw an error
①For large applications That said, custom errors are usually thrown using the assert() function. This function accepts two parameters, one is the condition that evaluates to true, and the other is the error to be thrown when the condition is false.
function assert(condition, message){
if(!condition){
throw new Error(message);
}
}
②Application:
function divide( num1,num2){
assert(typeof num1 == "number"&&typeof num2== "number","divide():Both arguments must be numbers.");
return num1/num2;
}
5. Common IE errors
□ Operation terminated
□ Invalid character
□ Member not found
□ Unknown runtime error
□ Syntax error
□ The system cannot be found Specify resources