The interface viewing method is our most commonly used method for locating front-end and back-end problems. That is: it is generally used to check whether the data returned by the back end to the front end is wrong, or the front end display is wrong.
Mainstream browsers (such as Chrome, FireFox, etc.) have their own interface viewing tools, which can be enabled through F12 (Settings-Tools-Developer Tools). Every time an operation is performed, the corresponding interface is generally called, and each request sent by the current page can be seen in NetWork. Take Google Chrome as an example:
1. Enter the NetWork page
As shown in the figure, press F12 to switch to the NetWork page, and the All page is displayed by default. .js, .css, .ico, and .png end with front-end rendering, icons, pictures, etc., not interfaces.
2. Click Fetch/XHR, here you can see the interface initiated by the page
3. Find the problematic interface
In many cases, when performing an operation, multiple interfaces may be called, and it is necessary to determine which interface corresponds to the current problem:
1) Check the developed interface document;
2) If there is no interface document, clear the Network list and enter the test interface. Then execute the operation. If there are multiple requests, check which interface's input or response data is the data you just operated;
3) If there is no interface document, the input and output parameters are still encrypted, and I will not (I will only interface one by one) See which one is the decryption input, or ask the development directly);
4) The most convenient: ask your development, which interface is it (if you keep asking if there is a document, you may be scolded).
4. How to view the interface details on the NetWork page
Generally, the response data is clearer on the preview page, and the content is the same as the Response page.
5. Problem positioning
1) In general, the error message in the console is a front-end problem. However, sometimes the console reports an error, but it is not a bug (see if it affects the function);
2) The request address is wrong, the request body parameters are missing or wrong, these are all front-end problems;
3) In the response or preview, there is no return value, or return The content is wrong (does not match the operation result, you can view the database if you have permission), which is a back-end problem.
4) The content displayed on the front-end interface is different from the content returned by the back-end interface, which is a front-end problem.