Among the tools that developers are familiar with, Chrome must be the white moonlight in the minds of many people, not because it is so good, but because of the support of peer browsers. Its open source kernel, Chromium, has also achieved many breadwinner jobs, such as Edge, Opera, QQ browser, 360 browser, and other domestic and foreign one-vote browsers.
Chrome provides many tricks and tricks in DevTools. Using Chrome series articles will list the skills of calling "Awasome" directly, so that you can better tease Chrome.
The network has built the hypocritical prosperity of the Internet, and the phrase "the Internet is disconnected" can drive most people crazy. The web is essential to stupid human beings, it provides information, emotion, identity and meaning. The success of the network is also the failure of the network, especially when the front-end and back-end are jointly debugged. This article will introduce the related functions of the DevTools network panel (Network) .
1. Clean up network requests
One-click reset all records of the network panel, and you are as clean as ever.
2. Filter requests
After clicking, you can request to filter requests according to Fetch/XHR, JS, CSS and other options:
Press and hold Ctrlor Commandclick to select multiple options , such as filtering JS and CSS type files at the same time:
At the same time, a Filter input box is provided, which can be filtered according to the input name. Of course, you can also write regular expressions, such as using to /(css|js)$/filter css and js files at the same time:
Add a hyphen -to invert:
3. Save all web requests
Refreshing the page will reset all requests, which is very inconvenient for the debugging interface, because we often need to compare requests before and after, and turn on the Preserve Log option to keep the web page request records .
4. Disable caching
Caching is very important for user experience, but very unnecessary for development. Turn on Disable Cache to deny all caches.
5. Screenshot of webpage loading
To view requests, you may often use waterfall charts, but the network panel actually provides screenshots of web page loading , allowing you to view them in a visualized form.
6. Prohibition of Certain Requests
When analyzing web page performance, you can control variables by prohibiting certain requests.
This method can only ban requests individually . Chrome also provides a ban request based on the template, first Ctrl+ Shift+ ( ++ Pfor Mac ) orCommand⇧P
From the Run command menu, search for Show Network request blockingand run it:
For example, to prohibit all CDN files, you can write:https://cdn.heighliner.cloud/*
Although it is called a template (Pattern), it cannot use regular expressions, only wildcards ( *), weak Chrome.
7. Simulate network conditions
In most cases, the browser will make unblocked network requests, but in some scenarios we want them to be unblocked and blocked.
Throttling can control the speed of the network. By default, it provides fast 3G, slow 3G, and offline (Offline).
Of course, you can also customize it. In fact, it is nothing more than controlling the values of Download, Upload and Latency.
8. Check the Load event
The network panel has multiple places to display the time points of DOMContentLoadedand loadevents, the blue line corresponds to DOMContentLoadedthe event, and the red line represents loadthe event.
It is said that Chrome has a BUG here, and the color performance in dark mode and light mode is not consistent.
9. View request status
When analyzing the performance of a website, there are several total data worth referring to.
The first is the total number of requests for the website, shown here as 33:
The second is the resource size of the transfer, here is 731kB:
The third is the size of the transferred resources after decompression, here is 1.9MB:
Open it Use large request rows, and you can see the resource size of each request before and after decompression in detail.
10. Share requests
When the front-end and back-end interfaces are connected and aligned, it is often necessary to query the interface details. It may be convenient to throw a screenshot or two, but it is not detailed enough. HAR ( HTTP Archive ) is an archive file based on JSON format. You can send all HTTP requests Download as a HAR file:
Throw to the other import:
11. View resource sources
When viewing a file in the resource panel, Reveal in Network panelyou can locate which request the resource belongs to:
postscript
The importance of the network is self-evident, and Chrome has also given considerable attention. The functions on the DevTools network panel are convenient and easy to use. This article only covers commonly used and practical functional skills. If readers want to understand the functions of the network panel, Please go to Chrome's DevTools official website.
If you know more skills but have no use for them, the dragon slaying technique will be flashy after all. These functions can only be auxiliary in the final analysis. What you should really master is the logical analysis thinking of stripping cocoons, the network investigation ideas based on diagrams, and the spirit of asking the bottom of the boat.