There have been a number of blogs about Whitsle, and this article would like to share some common features and considerations for front-end debugging

Also introduce your whistle.savefor-mock mock data plugin

To prepare

Why Whistle

  • Free, easy to install (npm i whistle -g)
  • Code configuration
  • ValuesWorkspace, where mock data is written directly on Whistle without switching back and forth between the browser and IDE
  • Integrate log, Weirne and other functions to facilitate mobile debugging
  • .

Preparation process

  • Installing the
  • HTTPS certificate installation trust

MAC proxy is directly configured with network preference Settings in the tutorial. However, it is found in practice that some anomalies may occur in the network related to Apple services, such as failure to load the App Store (blank screen) and failure to synchronize memos

Therefore, it is recommended to use a Google plug-in (such as Proxy SwitchyOmega) to configure the Proxy of the browser and make switching easier

Common functions amway

Mobile agent

When commissioning the H5 page on the real computer, http://PC_IP:port/path was created on the client to access the local front-end service of the PC. However, if there are multiple page urls at the same time, when the IP address of the PC changes, the URL of each page entry on the client needs to be changed

It is better to proxy the mobile wifi to PC, and then the URL accessed by the client directly uses the domain name of the test environment, and then Whitsle forwards it to the local front-end service. In this way, when THE IP is changed, you only need to modify the proxy address of the mobile wifi. It also makes it easy to switch local/test environments in Whistle by commenting forward rules

Mobile debugging

  • View and modify the DOM structure
  • Injection vConsole
  • Note that Weinre and vConsole cannot be used together, resulting in stuttering and weinre viewing DOM nodes incorrectly

The mock data

Mock data is usually written into the code when the background interface is not in the federated state, but this is intrusive. Mock data needs to be filtered before submitting to the public repository, and subsequent data cannot be saved. Therefore, it is recommended to use proxy tools for mock data

Create a dedicated folder for managing mock data in business requirements. For interfaces that often mock, they are managed in the Values workspace of Whistle

Convenient configuration parameters

Whistle provides a number of configuration parameters that are useful in the self-testing phase:

  • resDelay,reqSpeed: is used to simulate the performance of the front-end when the interface request is slow
  • statusCode: Simulates the response of an abnormal status code, such as interface 404
  • jsAppend: inject JAVASCRIPT scripts into the page, inject debugging tool scripts such as vConsole into the project code ininvasively, andhtmlAppend,cssAppend
  • reqCors: resolves cross-domain problems caused by domain name changes during agent debugging
  • .

The Node end caught

After the proxy tool is configured with the PC proxy, the requests sent by the Node service cannot be captured by default (most of the time, they are not needed). You need to configure the Node end to enable the PC proxy service

express

Directly start command injection configuration in NPM script: export http_proxy=http://127.0.0.1:8899 node app.js

egg

Configure httpClient in config.local:

config.httpclient = {
  request: {
    enableProxy: true.rejectUnauthorized: false.proxy: http:/ / 127.0.0.1:8899,}};Copy the code
Request and other third-party modules

Find the corresponding proxy configuration item (proxy/agent /..) in its document. Can be set

Pay attention to the point

The loopback address cannot be processed

When using localhost to access the local front-end page, Whistle cannot catch packets at all. This is because the network request sent by the loopback address does not reach the real network adapter, so common packet capturing tools cannot catch packets by default.

Distinguish URL replacement from host configuration

See Whistle author’s article on the difference between the host and URL substitution in Whistle

The common scenario of this problem is the local proxy debugging of wechat H5. It is stipulated that the url of the page that can obtain user authorization information must be in the list of web authorized domain names configured on wechat public platform. As a result, when debugging with wechat developer tools, if the way of URL replacement is used (to access the URL of legitimate domain name, The redirect_URI parameter is incorrect. The redirect_URI parameter is incorrect

Plug-in to share

Whistle.savefor-mock is used to make it easier to build mock data

Proxy original step

(After finding the corresponding API in the Network list)

  1. Right-click to save the RES Body, rename it and click Download
  2. Once the download directory is found, cut it to the same folder where the mock data is stored
  3. Copy the API URL, paste it into Rules, add the mock file path, and write the forwarding rule
  4. Open the mock file with an editor and rewrite it
After using the plug-in
  1. Copy the API URL and paste it into Rules with the savefor-mock:// file name
  2. Refresh the page and the file opens automatically for rewriting data
  3. Back to Whistle paste new rule, done