1. Reproduce the problem
Through various methods such as reproducing the scene, overlogging the problematic account, etc., the bug is created in the project, so that it can be well displayed and appear in places visible to our naked eyes (of course, there are also some bugs that cannot be reproduced. Yes, if it can be reproduced, we try to put the reproduction in the first step).
2. Find the code location where the problem occurs
Method 1: Enter the project through the routing path, and find the corresponding code step by step. The specific operation is shown in the reference link below. It is recommended to read it and watch the follow-up.
https://blog.csdn.net/weixin_52797317/article/details/130054354?spm=1001.2014.3001.5501
Method 2: By locating the key element on the console, copying the class name of the key element and searching directly in the magnifying glass of vscode, you can directly enter the corresponding code. However, this method is not necessarily reliable in large-scale projects. Many class names have been processed, and this method does not help us understand the logic of the code before and after, so it is not recommended.
3. Analyze the cause & solve the problem
By printing data on the console, checking the data returned by the backend, communicating with the backend about the correctness of the data, checking the correctness of the code logic and other methods to determine whether the bug appears in the frontend, and then solve the corresponding problem through the corresponding method