Every front-end uses DevTools all year round, and most of the work can be done with just an IDE and a Chrome. However, there are some functions that can effectively improve the development efficiency, but many people still do not know, so let’s sort it out a little bit and talk about network today

Two general scenarios using ‘Network’

  • Want to confirm that a request was actually sent or that a response was actually received

  • Check that the data sent and received for a request is as expected

Hundreds of requests, and you need to focus on what you want to see

  • When all the requests you want to view are loaded, you can click the red dot in the upper left corner to stop loading network logs

  • Filter is a very powerful Filter, similar to the way search engines use it

    • Enter a string to display only requests that contain this string in the URL

    • If the string is preceded by a ‘-‘, only requests matching the string will be filtered out

    • Supports regular filtering

    • Special filtering methods are supported, such as status-code:200, domain: XXX, method:OPTIONS

  • Of course, you can directly select the requested resource type for filtering

Right-click on the header of a resource column and you can see that the TAB is actually customizable

Access the Network tool: Chrome => devTools => Network

(Only network requests made after DevTools is enabled will be recorded in this screen. If you want to see the page initialized, clear the current request and refresh the page.)