Shulou(Shulou.com)06/03 Report--

What is the common error resolution in JavaScript development? in view of this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and easy way.

As a front-end worker, of course, the more experience you have, the easier it is to troubleshoot errors. I know all the reasons, but I still don't know how to start when I encounter problems. Common errors troubleshooting in Chrome DevTools

The Console of the Chrome developer tool is quite easy to use, and the most commonly used is to show the results of variables or operations through console.log, and everyone will be happy if they meet expectations.

But once there is a scarlet letter to gloat and tell us, "you made a mistake!", this is undoubtedly a setback for us, when we do not know how to solve the error, we can only repeatedly check our code to see if there is anything strange. Sometimes even if parked in the wrong place often do not know what it means, it will spend a lot of time.

This article introduces the common error feedback and troubleshooting techniques in Chrome developer tools, so that you can no longer feel frustrated by the scarlet letter on the screen, but also learn how to quickly search for error codes.

Note: JavaScript is a synchronous programming language, if an error occurs, it will cause the following code to fail to run, and when the scarlet letter is not resolved, it may cause the following line of code error or can not continue to run.

Error type: SyntaxError

SyntaxError type errors are usually grammatical errors. When you encounter these errors, it is recommended to troubleshoot through the IDE you use, such as VSCode can directly jump out of this type of error prompt.

As shown in the following figure, VSCode uses red wavy lines to indicate that there is an error in the family object. When an error occurs, it is advised not to check only the current line. The error may exist in the context (an error that may span multiple lines). In this example, a comma is missing after "Xiaoming".

Key points of troubleshooting: use mainstream IDE such as "VSCode" for troubleshooting

Uncaught SyntaxError: Unexpected identifier

Var person = {name: 'Xiaoming' family: {name: 'Xiaoming'}}

Syntax parsing error because a comma is missing in the object structure, in addition to viewing it in VSCode, you can also switch to the Source page directly through Chrome Console to see the error line and check if there is a syntax error in the context of this line.

Uncaught SyntaxError: Unexpected end of input

Function fn () {console.log ('this is a function'); console.log (fn)

Syntax parsing error: unexpected end, lack of closing braces} in this example, keep the correct locking as much as possible when writing code, and it is easier to find errors after arranging the code neatly.

Uncaught SyntaxError: Unexpected token'}'

If (name) console.log ('execute function now')}

Syntax parsing error: unexpected symbol}. An extra} symbol at the end of the code causes the environment to run error. the troubleshooting method for this error is the same as above, arranging the code as neatly as possible and keeping the beginning and end symbols consistent.

In addition, a VSCode tool is recommended to add the corresponding color to your head and tail tags:

Https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

Example: pairs of {} in the code are displayed in the same color.

Uncaught SyntaxError: Identifier 'a'has already been declared

Let a; let a

Syntax parsing error: identifiers (in this case, variables) have been declared, and repetition of the same variable should be avoided. Repeated declaration of variables with let and const is prohibited in ES6, and can be excluded directly.

Error type: ReferenceError

Errors such as ReferenceError usually mean that a reference cannot be found, and when such an error occurs, it does not necessarily prompt an error in IDE (unless Linter is installed), so you will only see such errors during the run time of the code.

Key points of investigation:

Correct through the prompt of Chrome

Install ESLint in the JavaScript development environment

ReferenceError: an is not defined

ReferenceError: an is not defined

Reference error: because the variable an is not defined, there will be an undefined prompt when using this variable, as long as the variable is defined first.

There is another common situation where "package name + is not defined" appears when referencing an external package, which is usually the case that the external resource is not loaded correctly and should be ensured that the resource is introduced correctly.

The following example is caused by the incorrect import of jQuery.

Uncaught ReferenceError: $is not defined

Error type: TypeError

TypeError is a type error. Similarly, IDE does not warn you that there is an error. You will not see it until you execute it. This type of error is usually the following:

Trying to get the properties of undefined and null

Try calling a non-functional variable or expression (for example: 'text' ())

Key points of troubleshooting: confirm the current data type and structure of the variable before getting it

Uncaught TypeError: Cannot read property 'a'of undefined

Var a; console.log (a.a)

Note: the specific attributes of this variable cannot be found in the value of this variable. For example, no other attributes can be found on the values of undefined and null. If you cannot confirm whether the variable is undefined, you can change the code like this:

If (typeof a! = = 'undefined') {console.log (a.a);}

Uncaught TypeError: console.log (...) Is not a function

Console.log ('a') (function () {console.log ('execute function now')}) ()

Description: this code appears to be an error in executing the function immediately, but there is a console.log (.) Is not a function . This mistake is mainly due to the lack of a semicolon.

When you encounter this kind of error, just put a semicolon between the two.

Console.log ('a'); (function () {console.log ('execute function now')}) ()

Error type: RangeError

This is an error caused by creating an array that exceeds the length limit or executing a recursive function that cannot be exited, and you need to re-check the logic of the code to see if it consumes too many resources (memory or CPU resources).

Key points of troubleshooting: need to re-check the logic, if necessary, delete part of the code first, find out the wrong fragments and then debug.

Uncaught RangeError: Maximum call stack size exceeded

(function a () {a ();}) ()

Description: a function call stack will be generated during a function call, and an error will occur if the upper limit is exceeded in the process of recursion.

This kind of error is also common, but it is not easy to find the cause of the error, the main reason is that the limit of the environment is exceeded when recursive (it is also common when using the framework). If you encounter this error, it is recommended to rewrite the current way to call the function.

Summary

Keep calm when Chrome Console reports an error. It is very common to make errors in the coding process. One of the differences between the so-called boss and the novice is the experience of encountering errors. It doesn't matter if you don't know clearly when you encounter errors. This is the accumulation of experience. As long as you accumulate enough, you will be able to face the same problems naturally and easily.

This is the answer to the question about how to solve common mistakes in JavaScript development. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.