Debug H5 Pages and Capture Traffic on a Phone

Debugging methods

Debugging tool

spy-debugger is used to debug H5 layout issues on Android, iOS, and WebView. Traffic capture is mainly used in WebView. spy-debugger is convenient for layout debugging, needs no cable, and allows several people to debug at once.

Usage

  • Install:

    • On Windows: npm install spy-debugger -g
    • On macOS: sudo npm install spy-debugger -g
  • Start

    • Enter in the terminal:spy-debugger
    • Start spy-debugger
  • Requirements before debugging

    • The phone and computer must be on the same Wi-Fi
    • Enter in the terminal:spy-debugger If the command does not start on Windows or macOS, turn off the firewall and try again
    • Configure the phone’s HTTP proxy with the port shown above (default 9888) and your computer’s current IP address
      • Android proxy setup: Settings → WLAN → long-press the network → Modify network → Advanced → Proxy settings → Manual
      • iOS proxy setup: Settings → Wi-Fi → select the network → HTTP Proxy → Manual

iOS needs a certificate installed separately

How to access

  • After configuring the port, enter in the phone browser thespy-debuggerstartup IP and the port of your local project
  • For example, if the IP is 192.168.2.36 and the local project URL ishttp://localhost:8080, the debugging URL ishttp://192.168.2.36:8080

Traffic capture

spy-debuggerTraffic capture

The method and host shown above identify requests from the debugger. Click a request to view its Response.

Customize the port and proxy

Stay updated

Get weekly research updates, market signals, and listing intelligence — follow along on Telegram or X.