Diagnosis and repair of weird JS errors

Front-end development whqet,csdn, Wang Haiqing, Whqet, front-end development experts

Original: JavaScript Errors and how to Fix them

Translation: Front-end development Whqet, free translation mainly, improper place please correct me.

Author profile: Jani Hartikainen, with more than ten years of experience in Web application development, once for Nokia and low-key mysterious startups. In addition to programming and playing games, he often writes JS and high-quality code on his site.

Translator's words, JavaScript debugging is still most people's nightmare, what is the coup, look at the foreigner Daniel, see how the foreigner Daniel said ...

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

After the gorgeous dividing line, come to the end!

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

JavaScript is really the debugger's nightmare, it is difficult to understand the error, the line number given is also often useless, then there is a common error diagnosis and repair list it? Come on, keep looking!

Here is my summary of the JS strange Error List, in view of different browsers the same error error prompts, we gave a few different examples.

How to read errors

First, let's briefly look at the structure of the error message so that we can better understand the error so that it will be better to deal with the list of errors that are not listed.

A typical error message looks like this,

Uncaught typeerror:undefined is not a function

1.uncaught TypeError: This part is not very useful, the CA says there was a catch statement that did not catch the error, the error type is TypeError (type error).

2.undefined is not a function: This is the error hint part, we must literally understand (literal meaning understanding), for example it literally means that the code is trying to use a undefined type as a function.

Other WebKit kernel browsers, such as Safari, provide error hints similar to those in Chrome, but don't include the first part of Firefox. The latest version of IE also provides more concise error hints, but (for IE, we know), brevity does not necessarily mean better.

Now let's look at the real mistake.

Uncaught typeerror:undefined is not a function

Related error: Number is not a function, object was not a function, string was not a function, unhandled error: ' foo ' was not a functi On, Function expected

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

var foo = Undefined;foo ()

Many times it is because the function name is wrong and produces an error. This error occurs because the default value of the object's non-existent property is undefined.

var x = document.getElementById (' foo ');   getElementById Method Spelling Error

Other similar errors are not a function, which produces an error when you try to use a number as a function.

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

Uncaught referenceerror:invalid left-hand side in assignment

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

Uncaught Exception:ReferenceError:Cannot assign to ' this '

Error: You are trying to assign a value to XXX, but an error occurs when the assignment is unsuccessful.

This situation often occurs in the IF statement, such as the following case, the developer accidentally wrote = =, and the left side of the equals sign cannot be assigned, resulting in an error.

if (dosomething () = ' somevalue ')

Bug fix: Make sure that you do not assign a value to the function or the 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: An error occurred when a ring reference was generated and then a JSON conversion (json.stringify), as shown in the following code, where a and B are mutually referenced and therefore cannot be converted to JSON.

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

Bug fix: Removes any ring references in objects that you want to convert to JSON.

unexpected token;

Related error: expected),

Missing) after argument list,

Unexpected token]

Error generation: JS compiler needs something, but not in the code. Usually forget the match),],}, etc...

Bug fix: The compiler sometimes does not correctly indicate the error line number and is more difficult to fix.

The error with [] {} ()----is mainly caused by the absence of a normal match, and the wrong line number is often incorrect.

unexpected/----Regular expression-related errors, and the error line numbers are often correct.

unexpected; ----is often a semicolon, such as in objects, numeric literals, function call parameters, and so on, the wrong line number is correct.

Uncaught syntaxerror:unexpected Token illegal

Related error: Unterminated String Literal,

Invalid Line Terminator

Error: The string is missing closing quotation marks.

Bug fix: Make sure that all strings use the 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 is generated when attempting to read a null or undefined as an object, as shown in the following code.

var someval = Null;console.log (Someval.foo);

Bug fix: Usually misspelled, check the spelling of the variable surrounding the error line number to make sure 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: Infinite loop call function caused by program logic bug, infinite recursive call function.

Bug fix: Check the loop section to clear the bug that caused the infinite loop.

Uncaught Urierror:uri Malformed

Related error: urierror:malformed URI sequence

Error generation: Wrong URL resolution request is caused

Bug fix: Find the wrong line number and fix 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 generation: Incorrect URL when using XMLHttpRequest.

Bug fix: Make sure the URL is correct, and ensure that you follow Same-origin policy (same-origin policies), the best solution is to find the URL in the error prompt and fix the error.

Invalidstateerror:an attempt was made to use a object that's not, or is no longer, usable

Related error: Invalidstateerror,

Domexception Code 11

Error Generation: A function is called when a function cannot be called. Often occurs when using XMLHttpRequest, when the function is not ready to attempt to invoke a trigger error.

var xhr = new XMLHttpRequest (); Xhr.setrequestheader (' Some-header ', ' Val ');

The above code will report an error, and the setRequestHeader function can only be called after Xhr.open.

Bug fix: Find the wrong line of the prompt, make sure the code is running at the right time, or add the necessary methods (such as the xhr.open of the above code) before changing the code.

Summarize

JavaScript has the most feeble error hint, except for the infamous phpexpected T_paamayim_nekudotayim. If we are very familiar with these errors, we will be able to improve the efficiency of the commissioning.

The most tangled mistake you encounter is what to welcome by commenting on the groove.

Extended Reading

Javascript debugging [slightly] beyond Console.log

Google Chrome Debugging JS Simple tutorial

JavaScript debug:a Simple wrapper for Console.log

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

Front-end development Whqet, focus on web front-end development, share related resources, welcome to praise, welcome to shoot bricks.

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

Diagnosis and repair of weird JS errors