“This is the 15th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

Hello, I’m looking at the mountains.

The Hyper Text Transfer Protocol (HTTP) adopts the request/response model and is the most widely used network Protocol on the Internet. The main process: the client sends a request to the server. The request header contains the request method, URI, protocol version, request modifiers, client information, and request content, etc. The server responds with a status line that includes the version of the message protocol, the success or error code, server information, entity meta-information, and entity content. The default HTTP port is 80 and the default HTTPS port is 443. The following figure shows a simple processing diagram for HTTP services.

HTTP service processing diagram

In the spirit of pragmatism, this article does not explain the principle of HTTP protocol too much, just share the daily use of Chrome debugging HTTP service experience, hope to get some advice from colleagues.

In the process of developing HTTP services, if you write the server side, there is often no interface to see the effect, you can only call the server side service through some small tools to see the return result. If all goes well, of course, but if you encounter some very strange errors and cannot debug the server, you need to trace the HTTP request and response to understand how the client requested it, what type of data was passed in what format, and then the result of the server response, etc. This set of parameters is used to diagnose the health of the service and troubleshoot errors. I use Chrome a lot, so here is a list of ways to use Chrome debugging, other browsers, such as Firefox, IE, etc., have similar functions, you can choose your own familiar.

Chrome’s Network TAB

The image above is developer Tools in Chrome (Tools -> Developer Tools, or F12 Wake up). The upper part of the figure shows the time lines of each request on the current page. You can view the time of each request to optimize the request with a long time. The left side of the lower part is the request list. Click the request list on the left to view the parameters of the current request on the right side. As you can see, each request has Headers, Preview, Response, Cookier, Timing tabs, which are described below.

Headers

The request header includes general Header, Request Header, Response Header, and Entity Header.

General

  • Request URL: indicates the Request address of the client, corresponding to the service of the server
  • Request Method: Indicates the Request type, including GET, POST, PUT, and DELETE. The most commonly used ones are GET and POST
  • Status Code: indicates the response Status Code. You can view common response Status codes and their explanations
  • Remote Address: Indicates the IP Address and port corresponding to the domain name. The current request is directly displayed as the service of the requested IP Address, which is useful for locating abnormal services

Response Headers

  • Cache-control: The caching mechanism that requests and responses follow. Cache-control of a current request does not affect the caching of another request. Private (default), no-cache, must-revalidate, and max-age.
  • Content-encoding: Encoding type (mainly compression type) of the server response result identity, gzip, compress
  • Content-type: the format/type of the server response, such as text/ HTML. charset=utf-8
  • Content-language: Indicates the language of the response body
  • Content-length: indicates the length of the response body
  • Date: time when the message is sent (GMT)
  • Expires: indicates the response expiration time
  • Status: indicates the HTTP response code
  • Vary: prompts whether to cache responses or request from the original server, i.e. whether an unexpired response in the cache can be consumed by subsequent requests, accept-encoding, user-agent. If user-Agent is returned in the vary value, opening the same page from different browsers will re-request the server; If the Vary does not return user-Agent, the client cache treats it as the same page, the same request, and returns the cached content directly to the User. If the value returned is accept-encoding, the value of the accept-Encoding field in the request header (gzip, etc.) is used as the cache key; If the vary value is *, the cache does not make a judgment;
  • Transfer-encoding: Chunked indicates that the length of the transfer content is uncertain. If it is output in gzip mode, it does not need to apply for a large byte array. It can be output piece by piece, which is more scientific and consumes less resources.

Request Headers

  • Cache-control: The caching mechanism that requests and responses follow. Cache-control of a current request does not affect the caching of another request. Private (default), no-cache, must-revalidate, and max-age.
  • Accept: Data types that can be received by the client/sender, including text/ HTML, Application/XHTML + XML, and Application/XML
  • Accept-encoding: Identity, gzip, and COMPRESS are the Encoding types (mainly compression types) supported by the declaration sent by the browser to the server
  • Accept-language: the accept-language accepted by the browser, most of which should be zh-cn,zh; Q = 0.8
  • Connection: specifies whether to maintain the TCP long Connection with the server. Keep-alive (default), close. Keep-alive indicates that the service will keep the current connection for a period of time to be reused by other requests. Close: closes the connection after the request.
  • Referer: Source of the current request
  • Upgrade-Insecure-Requests:1
  • Host: indicates the domain name of the requested server
  • User-agent: information about the requesting client, such as Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML like Gecko) Ubuntu Chromium/49.0.2623.108 Chrome/49.0.2623.108 Safari/537.36

Query String Parameter

This module is only available for GET requests, which are request parameters, such as:

Soc-app :162 CID :0 soc-platform:1 OZV: ES_OZ_20160428.15_Pp0 f.id: 132385467_reqID :142769 rt:jCopy the code

Form Data

This module is used when a form is submitted, for example:

f.req:%5B%5B%22OGB%22%2C%5B7%2C%22en%22%5D%5D%2C%5B%5B%5D%2C%5B1%5D%2C%5B3%5D%2C100%2C%22OGB%22%5D%2C%5B1%5D%5D
at:AObGSAhUe1EYP164z9Z6L0cy8oPPAm_ezw%3A1462071694241
:
Copy the code

Preview

Displays a preview of the request response.

Response

Displays the details of the response.

Cookie

Displays all Cookie information of the client in key-value format.

Timing

It shows the time or elapsed time for each phase of the process from the beginning of the request to the end of the response.

Write in the last

You can debug most HTTP services using Chrome, but you can use plug-ins or tools to debug POST, PUT, delete, and other requests without an interface. You can use Postman or DHC to do this in Chrome, which is very handy. Here’s a screenshot of Postman:

Hello, I’m looking at the mountains. Swim in the code, play to enjoy life. If this article is helpful to you, please like, bookmark, follow. Welcome to follow the public account “Mountain Hut”, discover a different world.