You may have heard of a term, "capture." Such as software development before and after the end of the FBI, call the backend interface does not respond, then we often say: "grasping the front end transmit data packets to see it." Or access our website after the CDN, caching strategies cache time you want to look at the site and set up their own static resources are consistent, also used packet capture. What is capture it?
Data communication between the host computer are performed by the network transmission, the network transmission and send and receive data packets intercepted retransmission, editing, etc. dump operation is capture.
Often it used to capture and observation data, taken for obtaining HTTP header, content, size and other information for analysis, determination of great help software Debug. So learn to capture, for some network troubleshooting problems is very important.
Mainstream packet capture tool comparison
First take a brief look at what common packet capture tool, are the following categories:
-
Charles
-
Fiddler
-
WireShark
-
TcpDump
-
Chrome Network
Where the current mainstream packet capture tools: TcpDump, WireShark, Fiddler, let's do some simple comparison of these several capture tool performance.
1. TcpDump
Network data packet capture tool in the Android platform, Android emulator that comes with TcpDump file.
Network data capture with TcpDump, do not take the phone proxy - adding to WireShark network packet analysis can be.
Disadvantages:
-
The phone must gain root privileges;
-
You can not view real-time traffic data - dump is because crawled out of the files, not real-time data exchange;
-
Get a lot of data, we need to filter out truly useful information analysis.
2. WireShark
PC side intercept, analyze all network traffic through the packet the card (for mobile end time, we must set up a proxy server to the mobile terminal) powerful tool, complete view of each network, each protocol, each packet the detailed composition information; packet TCP, UDP, HTTP, HTTPS and other protocols can be acquired;
Disadvantages:
-
Too much access to information, the need to manually filtered for analysis.
-
Only view can not be modified, re-sending network packets.
3. Fiddler
HTTP protocol proxy tool, capture, analyze all the computer and out of the card, exchanging data with the network data (when capture for mobile end, you need to set up a proxy server), mainly targeted at HTTP / HTTPS protocol; able to clearly view packets of the packet contents --HTTPS may decrypt it.
Disadvantages:
-
Applies only to the first request, the next request needs to be reset
-
Manually modify it takes time, if the program waits for a timeout, set this invalid results Response
Chrome Network packet capture introduction
Above you can see the mainstream packet capture tools are more or less has the disadvantage that there is not a simple interface, easy to operate, can be very convenient to see all the network requests a web page, and review the property to check a single resource, For example, HTTP header, content, size packet capture tool?
Chrome Network can be done. Chrome DevTools Chrome Network is part of a suite of debugging tools, here I come to use it to make a brief introduction.
Note: This tutorial is intended for use Chromium browser kernel, Microsoft Edge and Firefox have similar control panel, not discussed here.
How to open the Developer Tools panel
- Use shortcut keys to open.
-
Control + Shift + J or F12 (Windows)
-
Command+Option+J (Mac)
2. [More Tools] - Open [Developer Tools].
Developer Tools open, switch to [Network panel], constituting a panel can see the chart:
-
Controller: You can enable / disable network activity logging Network tools, as well as some other configuration options.
-
: Filters request to display the list of resources.
-
Overview: to graphically display the time axis in response to HTTP requests.
-
Request List: pages each resource request record, the default time to sort, click to see details.
-
Summary: contains the current fetch request number, size, and transmission information transmitting Processed
Next we come to know about the various modules.
Controller
From left to right button functions are:
-
Stop / Start packet capture, packet capture is the red circles represent;
-
Clear all requests list request;
-
Screenshots;
-
Hide / Show Filters pane;
-
Find Search;
-
Increasing the line height request list of each row;
-
Hide / Show overview pane
-
In accordance with the framework to integrate resources
-
Cross-page load saved request
-
Disable the browser cache
-
Analog offline access
-
Simulate slow access speed, network speed can be customized
We simply to experience using several functions.
Scene One: how to simulate access a Web page in case there is no local cache?
We can open the controller [Disable cache] function, refresh the page, the browser will request unbuffered analog access, to ensure that each request is initiated to the network.
Scene 2: request a list of the current page only records access request, if you click a hyperlink to jump to another page, this will clear the record before. You can click on the link after the jump, still save request before recording it?
We can open the controller [Preserve log] function, so click on the link to jump to a new page, requesting records before the jump still retained to help us track the response to the request.
filter
When we visit a Web site, there may be dozens or hundreds of requests, which some of us are concerned about, some we do not need, at this time you can quickly use filters to screen out we care of those requests.
Common mode filters is to filter by type.
The default filter types have been built, for example, we can filter out the request JS class, class pictures or request WebSocket type of request, hold down the [Ctrl (Windows)] or [Command (Mac)] can simultaneously select multiple a filter type.
So [Hide data URLs] option What does it mean?
Web developers often will be some small images or CSS scripts embedded into HTML format in order to BASE64 to reduce the number of HTTP requests. When you check the Hide data URLs option, you can hide the request list like data: or blob: class request.
In addition to providing more than a few Chrome filter may also be very flexible use filters in the filter box attributes screening the request log.
Common filtering properties shown in the table.
Scene One: Open the cloud when they take official website, we want to filter the page to request resources from different domains, it can [domain:] Enter the filter box, Chrome will help us to automatically append information related to the domain name.
Scene Two: Open the Web page, how to see which requests to use caching? Using the command [is: from-cache]
Request List
The default list of requests is initiated in accordance with the resource request time in ascending order, we can also choose to sort a specified column, for example, [Waterfall] column on the right, in accordance with the time to sort activities.
Request a list of the default meaning of each column is:
-
Name: name of the resource request
-
Status HTTP: status code
-
Type: Request MIME type of the resource
-
Initiator: an object or process initiated the request
-
Size: the size of the response returned by the server (including the head body and the package body) may be displayed after decompression Size
-
Time: Total duration of the last byte from the beginning to the received request response
-
FIG visual analysis of each request related activities: Waterfall
We can also add some other directory listed in the column on the right request exhaled menu, you can see more columns option.
In addition, we can also configure a custom column, add response headers want listed in the column on the right request exhaled menu -Response Headers- Manage Header Columns in.
Scene: How to customize the display request after which the CDN node?
CDN will be added on Via response headers in each response header, then we can customize the request list display Via columns.
HTTP requests and responses
Click on a specific request for the list of requests, you can request to open the content details, details of the content, we can do the following:
-
See HTTP request / response headers
-
View cookie
-
Preview response body, such as viewing the image
-
View the response body
-
Detailed time distribution
-
The copy request data to the clipboard
-
View uncompressed size of the resource, Use Large Request Rows
Scene One: Check the request in response to the request message
Scene Two: Preview Picture
Scene Three: a request for the export cURL command
Right on request exhaled menu, select the Copy option.
These are the introduction of Chrome's Network panel, through a number of scenarios to help you understand the function of the use of the panel. Compared to some other network packet capture tool Wireshark terms, Chrome Network easier to use, view the HTTP / 2 or HTTPS and other message is also more convenient for a number of front-end display or network connection problems, positioning and more It is quick and easy.