Daily requirement analysis

In daily development, especially front-end development staff, they often need to capture or intercept HTTP requests and forward some domain names.

For the analysis of daily requirements, the requirements are as follows

  • Support request forwarding
  • Supports request packet capture
  • Request/response interception replacement is supported
  • Multiple configurations are supported
  • Fast configuration switching is supported

Comparison of tool schemes

In work, whether front-end or back-end, packet capture or forwarding tools are needed when switching between different environments. I have used SwitchHost+Charles before. SwitchHost is used for multiple configuration switches. Charles is used to realize packet capture and request forwarding that SwitchHost cannot meet, but both have certain pain points.

Later, with the recommendation of my colleagues, I switched to Whistle, and now WHISTLE + SwitchyOmega is used together. Daily forwarding packet capture is completed by Whistle, while SwitchyOmega takes effect locally.

The comparison of two schemes’ realization principles

SwitchHost pain points

  • Configuration takes effect late: Due to the socket connection caching mechanism of the browser, the configuration switchover does not take effect immediately
  • Global: this may affect other applications that use the same domain name
  • Single function: only domain name level configuration is supported and only domain name IP configuration is supported. It cannot be used in daily use. That is why I use Charles with it

Charles pain points

  • Tedious operation: Multiple forwarding configurations need to be entered manually one by one to take effect at the same time, and the repeatability is unbearable
  • Compatibility: Only macOS are supported

What are the benefits of “Whistle + SwitchyOmega”?

  • Live: Whistle doesn’t change the host file on your computer, it’s a proxy server itself and can be used on demand with SwitchyOmega for immediate effect
  • Local: The SwitchyOmega configuration requests whistle for forwarding purposes and only applies to the browser
  • Features rich: Whistle provides rich matching rules and HTTP-related interception and forwarding functions to meet everyday needs
  • Friendly interface: can quickly support batch configuration, quickly switch, multiple sets of configuration to take effect
  • Cross-platform: Whistle is a node-based proxy server that works on all operating systems.

The above functions can also basically meet the daily development requirements of the configuration, of course, there are other ways to better achieve the switch between different environments, this is to go from the design, this is not discussed in this time.

Whistle Installation start

  • Whistle installation
    • Install the node
    • Through the NPM package installation whistle: NPM install – g whistle – registry=https://registry.npm.taobao.org
  • Whistle to start the
    • View the version (verify installation) : W2-V
    • Start (default bond port 8899) : w2 start
  • You can enable or disable global forwarding
  • Install SwitchyOmega for partial effect

Configuring Forwarding Rules

  • Type local.whistlejs.com/ into your browser to go to the configuration page
  • Select Rules TAB in the upper left corner to switch to configuration Rules
  • Domain name IP mapping configuration: Forwards a domain name, IP address or other domain names
  • Precise link matching: forward/intercept only one request
  • Pre-link matching: Implements universal forwarding based on the configured link prefix
  • Regular matching: Links are matched based on the re and forwarded or intercepted
  • Intercepting response body: The body of the request response is replaced with the contents of a file at the local location
  • Multiple rules can take effect at the same time

For more detailed rules configuration methods, see the official documentation

View the caught

  • Type local.whistlejs.com/ into your browser to go to the configuration page
  • Select Netwrok in the upper left corner

Enable HTTPS packet capture

  • Download the root certificate and install it
  • Setting certificate Trust
  • Start intercepting ‘Capture TUNNEL CONNECTs’ configuration on hook
  • If you look at the packet capture page, you can see the content of the HTTPS request

For other systems, please refer to wproxy.org/whistle/web…

Refer to the link

  • Official document: wproxy.org/whistle/