Use the Network tag of the browser developer tool to quickly locate performance bottlenecks, troubleshoot interface problems, and find out the reasons for resource loading failures. 1. View the entire request process: record all network requests, analyze the initiation, waiting and download time of each request through the timeline, and click on the specific request to view detailed information such as Headers, Response and Timing; 2. Check whether the interface call is normal: judge the problem type (such as 200, 404, 500) through the status code, check the request and response headers, and verify whether the return data structure meets expectations; 3. Filter and find specific resources: filter the request using keyword filtering (such as /api) or type tags (XHR, Img, JS), right-click to add fields such as Domain to analyze the request source; 4. Simulate different network environments: select the network speed (such as Fast 3G, Slow 3G) through the drop-down menu to test the performance of the page under the weak network, check Throttling to observe the loading order and optimize the user experience. Proficiency in Network tags can significantly improve web debugging efficiency.

When you open the Network tab of the browser developer tool, it is not just as simple as looking at what files are loaded on the page. It can help you quickly locate performance bottlenecks, troubleshoot interface problems, and even find out the reasons for resource loading failures.

See the entire process of request: from start to finish

The most core function of Network tags is to record all network requests on the page. Just open this panel and refresh the page to see how each resource is loaded.

• Timeline is a very useful information that can see the initiation time, waiting time and download time of each request.
• Click on a request to see detailed information, such as request headers, response content, preview, etc.
• If an interface is particularly slow, you can focus on its "Timing" part to see if DNS query is slow or server processing is slow.

If you are debugging the loading speed of the web page, it is recommended to open the Network panel at the beginning and check "Disable cache" to simulate the first access situation.

Check whether the interface call is normal: status code and response content

Many front-end bugs are actually caused by interface problems. At this time, the Network tag became the first screening window.

• Pay attention to the status code: 200 is normal, 404 is the resource not found, 500 is the server error, and 401 is the permission problem... These numbers can help you quickly determine which link the problem lies.
• Check the request and response headers to confirm whether there are any error parameters or no tokens are included.
• Look directly at the returned data structure in "Response" or "Preview", and is it consistent with expectations.

For example, if you tune an API but the page does not display data, first go to the Network to find the request to see if the returned empty array, error message or data with incorrect format.

Filter and find specific resources: Don't let information overwhelm you

The Network panel will record all requests by default, including images, CSS, JS, fonts, etc. If the page is complicated, it is easy to be dazzled by a bunch of information.

You can use the filtering function:

• Enter keywords, such as /api , and you can only look at interface requests.
• Click the type tag above, such as "XHR" or "Fetch" to look at the interface, "Img" to look at the pictures, and "JS" to look at the script loading.
• Right-clicking on a column can add more fields, such as "Domain" to see which server the request is sent to.

Sometimes, the same interface will be called multiple times, and by filtering and sorting, you can find exception requests faster.

Simulate different network environments: test loading performance

Network tags can not only view requests, but can also simulate different network conditions.

• Find the "Online" drop-down menu, you can select "Fast 3G", "Slow 3G" or custom network speed to test the performance of the page under weak networks.
• After checking "Throttling", the page loading will slow down, making it easier to observe the resource loading order.

This feature is very useful for optimizing the user experience. For example, you may think that a certain JS file is not big, but it has become a bottleneck under slow networks.

Basically that's it. Proficient in using Network tags can help you avoid many detours when debugging web problems.

The above is the detailed content of How to use browser developer tools network tab. For more information, please follow other related articles on the PHP Chinese website!