To open Safari's Network panel for network request debugging, follow the following steps: 1. Open Safari → Preferences → Advanced → Check "Show 'Development' menu in the menu bar"; 2. Open the landing page, click "Development" → "Show JavaScript Console" in the top menu bar (or use the shortcut key Option ? C); 3. Click the "Network" tab in the developer tool interface to enter the network panel. After refreshing the page, you can view the Name, Status, Type, Size and Time information of all loaded resources, and support clicking to view details, filtering classification, sorting by time, and recording network behavior for performance analysis and optimization judgment.

After opening Safari's developer tools, Network Inspector is an important tool for you to debug web page loading performance and view resource requests. It can help you analyze the loading time, status code, request header, response content and other information of each file in the page.

How to open the Network Panel

First make sure the "Development" menu in Safari is turned on:

• Open Safari → Preferences → Advanced → Check "Show 'Development' menu in the menu bar"

Then:

• Open the web page you want to debug
• Click "Development" → "Show JavaScript Console" in the top menu bar (or directly press Option ? C )
• Click the "Network" tab in the developer tool interface and enter the network check panel

View all resources loaded on the page

After entering the Network panel, refresh the page, you will see all requests initiated during the page loading process, including HTML, CSS, JS, pictures, fonts, etc.

Here are a few key columns to note:

• Name : The requested resource name
• Status : HTTP status code (for example, 200 means success, 404 is not found)
• Type : resource types, such as script, stylesheet, image, etc.
• Size : The transmission size tells you how much traffic this resource occupies
• Time : The time it took to load the resource

You can click on a resource to view details, such as viewing request headers, response headers, actual returned content, and even previewing the image or script content.

Filter and sort request data

To find specific types of resources or problems more efficiently, you can use the filtering function:

• There is a search box in the upper left corner. Enter keywords to quickly locate a resource.
• There are classification buttons on the right, such as All, XHR, JS, CSS, Images. Just click on it to see only a certain type of resource.
• Click the "Time" column title to sort by loading time to find the "culprit" that slows down the page

In addition, checking "Preserve log" can preserve historical request records when the page jumps or refreshes, which is very helpful for debugging multi-page processes.

Analysis of loading performance and optimization suggestions

The Network panel can not only view requests, but also help you make performance optimization judgments:

• If a JS or image loads particularly slowly, it may be a CDN configuration problem or a resource that is too large
• Multiple 304 requests appear, indicating that the browser is verifying the cache, which is normal but can be further optimized.
• A large number of 200 requests may mean that the cache is not in effect, it is worth checking the Cache-Control settings

You can also start recording by clicking the "??" button in the lower left corner, simulate user operations and observe changes in network behavior throughout the process.

Basically that's it. Proficiency in using Network panels is very helpful for front-end debugging and performance optimization.

The above is the detailed content of How to use the network inspector in Safari's developer tools?. For more information, please follow other related articles on the PHP Chinese website!