Charles Web debugging tool experience

directory

• One, installation and use
• Second, the request packet to capture the mobile phone
  • HTTP request packet capture
  • HTTPS request packet capture
    • An iPhone captures HTTPS packets
    • Android (Xiaomi) mobile phone catch HTTPS packets
• 3. Replace online files with local files
  • Replace the test environment files
  • Replacing files in the production environment (across domains)
• Four, other
  • Filters requests under the specified domain
• Reference documentation

Jiang Huan, front-end engineer of Meituan Dianping, 2 years of work experience, mainly responsible for the development of small programs of “Ordering H5″ and” Meituan Dianping Smart Restaurant “. This article was first published in Jiang Huan’s Zhihu column, please pay attention.

The text begins here

Charles is a network proxy tool used for Web debugging on the Mac, similar to the Fiddler tool on Windows. I decided to write a summary article because I used it frequently at work.

Note that this article is intended to document the problems and solutions encountered in the process of use. For general Charles installation and use, please refer to the end of this articleReference documentation, this article will not elaborate.

One, installation and use

Download and install the package from the Charles website.

The basic usage method is not introduced in this article, if not clear, please move to this online tutorial, written in great detail.

The following specific analysis of the problems encountered in the use.

Second, the request packet to capture the mobile phone

HTTP request packet capture

---

First, you need to obtain the IP address of the local machine.

After opening Charles, select Local IP Address under the Help option to see the IP Address of the host. If an IPv6 address is obtained. You can also hold down the Option key on your Mac and click the WIFI icon to get an IPv4 address. As shown below:

Manually set the HTTP proxy on the WIFI of the iPhone, with the server address as the IP address of the computer and port number 8888. Then open the Recording button on Charles’s toolbar. Use your mobile browser to visit the page or open the App. You can see the HTTP request package in Charles.

HTTPS request packet capture

---

An iPhone captures HTTPS packets

IPhone grab HTTPS package, a lot of online configuration, here will not be detailed, attached to the network tutorial for your reference.

Two tips:

• Tip 1: If aN iPhone captures an HTTPS request packet, Unknown is displayed. Charles’ certificate is installed only on the local computer, but is not set to trust. Perform the following steps to set the certificate: General – > About the local computer – > Certificate Trust Settings – > CA check.

• If you do not want to set the Proxying Settings to * for each domain name, you can set the Host and Port to * for all domain names.

Android (Xiaomi) mobile phone catch HTTPS packets

Packet capture on Android phones is similar to that on iphones. You need to follow the following four steps to capture HTTPS request packets:

1. Computer mounted certificate
2. Mobile device installation certificate
3. Charlse Adds SSL Proxying
4. The phone uses a Mac proxy to access the target domain name

Two installation failures and solutions are added

• Case 1: If you enter charlesproxy.com/getssl in the browser of the simulator/mobile phone, instead of a box, the situation as shown in the following figure appears, which may be because the mobile phone has not set the IP address of the computer as a proxy (port number 8888).

• Case 2: The mi phone installation certificate indicates “no installable certificate” **, solution:

A. Open HELP > SSL Proxying -> Export Charles Root Certification and Private Key, and enter any password to Export the PEM file.

B. After the export, use wechat or other means to upload the PEM file to android phone. Open the file in WLAN Settings > Installation Certificate and enter the password you set when exporting.

For example, the path for transferring files through wechat is WLAN > Advanced Settings > Certificate Installation > Tencent folder > MicroMsg folder > Download folder

Analysis of Charles principle

The certificate Charles installed from the bag, the computer matches the phone. Either by visiting charlesproxy.com/getssl (because the Mac has proxy enabled, visiting this address actually returns the native Charles certificate, not charlesProxy.com), or by manually installing, In fact, the SSL certificate of the corresponding machine is installed. So if the mobile phone and computer where the certificate is installed are not paired, even if both have certificates, the packet can not be captured.

3. Replace online files with local files

Replace the test environment files

---

A, you need to install Proxy SwitchyOmega for Chrome and configure Charles Proxy, so that links under Chrome will be sent through Charles.

B. Open Charles and choose Tools > No Caching Seting. Select Enable No caching to ensure that the code will not be affected by file caching.

In addition, the Network Settings in the Chrome control panel should also be enabled with the Disable Cache option. This also disables caching during browser debugging, in case you make code changes that don’t take effect because of browser caching.

C. Single file replacement. Select Tools – > Map Local Settings to Map online files to Local files and click to select the file to replace (for example: MM-order-list.*.js). Protocol If left blank, all protocols are matched by default. Note: Projects packaged by Webpack may also need to map public files such as manifest.*.js and common.*.js as needed to complete the substitution.

D. Replace folders as a whole. Following step C, we can already do the single file replacement, but setting it up separately is too cumbersome. So let’s go straight to the whole folder replacement. Take app-Menuord-h5 as an example. The Host and Local Path configurations are as follows:

After configuring the Map Local Settings for Local files, you need to configure the Rewrite option to replace files. Replace all files in the corresponding directory with regular expressions.

E. Finally, refresh the browser. If the Respone Header of the HTTP request contains the X-Charles-map-local field, the Local file has been replaced.

Replacing files in the production environment (across domains)

---

To replace files in the production environment with Local files, you also need to set Map Local Settings and Rewrite Settings.

A. Set Map Local Settings to Map files and directories. Change Host to the domain name for storing static files, for example, Host: www.dpfile.com

B. Setting the Rewrite Settings requires two steps:

The first step is to specify the replacement file. Note that the file on the line may have a “min” field in the file name because it has been compressed.

In the second step, a cross-domain problem occurs because m.dianping.com references files in the mapped www.dpfile.com domain.

Please note that this is a case by case discussion:

• Case 1: The Response Header does not contain the access-Control-allow-Origin and access-Control-allow-credentials fields. You need to manually add these two fields.

Therefore, add the access-control-allow-credentials: true and access-Control-allow-origin fields to the Response headers in the dpfile.com domain. *, allowing files in the dpfile.com domain to be referenced by other domains.

• Case 2: If the Response Header already contains the access-Control-allow-origin field, you only need to add the access-Control-allow-credentials. You cannot add access-Control-allow-origin, otherwise an error will be reported.

After the configuration is complete, you can replace online files in the production environment with local files

Four, other

Filters requests under the specified domain

---

Since Charles will capture all the request packets sent by the mobile phone, in order to quickly locate the requests we need, we can filter Charles’ packet capture requests. The specific method is as follows: Setting – > Recording Setting – > Include sets to show only request packets for a specific domain.

Reference documentation

• Rounding, Charles
• The iPhone installed, Charles
• Charles grabs HTTPS and keeps displaying unknown
• Charles HTTPS packet capture — Android — Meituan Xie Min