Google developer Tools Detailed network Chapter

Original link: 1190000010302235

Developer Tools Introduction

Using the Chrome browser for web-side testing, we can use the F12 key to adjust the developer tools.

The four most commonly used feature modules of the Chrome developer tools:

• Elements: Used primarily to view the DOM structure of the HTML in front of the interface, and to modify the CSS style. CSS can be modified instantly, even if displayed. Greatly facilitates the Developer debugging page, this is really very friendly ~

• Console: This can be viewed as a JavaScript API in addition to viewing error messages, printing debug information (Console.log ()), and writing test scripts. For example, I want to see what methods and properties the console has, and I can enter "console" directly into the console and execute the ~

• Sources: Mainly used for debugging JS and viewing source code

• Network:

Network Detailed introduction

So I'm going to write it from left to right in order.

• When the Record button is open, a network connection information record is made on this panel, and it is not logged when it is closed.

• The Clear button clears the current network connection record information. (Click to clear)

• Capture screenshots to record page rendering at some point in time during page loading, as shown in the Visual window.

Filters are able to customize the filter criteria to find the resource information they want, as shown in.

can also be some specified conditions
What are the specified conditions?

Domain: The field in which the resource resides, that is, the domain name part of the URL. such as domain:api.github.com

Has-response-header: Whether the resource has a response header, regardless of its value. such as Has-response-header:access-control-allow-origin

is: The request that is executing at the current point in time. Current available values: Running

Larger-than: Displays a resource larger than the specified value size specification. Units are bytes (B), but K (KB) and M (MB) are also possible ~ as larger-than:150k

Method: What HTTP request method to use. such as GET

Mime-type: Also writing Content-type, is the identifier for the resource type. such as text/html

Scheme: the agreement provides. such as HTTPS

Set-cookie-name: The cookie name set by the server

Set-cookie-value: The value of cookies set by the server

Set-cookie-domain: The domain of cookies set by the server

Status-code:http status code for the response header

• Show more information

Show Time Flow

• Whether to keep the log
  When you choose to keep the log, reload the URL of the current interface, the previous request to display the resource information, will remain, will not empty yo ~

• Whether to cache

  When the developer tool is opened, the switch is turned on, the page resource is not cached and the status of the file request can be viewed from the state code of the status bar.

• Set the analog speed limit as shown in.
  

  Setting the speed limit simulates the access of different users to this page in various network environments.

The network topic describes the following introduction, the former is a noun interpretation, the latter for example

• Name/pat: Resource Name and URL path (MAIN.CSS)

• Method:http Request method (GET or post)

• Status/text:http Status Code/Text interpretation (200,ok)

• Type: MIME type of request resource, MIME is multipurpose Internet Mail Extensions (HTML,CSS,JS, etc.)

• Initiator: Explain how the request originated, there are four possible values

         1.Parser  ：请求是由页面的html解析时发送       2.Redirect：请求是由页面重定向发送       3.script ：请求是由script脚本处理发送 4.other ：请求是由其他过程发送的，比如页面里的Link链接点击

• Size/content:size is the size of the response head and response body, content is the size after the request is decoded

Request File Specific description

Click on the interface after a specific request, as shown in:

The total is divided into four modules:

• Headers

The header panel lists the resource's request URL, HTTP method, response status code, request header and response headers, their respective values, request parameters, and so on.

• Preview: Previews panel for resource previews.

Response: The response Information Panel contains content that the resource has not yet been formatted with

Timing: Resource Request details take time

Additional details

Right-click on a request and the page appears as shown.

• Copy request Headers: Copy the HTTP request header to the system Clipboard

• Copy Response Headers: Copy HTTP response header to system Clipboard

• Copy Response: Copy HTTP response content to system Clipboard

• Copy as
  Curl: Copy the network request as a Curl command character to the system Clipboard (Curl is an open source command-line tool and library for data transfer with URL syntax)

• Copy all as Har: Copies network request logging information to the system Clipboard in har format (what is HAR file)

• Save As HAR with Content: Saves all network information for the resource to the Har file (. har file)

• Clear Browser Cache: Clear Browser cache

• Clear Browser Cookies: Clear Browser cookies

• Open in Sources panel: The currently selected resource opens in the Sources pane

• Open link in new tab: Opens Resource link in new tab

• Copy Link Address: Copying a resource URL to the system clipboard

Google developer Tools Detailed network Chapter