🍂 preface

  • Have you ever met with multiple backend students at the same time
  • When different backends ask us to debug their local services
  • Typically, the front end modifies the proxy path within the project
  • Is it quite troublesome to cut and cut? Remember not to push git
  • So, whistle is on my radar. If it works, let’s go to 👀

🐰 profile

Whistle is an efficient tool for the development of coordinated scene within Tencent team. It is a cross-platform agent solution based on Node, which is more suitable for front-end developers than vase. Mock, resource proxy forwarding, and so on are basic and frequent features.

🍃 Installation startup

  1. Install from documentation (Whistle supports nodes v0.10.0 and above)
  • Installation address: wproxy.org/whistle/ins…
  1. According to the download and installation, you need to capture HTTPS requests. If no capture is found, the certificate may not be installed
  • For details about how to install the certificate, see wproxy.org/whistle/web…
  • The MacBook Pro is used for the demonstration

  • Select a certificate when installing the certificateAlways trust

ðŸĶĒ Configure the proxy address

  • You can use the re to match the rule, or you can create multiple proxy addresses. Double-click the green rule to use the rule

ðŸ”Ĩ Check whether packets are captured successfully

  • Click any requested Url on the NetWork, you can see the request details on the right, and the Final Url is the address forwarded by our agent
  • The lower left can also filter the requested URL

💧 Yapi + whistle

  1. Suppose/API/customerMailRead mailCompanyGroupList is the background of the definition of pb interface address which field has the test: XXX
  2. Define your own Yapi
  3. Whistle Create a rule
  4. Interface mock data

  1. The practical application

ðŸŒđ summary

  • Using Whistle frees front-end partners from constantly switching requests. Instead of defining json files in local files, we can directly combine yAPI and mock. We can also DIY some interactive joint scenes by ourselves
  • Real-time packet capture: Supports packet capture for common Web requests such as HTTP, HTTPS, HTTP2, WebSocket, and TCP.
  • Modify request response: Unlike the breakpoint used by common packet capture debugging tools, Whistle uses the configuration rule method similar to system host.
  • Extension: Support to write plug-ins through Node, or as an independent NPM package to introduce the project two ways of extension.

ðŸŊ Whistle is more than that. It has many more functions to play ðŸŊ