Debugging Mobile H5 Pages — Practical Tools for Interception and Replacement
In mobile web (H5) development, while most debugging can be done using Chrome DevTools with a mobile emulator, there are still critical scenarios where real devices are required for complete verification.
📱 Common Challenges in Mobile Debugging
🔒 WeChat / QQ Webview Authorization
- H5 pages opened within WeChat or QQ often reuse the app’s login session.
- PC emulators cannot simulate WeChat/QQ Webview behavior or retrieve authorization tokens after redirect.
📲 Embedded Pages in Third-party Apps
- Pages embedded in 3rd-party apps (e.g., video/news apps) may lack test environments or debugging entry points.
- During development, the entry page must be swapped with a test version.
🐛 Debugging Live JS Issues
- Touch-related bugs or animation glitches may occur only on mobile.
- Since production JS files cannot be edited directly, interception and replacement become essential.
🪟 Recommended Tools for Windows: Fiddler + Willow
Official site: https://www.telerik.com/fiddler
Key features:
- HTTP/HTTPS sniffing
- Request/response editing and replay
- Plugin support (e.g., Willow for page override and custom HOSTS rules)
Plugin: Willow
✅ Pros:
- Free and stable
- Intuitive GUI
- Highly customizable
🍎 Recommended Tools for macOS: Whistle + HBuilderX + AnyProxy
- Whistle: Powerful proxy with rule-based rewriting and HTTPS support
- HBuilderX: Comes with mobile simulator for WeChat/Alipay containers
- AnyProxy: Alibaba’s visual proxy tool, great for local override
While Charles used to be a top choice, it’s now a paid product. Free tools are more cost-effective alternatives.
🐧 Cross-platform Tools (Linux / macOS / Windows)
✅ Reqable (Highly Recommended)
Official site: https://reqable.com/
Features:
- Free, modern UI, supports sniffing, replay, replacement
- All-in-one alternative to Postman + Charles
- Scan QR code to connect mobile devices
✅ nproxy + Wireshark (Command-line Friendly)
Install nproxy (Node.js required)
npm install -g nproxy
Configure Replace Rule
cp /usr/lib/node_modules/nproxy/replace-rule.sample.js ./
# Edit `replace-rule.sample.js` to define interception and replacement logic
Start nproxy
nproxy -p 8888 -l replace-rule.sample.js -d
Console output:
[INFO] NProxy started on 8888!
[INFO] connect to https server successfully!
Set Up Proxy on Phone
- Ensure both phone and computer are on the same Wi-Fi
- Set manual proxy on phone: use computer’s IP and port (e.g.,
8888)
Capture with Wireshark
- Install HTTPS certificate or analyze HTTP traffic only
- Great for deeper traffic analysis
📲 Tips for Proxying on Mobile
- On Android: Use “WeChat Dev Edition” to debug embedded WebViews
- On iOS: Use Safari Remote Debugging on macOS
- Ensure both devices are on same subnet, and firewall allows relevant ports
- Avoid carrier HTTPS hijacking; use trusted CA certificates or switch to HTTP
📁 Suggested Directory Structure for Debugging
debug-env/
├── replace-rule.sample.js
├── certs/
│ └── nproxy-rootCA.crt
├── logs/
└── README.md
✅ Tool Comparison Summary
| Tool | Platform | Key Features | Recommended Use |
|---|---|---|---|
| Fiddler | Windows | Free, extensible | Top choice on Windows |
| Willow | Windows Plugin | Page replacement + HOSTS | With Fiddler for testing |
| Charles | macOS / Win | Visual proxy (paid) | GUI lovers |
| Whistle | Cross-platform | Strong rule system | Rule-based rewriting |
| Reqable | Cross-platform | Modern UI + all-in-one | Best overall choice |
| nproxy | Cross-platform | CLI-based + flexible rules | Engineering-friendly |