5月30日 22:48

How does whistle capture and view network requests, and what are the filtering and search tips?

Answer

Whistle provides multiple ways to capture and view network requests, helping developers quickly locate and solve problems.

Request Capture Basics

1. Start Whistle and Configure Proxy

Start whistle:

bash
w2 start

Configure browser proxy:

  • Visit http://127.0.0.1:8899/
  • Click "Proxy" tab
  • Follow prompts to configure browser proxy

2. View Request List

In whistle management interface:

  1. Click "Network" tab
  2. View all captured requests
  3. Default sorted by time

1. Filter by Type

Filter HTTP requests:

  • Click "All" dropdown menu
  • Select "XHR" to filter AJAX requests
  • Select "Doc" to filter document requests
  • Select "CSS" to filter stylesheets
  • Select "JS" to filter JavaScript files
  • Select "Img" to filter images
  • Select "Media" to filter media files
  • Select "WS" to filter WebSocket

2. Filter by Domain

Enter domain in search box:

shell
example.com

Or use wildcard:

shell
*.example.com

3. Filter by Status Code

Filter successful requests:

shell
status:200

Filter error requests:

shell
status:4xx status:5xx

4. Filter by Method

Filter GET requests:

shell
method:GET

Filter POST requests:

shell
method:POST

Search requests with keywords in URL:

shell
api/user

Search response content:

shell
body:success

View Request Details

1. View Request Headers

Click request and view "Headers" tab:

  • Request Headers: Request header information
  • Response Headers: Response header information
  • General: General information (URL, method, status code, etc.)

2. View Request Body

Click "Payload" tab:

  • Query String Parameters: Query parameters
  • Form Data: Form data
  • Request Payload: Request body (JSON, etc.)

3. View Response Body

Click "Response" tab:

  • View complete response content
  • Support JSON formatting
  • Support viewing HTML
  • Support viewing images

4. View Timing Information

Click "Timing" tab:

  • DNS Lookup: DNS query time
  • TCP Connection: TCP connection time
  • SSL Handshake: SSL handshake time
  • Request Sent: Request send time
  • Waiting (TTFB): Wait for response time
  • Content Download: Content download time
  • Total: Total time

Advanced Capture Features

1. Capture HTTPS Requests

Enable HTTPS interception:

  1. Click "HTTPS" tab
  2. Check "Capture HTTPS"
  3. Download and install root certificate

Or use rule:

shell
pattern whistle.https://

2. Capture WebSocket Requests

WebSocket requests automatically appear in request list:

  • Marked as "WS" type
  • Show connection status
  • Record message history

3. Capture Mobile Requests

Configure mobile proxy:

  1. Connect phone and computer to same Wi-Fi
  2. Configure mobile proxy to point to computer IP and whistle port
  3. Install HTTPS certificate

View mobile requests:

  • Requests appear in same list
  • Can identify device by User-Agent

4. Capture Service Worker Requests

Service Worker requests are also captured:

  • Show request source
  • Mark as Service Worker request
  • Can view cache status

Request Export and Analysis

1. Export HAR File

Export steps:

  1. Click "Export" button
  2. Select "Export HAR"
  3. Save HAR file

HAR file usage:

  • For performance analysis
  • For troubleshooting
  • For automated testing

2. Export as CSV

Export steps:

  1. Click "Export" button
  2. Select "Export CSV"
  3. Save CSV file

CSV file usage:

  • Data analysis
  • Report generation
  • Data import

3. Export as JSON

Export steps:

  1. Click "Export" button
  2. Select "Export JSON"
  3. Save JSON file

JSON file usage:

  • Custom analysis
  • Data processing
  • Integration with other tools

Request Modification and Replay

1. Modify Request

Modify request headers:

  1. Right-click request
  2. Select "Edit and Resend"
  3. Modify request headers
  4. Click "Send"

Modify request body:

  1. Right-click request
  2. Select "Edit and Resend"
  3. Modify request body
  4. Click "Send"

2. Replay Request

Quick replay:

  1. Right-click request
  2. Select "Replay"
  3. Request will be resent

Batch replay:

  1. Select multiple requests
  2. Right-click
  3. Select "Replay Selected"

Request Monitoring and Alerts

1. Real-time Monitoring

Enable real-time monitoring:

  • Requests appear in list in real-time
  • Auto-scroll to latest request
  • Show request count

2. Set Alert Rules

Create alert rules:

shell
# Status code alert status:5xx alert:Server Error # Response time alert time:>3000 alert:Slow Request # Response size alert size:>1MB alert:Large Response

3. View Statistics

Statistics panel:

  • Total requests
  • Successful requests
  • Failed requests
  • Average response time
  • Total data volume

Practical Tips

1. Use Keyboard Shortcuts

  • Ctrl/Cmd + F: Search requests
  • Ctrl/Cmd + E: Edit and resend request
  • Ctrl/Cmd + R: Replay request
  • Delete: Delete selected requests
  • Ctrl/Cmd + A: Select all requests

2. Save Filter Conditions

Save common filter conditions:

  1. Set filter conditions
  2. Click "Save Filter"
  3. Enter name
  4. Save

Use saved filter conditions:

  1. Click "Saved Filters"
  2. Select saved filter condition

3. Use Bookmarks

Add bookmark:

  1. Right-click request
  2. Select "Add Bookmark"
  3. Enter name
  4. Save

View bookmarks:

  1. Click "Bookmarks" tab
  2. View all bookmarked requests

4. Use Comments

Add comment:

  1. Right-click request
  2. Select "Add Comment"
  3. Enter comment
  4. Save

View comments:

  • Comments appear in request list
  • Hover mouse to view full comment

Best Practices

  1. Regularly Clean Request List

    • Avoid list being too long
    • Improve search efficiency
  2. Use Filter Conditions to Quickly Locate

    • Filter by type, domain, status code
    • Use keyword search
  3. Save Important Requests

    • Use bookmark feature
    • Add comments for explanation
  4. Export Data for Analysis

    • Export HAR file for performance analysis
    • Export CSV/JSON for data processing
  5. Use Keyboard Shortcuts to Improve Efficiency

    • Familiarize with common shortcuts
    • Improve operation speed
标签:Whistle