When developing or debugging website APIs, you often encounter issues such as:

  • Page loading failures
  • Abnormal data returned by APIs
  • Request parameters not matching expectations

Checking logs may not explain the problem; directly viewing network requests is more effective.
The goal of packet capture is to record the communication between the browser and the server.

Below, through troubleshooting, we explain how website packet capture is typically conducted.

1. First, Use Browser Developer Tools to View Requests

In most cases, the first step does not require installing any tools.

Open the browser developer tools:

  1. Open a webpage in Chrome or Safari
  2. Press F12 to open the developer tools
  3. Switch to the Network panel
  4. Refresh the page

Requests generated during page loading will appear in the list.

You can view:

  • Request URL
  • Request method
  • Request parameters
  • Response data

For example, when debugging a login API, you can directly see the JSON data sent by the POST request.

2. When Browser Tools Are Insufficient

Browser developer tools can only see requests from the current browser.

If you need to:

  • Modify request parameters
  • Replay requests
  • Capture requests from other applications

You need to use proxy packet capture tools.

Common tools include:

  • Charles
  • SniffMaster
  • Proxyman
  • Fiddler

These tools work by having browser requests sent to the proxy first, which then forwards them to the server.

Thus, proxy tools can record HTTP or HTTPS requests.

3. Configuring Proxy Packet Capture on a Computer

Prepare a computer and start a proxy tool, such as Charles.

Steps:

  1. Start Charles
  2. Check the proxy listening port, e.g., 8888
  3. Configure the HTTP proxy in the browser or system network settings
  4. Set the proxy address to 127.0.0.1:8888

After saving the settings, browser requests will pass through the proxy.

Verifying Packet Capture Success

Open the browser and visit a website, for example:

https://example.com

If new request records appear in Charles, it indicates successful proxy packet capture.

You can then view:

  • URL
  • Headers
  • Cookies
  • Response

4. Capturing HTTPS Website Requests

If the website uses HTTPS, you also need to install a proxy certificate.

Steps:

  1. Visit the certificate download address provided by the proxy tool in the browser
  2. Download the certificate
  3. Install it into the system certificate store
  4. Set the certificate to trusted

After completion, the proxy tool can decrypt HTTPS requests.

Reload the webpage to see the full response content.

5. Modifying Website Request Parameters

When debugging APIs, sometimes you need to modify request parameters, such as:

  • Modifying request headers
  • Rewriting POST data
  • Redirecting API addresses

In Charles or Proxyman, you can use the Rewrite or Breakpoints feature.
In SniffMaster, you can also use the interceptor feature.
For example:

  1. Enable Breakpoints in Charles
  2. Refresh the page
  3. Pause before the request is sent
  4. Modify parameters
  5. Send the request again

After the server returns the result, you can immediately see the changes.

6. If Requests Come from Mobile Devices

If website APIs are called by mobile apps, you can route mobile traffic through the computer proxy.

Steps:

  1. Connect the phone and computer to the same Wi-Fi
  2. Configure the HTTP proxy in the phone’s Wi-Fi settings
  3. Enter the computer’s IP and proxy port

Then open the mobile browser and visit the website.

Requests sent from the phone will appear in the proxy tool.
Proxy

7. Capturing Mobile Device HTTPS Requests

If the phone accesses an HTTPS website, you also need to install a certificate.

Steps:

  1. Visit the certificate address provided by the SniffMaster proxy tool in the mobile browser
  2. Download the profile
  3. Install the certificate
  4. Enable certificate trust in the system settings

After completion, the proxy tool can parse mobile HTTPS requests.
Proxy Certificate

8. When Proxy Cannot Capture Requests

Some app or webpage requests do not go through the system proxy.

In such cases, you can use device-level packet capture tools, such as SniffMaster.

This method does not rely on Wi-Fi proxy; it can directly read network data from the device.

Using SniffMaster to Capture Network Requests

Steps:

  1. Connect the iPhone to the computer via USB
  2. Keep the device unlocked
  3. Click Trust This Computer on the phone
  4. Start SniffMaster
  5. Select the device from the device list
  6. Install the profile as prompted
  7. Enter HTTPS brute-force capture mode
  8. Click Start

Then trigger the phone to visit the website.

Corresponding network requests will appear in the capture interface.
Brute-force Capture

9. Analyzing Underlying Network Issues

If you need to analyze more underlying network behaviors, such as:

  • TCP connection issues
  • Network latency
  • Packet retransmission

You can export data captured by SniffMaster to Wireshark.
Data Stream Capture

In Wireshark, you can view:

  • TCP three-way handshake
  • Data transmission process
  • Connection closure reasons

Usage Scenarios of Different Packet Capture Tools

Different tools have different usage scenarios in networks:

Tool Capture Method Applicable Scenarios
Browser Dev Tools Browser Internal Page Debugging
Charles Proxy Capture HTTP / HTTPS
Proxyman Proxy Capture HTTPS Debugging
SniffMaster Device Local Capture Mobile Device Networks
Wireshark Network Layer Capture TCP / UDP Analysis