Front-end error debugging

foreword

This article mainly introduces common errors and error positioning in the front-end development process, as well as common debugging methods, which is the author's experience.

1. HTTP error status code

Soul torture: How long did it take you to find out the cause of 404?

4xx errors

1. 
   Everyone knows that 404 is an incorrect link, but there are at least four reasons for 404: (
   1) Compare the link with the interface document, either the front end is wrongly written, or the interface document is wrongly written, basically it is the capitalization of words, There are two aspects of space
   (2), the backend is not deployed
   (3), nginx is not configured with a proxy or the front-end is not configured locally
   (4), post and get are used incorrectly, using the get method to call a post request may also report 405, see server configuration
2. 401———Not logged in
3. 403———The account has no permission
4. 400
   There are too many types of parameter errors, the following are the most common
   (1), parameter omission
   (2), field name typo
   (3), parameter value is wrong, such as the date format requires a timestamp but a string is given
   (4), The interface document is wrong
   (5), Chinese decoding and encoding
   will not cause errors
   (1), a few more parameters that are not connected to the back end are passed
   (2), the number requested by get is not divided into strings or numbers
5. 405———The method is not allowed, which is common in post and get errors
6. 415———The header is wrong, the most common is that the contentType is wrong

5xx errors

1. 500——Server exception
   (1) If the interface is reliable, the server is abnormal
   (2) When the interface is unreliable, it may be the front-end parameter error
   No matter which one is, it depends on the server log
2. 502——Gateway error, it may be that the server is not running or it may be timed out
3. 504———The server timed out, the server network is disconnected or the timeout setting is too short

200 but didn't see the return

(1) The received file may not be displayed (normally received a bunch of garbled characters)
(2) The server hangs up and times out
(3) The browser cannot receive too much content, you can try it with postman

Two, js common errors

js four error types

1. The value set by RangeError
   exceeds the corresponding range. Basically, it is a parameter error using the built-in method of js. When the bug cannot be found, find the built-in method of js used by the current page.
2. ReferenceError
   reference type error, basically undefined
3. SyntaxError
   is grammatical error. In simple cases, you can directly read the error message to know the answer. When it is difficult, a SyntaxError will be reported. When there is no prompt, you can quickly locate it through the syntax check of the editor.
4. TypeError
   type error, basically undefined

js common errors

5. Uncaught TypeError: Cannot read property '' of undefined
   The object does not exist, it is better to troubleshoot the error report, just check the corresponding code snippet.
   It is more common that when the backend returns a null value, the frontend does not check the return value type.
   There are also undefined errors:
   (1), TypeError: 'undefined' is not an object ---- can only be seen on the old version of safari, and now I don't know if there is any
   (2), TypeError: Cannot read property 'length' of undefined ----The target is not an array or string
   (3), Uncaught TypeError: Cannot set property … of undefined
   (4), ReferenceError: … is not defined ----- undefined or not found within the scope
   (5), TypeError : 'null' is not an object----the error reported by the old version of Safari is actually undefined
6. (unknown): Script error
   is common in cross-domain, the server opens a whitelist or configures a proxy
7. TypeError: ... is not a function
   calls an undefined function, which is often caused by careless writing of higher-order functions
8. Uncaught RangeError: Maximum call stack
   overflow
   (1), recursive infinite loop
   (2), JSON.stringify, JSON.parse input parameters are too large, resulting in too many cycles
9. Uncaught exception: ReferenceError: Cannot assign to 'this'
   Assign a value to a variable that cannot be assigned, such as assigning a value to the return value of a function or the this keyword.
10. Uncaught TypeError: Converting circular structure toJSON
    JSON.stringify 入参错误
11. Unexpected token <,; and Unexpected identifier
    are grammatically incorrect. Some browser versions will prompt if a comma is missing, and will also directly prompt Unexpected identifier. If you don’t prompt which line it is, it will be difficult to find. You can try using the syntax check of the editor
12. Uncaught SyntaxError: Identifier '' has already been declared
    repeatedly declares the variable declared by let
13. Uncaught TypeError: Assignment to constant variable.
    Modify the variable declared by const
14. Errors thrown by plug-ins such as vue and react,
    just understand English, and check online if you don’t understand

Three, js debugging method

Several browser debugging methods

1. alert is
   an antique-level debugging method, which is now used for breakpoint debugging on the mobile phone, but it may be prohibited by the app. (Tucao: There are still some front-end knowledge that can be used by old java that stays in ancient times)
2. 
   Everyone knows console.log() and debugger , so I won’t say much
3. Dom breakpoint debugging
   In development, we occasionally encounter problems like this: a DOM element on the page has been changed, but we don't know which script changed it. It is occasionally
   used in the jquery era, using vue and react basically You can't see it online, because you can only see their source code when debugging. Outdated, simply mention it.
   How to use: Right-click on the element -> Break on->Attributes modifications->Change attribute trigger
   
