Preface: Learn to use the developer tools of the Chrome browser to analyze HTTP requests
One: What is packet capture
That is, to capture the data packets transmitted when our local computer communicates with the remote server
Two: Chrome browser explanation
Chrome Developer Tools is a set of web development and debugging tools built into Google Chrome, which can be used to iterate, debug and analyze websites
Three: Open Chrome Developer Tools
Press F12 on the Chrome interface
or right-click on the page element and select "check"
Four: the structure of developer tools
Elements (Elements Panel) : Use the "Elements" panel to reproduce the layout and design of your website by freely manipulating DOM and CSS.
Console (console panel) : During development, you can use the console panel to record diagnostic information, or use it as a shell to interact with JavaScript on the page
Sources (source code panel) : set breakpoints in the source code panel to debug JavaScript, or connect to local files through Workspaces (workspace) to use the real-time editor of developer tools
Network (Network Panel) : The requested resource information (including status, resource type, size, time spent, etc.) obtained after the request of the web page is initiated, and network performance can be optimized based on this
Performance (performance panel) : Using the timeline panel, you can improve the performance of the page runtime by recording and viewing various events that occur during the life cycle of the website
Memory (Memory Panel) : Analyze the execution time and memory usage of web applications or pages
Application (application panel) : Record all resource information loaded on the website, including stored data (Local Storage, Session Storage, -IndexedDB, Web SQL, Cookies), cached data, fonts, pictures, scripts, style sheets, etc.
Security (Security Panel) : Use the Security Panel to debug mixed content issues, certificate issues, etc.
Audits (audit panel) : Diagnose the current web page usage and web page performance, and give some optimization suggestions. For example, list all unused CSS files, etc.
Five: focus on Network
Definition: The Network panel records information about each network operation on the page, including detailed time-consuming data, HTTP request and response headers, and cookies
Structure: consists of five panes, as shown in the figure
1: Controls
Use these options to control the appearance and function of the Network panel
2: Filters
Use these options to control which resources are displayed in the request list
Tip: Hold down Ctrl (Window / Linux) and click on the filter to select multiple filters at the same time.
In addition, the filter box can achieve a lot of customized filters, such as string matching, keyword filtering, etc. The keyword filtering mainly includes the following types:
domain : Only display resources from the specified domain. You can use wildcard characters ( ) to include multiple domains. For example, .com displays resources in all domain names ending in .com. DevTools will automatically populate all fields it encounters in the auto-complete drop-down menu.
has-response-header : Display resources that contain the specified HTTP response header information. DevTools will automatically fill in all response headers it encounters in the auto-complete drop-down menu.
is : Find out WebSocket requests through is:running.
larger-than (greater than) : Display resources larger than the specified size (in bytes). The setting value of 1000 is equivalent to the setting value of 1k.
method (method) : Display the resources retrieved by the specified HTTP method type. DevTools populates the drop-down list with all the HTTP methods it encounters.
mime-type (mime type : displays resources of the specified MIME type. DevTools populates the drop-down list with all MIME types it encounters.
mixed-content (mixed-content : display all mixed-content resources (mixed-content:all) or only the currently displayed content (mixed-content:displayed).
Scheme (protocol) : Shows the resources retrieved via unprotected HTTP (scheme:http) or protected HTTPS (scheme:https).
set-cookie-domain (cookie domain) : Display the resources that have the Set-Cookie header and whose Domain attribute matches the specified value. DevTools will automatically populate all cookie fields it encounters in the auto-complete drop-down menu.
set-cookie-name (cookie name) : Display resources with Set-Cookie header and whose name matches the specified value. DevTools will automatically fill in all the cookie names it encounters in the auto-complete drop-down menu.
set-cookie-value (cookie value) : Display resources with Set-Cookie header and value matching the specified value. DevTools will automatically fill in all the cookie values it encounters in the auto-complete drop-down menu.
status-code (status code) : Only display resources whose HTTP status code matches the specified code. DevTools will automatically fill in all the status codes it encounters in the auto-complete drop-down menu.
3: Overview
This chart shows the timeline for retrieving resources. If you see multiple columns stacked vertically, it means that these resources are being retrieved at the same time.
4: Requests Table (request list)
This list lists every resource retrieved. By default, this table is sorted in chronological order, that is, the oldest resource is at the top. Click the resource name to get more information. Tip: Right-click on any title bar of the list to add or delete information columns.
View the details of a single resource
Click the resource name (under the Name column of the Requests Table) to view more information about the resource.
The available tags will vary depending on the resource type you choose, but the following four tags are the most common:
Headers : HTTP headers associated with the resource.
Preview : Preview of JSON, image and text resources.
Response : HTTP response data (if it exists).
Timing : Fine breakdown of the resource request life cycle.
Headers (View HTTP headers)
Click Headers to display the header of the resource.
The Headers tag can display the resource request URL, HTTP method, and response status code. In addition, the tag also lists the HTTP response and request headers, their values, and any query string parameters
Click the view source or view parsed link next to each part, you can view the response headers, request headers, or query string parameters in source format or parsed format.
Preview (preview resource)
Click the Preview tab to view the preview of the resource. The Preview tab may or may not display some useful information, depending on the type of resource you selected. 
View Cookies
Click the Cookies tab to view the cookie table transmitted in the HTTP request and response headers of the resource. This tag is only available when transmitting cookies.
The following is a description of each column in the Cookie table:
Name: The name of the cookie.
Value: Cookie value.
Domain: The domain to which the cookie belongs.
Path: The URL path of the cookie source.
Expires / Max-Age: the value of the expires or max-age attribute of the cookie.
Size: Cookie size (in bytes).
HTTP: Indicates that the cookie should only be set by the browser in the HTTP request and cannot be accessed through JavaScript.
Secure: If this attribute is present, it indicates that the cookie should only be transmitted over a secure connection.
Copy, save and clear network information
Right-click Requests the Table ( request list ) to copy, save, or delete information network. Some options are context-sensitive, so if you want to operate on a single resource, you need to right-click the resource row. The following list describes each option
Copy Response
Copy the HTTP response of the selected resource to the system clipboard.
Copy as cURL (copy as cURL)
Copy the network request of the selected resource to the system clipboard as a cURL command string. See Turning a copy request into a cURL command.
The curl command is a file transfer tool that uses URL rules to work on the command line. It supports file upload and download, so it is a comprehensive transmission tool, but according to tradition, it is customary to call curl a download tool. As a powerful tool, curl supports many protocols including HTTP, HTTPS, ftp, etc. It also supports POST, cookies, authentication, downloading some files from a specified offset, user agent string, speed limit, file size, progress bar and other features . To automate the web processing flow and data retrieval, curl can help. l
Copy All as HAR (all copy as HAR)
Copy all resources to the system clipboard as HAR data. The HAR file contains a JSON data structure describing the "waterfall" of the network. Some third-party tools can use the data in the HAR file to reconstruct the network waterfall. For more information, see Powerful Web Performance Tool: HTTP Archive (HAR).
Save as HAR with Content (Save as HAR with Content)
Save all network data together with each page resource to HAR file. Binary resources (including images) are encoded as Base64 encoded text.
Clear Browser Cache (clear browser cache)
Clear the browser cache. Tip: You can also enable or disable browser caching from the Network Conditions drawer.
Clear Browser Cookies (clear browser cookies)
Clear your browser’s cookies.
Open in Sources Panel (open in the source file panel)
Open the selected resource in the Sources panel.
Open Link in New Tab (Open Link in New Tab)
Open the selected resource in a new tab. You can also double-click the resource name in the Requests Table.
Copy Link Address (copy link address)
Copy the resource URL to the system clipboard.
Save
Save the selected text resource. Only displayed on text resources.
Replay XHR (Replay XHR)
Resend the selected XMLHTTPRequest. Only displayed on XHR resources.
View resource originator and dependencies
Hold down Shift and move the mouse to the resource to view its initiator and dependencies. This part is the target reference of the resource you hover over.
Looking up from the target, the first resource color coded in green is the initiator of the target. If there is a second color-coded green resource, then this is the initiator of the initiator. Look down from the target (target), any resource whose color code is red is a dependency of the target.
