Diagnosis and repair of JS errors and JS errors

Diagnosis and repair of JS errors and JS errors
Front-end development whqet, csdn, Wang haiqing, whqet, front-end development expert

Original article: JavaScript Errors and How to Fix Them

Translation: front-end development of whqet. The free translation is the main one. If not, please correct me.

About the author: Jani Hartikainen, with more than a decade of Web application development experience, used for nokia and the mysterious startups. (A startup incubator) in addition to programming and playing games, he often writes JS and high-quality code on his site.

For the translator, Javascript debugging is still a nightmare for most people. Do you have any tips? Let's take a look at what foreigners say ......

Certificate ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

After the gorgeous separation line, let's get down to the truth!

Certificate ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Javascript is indeed a nightmare of the debugger. It is difficult to understand errors and the given row number is often useless. Is there a list of Common Errors for diagnosis and repair? Please wait!

The following is my summary of the JS strange error list. In view of the different prompts for the same error in different browsers, we provide some different examples.

How to read errors

First, let's take a brief look at the structure of the error prompt so that we can better understand the error and better cope with the list of unlisted errors in the future.

A typical error message looks like this,

Uncaught TypeError: undefined is not a function

1.Uncaught TypeError: This part is of little use. ca says that an error not captured by a catch statement has occurred. The error type is TypeError (Type Error ).

2.Undefined is not a function: This is the error message section, which must be understood literally (literally). For example, in this example, it literally means that the Code tries to use an undefined type as a function.

Other webkit kernel browsers, such as Safari, provide error messages in similar formats as Chrome. Firefox is similar, but does not include the first part. The latest version of IE also provides more concise error prompts, but (we know for IE), concise does not necessarily mean better.

Now let's take a look at the real errors.

Uncaught TypeError: undefined is not a function

Related errors: number is not a function, object is not a function, string is not a function, Unhandled Error: 'foo' is not a function, Function Expected

Error generation: You want to call a function, but this value is not a function.

var foo = undefined;foo()

Most of the time, the function name is incorrect. This error is generated because the default value of the non-existent property of the object is undefined.

Var x = document. getElementByID ('foo'); // the spelling of the getElementById method is incorrect.

Other similar errors: number is not a function. errors are generated when you try to use a number as a function.

Error fix: Make sure the function name is correct. In this error, the error line number can be correctly indicated.

Uncaught ReferenceError: Invalid left-hand side in assignment

Related error: Uncaught exception: ReferenceError: Cannot assign to 'functioncall ()',

Uncaught exception: ReferenceError: Cannot assign to 'eas'

Error generation: an error occurs when you try to assign a value to XX, but the assignment fails.

This often happens in the if statement. In the following example, the developer accidentally writes = As =, and the left side of the equal sign cannot be assigned a value, which leads to an error.

if(doSomething() = 'somevalue')

Error fix: Make sure that no value is assigned to the function or this keyword.

Uncaught TypeError: Converting circular structure to JSON

Related error: Uncaught TypeError: Converting circular structure to JSON,

TypeError: cyclic object value, Circular reference in value argument not supported

Error generation: A circular reference is generated, and JSON conversion (JSON. stringify), as shown in the following code, a and B are referenced each other, so they cannot be converted to JSON.

var a = { };var b = { a: a };a.b = b;JSON.stringify(a);

Error fix: removes the circular references from any objects to be converted to JSON.

Unexpected token;

Related error: Expected ),

Missing) after argument list,

Unexpected token]

Error generation: What does the JS compiler need, but it does not exist in the code. It is usually forgotten),],},;, and so on.

Bug fix: Sometimes the compiler cannot correctly point out the wrong line number, which is more difficult to fix.

An error with [] {} () ---- mainly because there is no normal match, the error row number is often incorrect.

Unexpected/---- errors related to regular expressions. Incorrect row numbers are often correct.

Unexpected; ---- A semicolon is often added, for example, in an object, numeric literal value, function call parameter, and so on. The error row number is correct.

Uncaught SyntaxError: Unexpected token ILLEGAL

Related error: Unterminated String Literal,

Invalid Line Terminator

Error generation: the string lacks closed quotation marks.

Bug fix: make sure all strings use correct quotation marks.

Uncaught TypeError: Cannot read property 'foo' of null, Uncaught TypeError: Cannot read property 'foo' of undefined

Related error: TypeError: someVal is null,

Unable to get property 'foo' of undefined or null reference

Cannot set property 'foo' of null,

Cannot set property 'foo' of undefined

Error generation: an error occurs when null or undefined is used as an object to read attributes, as shown in the following code.

var someVal = null;console.log(someVal.foo);

Bug fix: It is generally a spelling mistake. Check the spelling of the variable around the wrong row number to ensure it is correct.

Uncaught RangeError: Maximum call stack size exceeded

Related error: Uncaught exception: RangeError: Maximum recursion depth exceeded,

Too much recursion,

Stack overflow

Error generation: the infinite loop call function caused by a program logic bug, and the infinite recursion call function.

Bug fix: Check the loop part to clear the bug that causes infinite loops.

Uncaught URIError: URI malformed

Related error: URIError: malformed URI sequence

Error generation: caused by the wrong URL resolution request

Error fix: Find the error line number and modify the URL request.

XMLHttpRequest cannot load http: // some/url/. No 'access-Control-Allow-origin' header is present on the requested resource

Related error: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http: // some/url/

Error cause: the url is incorrect when XMLHttpRequest is used.

Error fix: Make sure the URL is correct and follow the same-origin policy (same-origin policy). The best solution is to locate the URL in the error prompt and correct the error.

InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable

Related error: InvalidStateError,

DOMException code 11

Error generation: When a function cannot be called, a function is called. When XMLHttpRequest is used, an error is triggered when the function is not ready.

var xhr = new XMLHttpRequest();xhr.setRequestHeader('Some-Header', 'val');

The above code will report an error. The setRequestHeader function can be called only after xhr. open.

Error fix: Find the prompted error line to ensure that the code runs at the correct time, or add the necessary methods (such as xhr. open in the above Code) before modifying the code ).

Summary

Javascript has the weakest error message, except for the notorious phpExpected t_paamayim_nekudow.im. If we are familiar with these errors, the debugging efficiency will be greatly improved.

What are the most tangled mistakes you encounter? Please comment.

Additional reading

Javascript debugging [slightly] beyond console. log

Google Chrome simple JS debugging tutorial

JavaScript Debug: A simple wrapper for console. log

----------------------------------------------------------

Front-end development whqet, pay attention to web Front-end development, share related resources, welcome to likes, welcome to shoot bricks.

Bytes ---------------------------------------------------------------------------------------------------------