4. XHR Breakpoints
   can see where the code of the calling interface is. It is not very commonly used. Now it basically goes to the source code of the plugins such as axios. Only the xhr packaged by itself can be used. How to use: console
   sources->XHR Breakpoints- >+ sign -> enter link
   
5. Event Listener Breakpoints
   to find bugs by event
   Application scenarios: For example, the body is bound to a click event, and the click event conflicts, but you don’t know which piece of code is bound to it (such as a plug-in in node_module). At this time, you can see your own The code cannot see where the event is triggered, you can use it to locate which files listen to it, and then go to the documentation or source code of the corresponding plug-in.
   

Several personal positioning methods commonly used

1. The code written by myself can see the problem at a glance (if you can’t see it, you may not be clear-headed, ask others to help you see it)
2. Find the corresponding error line directly based on the error message, and then debug step by step (console.log or debugger)
3. There is no hint which line to go to, but there are keywords, such as: Cannot read property '' of undefined,
   search for the corresponding file or folder, and then debug step by step
4. There is no keyword, the code is compressed, and the prompt a is not defined is
   reproduced from the pc end to the local environment. The interface that cannot be transferred locally to the production environment can directly copy the data in the network (more on the mobile end later)
5. The prompt information is not obvious, such as Script error
   1. Play debugger or console.log() on each node to see where it is not executed.
   2. Use trycatch to wrap the code segment by segment and print the error. When the code has no coupling, directly segment the code You can also comment it out.

Script errror

When debugging on the mobile phone, sometimes 'Script error' will appear, and then there will be no other information. This is actually where some browsers implement script resource loading, which is judged by the same-origin policy. If it is a non-same-origin resource, errorMessage will be written as "Script error". Solution

:

1. Since it is a browser problem, it is better to change another browser. Not all browsers have this limitation. You can choose to change a mobile phone.
2. Using the crossorigin attribute of script, follow the steps below to configure
   1. Add the crossorigin attribute of script
   2. Configure the server and set the Response of static resource Javascript to Access-Control-Allow-Origin

4. Mobile terminal debugging

Mobile Debugging Tool

1. Google emulator local debugging, everyone understands
   
2. The mobile debugging artifact vconsole and Eruda
   Eruda are easier to use

<!--eruda-->
<script src="eruda.min.js"></script>
<!--vconsole-->
<script src="vconsole.min.js"></script>
<script>
        var vConsole = new window.VConsole();
        eruda.init();
</script>

3. 
   Use packet capture tools: Authors such as Charles and Fiddler have only used Charles, because at that time the company issued macs, and macs used Charles more, and colleagues who use windows like to use Fiddler. These two softwares are compatible with different systems, and it is enough to master one .
4. Use error monitoring plug-ins
   such as sentry error monitoring. The website https://sentry.io/
   will upload error logs to the platform. Error monitoring is very convenient.
   The disadvantage is that it will be considered to collect user information. If it is a privatized deployment, use it not bad.
5. Compatibility testing platform
   Compatibility testing of mobile phones is generally conducted by third-party companies, but their coverage is also limited. Once some users have older mobile phone models, but the company does not have a corresponding mobile phone, you can go to this Online mobile phone rental platform (Jugui)
   One of the platforms I have used: Yuntest https://www.testin.cn/business/landing/test_machine.htm
6. Mac and iPhone connection debugging

Several errors in joint debugging of h5 and app

1. The app cannot call the front-end code,
   make sure the code is on the window object
2. Failed to take photos, bluetooth, positioning, etc.
   Maybe the app does not have permission
3. The keyboard pops up and covers
   the app setting problem at the bottom of the page. I can find Android or ios to solve it. There is no way to solve it on the front end. The main reason is that there are too many models to adjust. If the app cannot be published, I really want to deal with it. You can use focus to monitor and add padding at the bottom to top it up, and you have to scroll to the bottom at the same time
4. The keyboard pops up, and the cursor in the input box does not return to its original position
   . This is a compatibility problem, which belongs to the front end to be solved. Monitor focus, blur, and control page scrolling
5. The login timeout
   must be set to intercept the interface to reconnect after disconnection
6. If you go back to the initial page and can't exit or go back and exit the page directly,
   let the app development set it up, it's all their fault. Or you can ask them to provide you with a method to log out. Both Android and iOS are webView.goBack/webView.canGoBack.
   Another solution is to make a set of routing control by yourself, like Vue routing, the routing principle is here
7. Please control your routing, use history.go(), location.replace() and other methods to control, otherwise the page will always be unable to go back

at last

1. There are no bugs that cannot be found, only impatient people
2. Ask if you can, if you can’t find the answer within an hour, please ask someone
3. People who solve problems if they can't solve them