I’m participating in nuggets Creators Camp # 4, click here to learn more and learn together!

Introduction of whistle

A similar tool is Fiddler on Windows platform, which is mainly used to view and modify HTTP, HTTPS, Websocket requests and responses. It can also be used as an HTTP proxy server, which is different from Fiddler’s way of modifying request responses through breakpoints. Whistle adopts the same configuration method as hosts. Everything can be done by configuring whistle. It supports multiple matching methods such as domain name, path, regular expression, wildcard and wildcard path.

Recommended reasons

Capturing tools helped a lot in the development of WebView, starting with Fiddler capturing and using Charles on the MAC. The main way to use it is to intercept the interface, use weinre to debug the real style inside the real machine, and add mobile debugging vConsole to the production environment to check online problems. Too many problems can be solved by capturing packets. Whistle’s main advantage is that it’s cross-platform. It works on both MAC and Windows, with a single configuration to capture packets and a low platform cost.

Weinre this function whisle

Tools documentation: Install startup · GitBook

The installation

  1. Install Node, which is basically installed for the front end
  2. Install the whistle
npm install -g whistle
Copy the code

Start the

W2 start // start w2 restart // start w2 stop // stop w2 run //Copy the code

Common configuration

# configure local service proxy 127.0.0.1:8008v.test.com 127.0.0.1:8080 lg.test.com 127.0.0.1:8082 la.test.com # Configure weinre after the corresponding name Within the same LAN real machine debugging artifact # / mobile page https://m.test.com/yj/subject?.+/ vein as: / / test # / http://lg.test.com/yj/subject?.+/ weinre://demo http://static.test.com/qnUpload/frontend/js/vconsole.dev.js enable://abort # //appsw.test.com/sw_log/report_bulk/ enable://abort # Abort **. Aliyun.com disable:// Intercept **.alibaba.com disable://intercept **.alicdn.com disable://intercept **.qlogo.cn disable://intercept # http://lg.test.com/resourcebitadmin/ http://t-do-dev.test.com/resourcebitadmin/ # https://lg.test.com/resourcebitadmin/ https://t-do-dev.test.com/resourcebitadmin/ # disable static resource matching static.test.com: / / intercept HTTP: / / image.yunjiweidian.com Disable :// Intercept # m.test.com Disable :// Intercept # rematches the corresponding page and specifies the local replacement page to be returned. Local file replacement can sometimes cause cross-domain problems. Can use templates instead of # / https://spe.yunjim.com/yunjiactivity/collectCards/index_v1?.+/ C: \ Users \ yao \ Desktop \ test100 HTML # /https://spe.yunjim.com/yunjiactivity/collectCards/index_v1?.+/ C:\Users\yao\Desktop\test100.html # /https://spe.yunjim.com/yunjispecialbuyer/collectionCard/queryUserCard.json?.+/ E:\work\fd\active\queryUserCard.json # /https://spe.yunjim.com/yunjispecialbuyer/collectionCard/composeCard.json?.+/ E:\work\fd\active\composeCard.json # Regular matching interface And return hope returned data # / https://t-do-dev.test.com/yunjispecialbuyer/collectionCard/composeCard.json?.+/ E:\work\fd\active\composeCard.json # /https://t-do-dev.test.com/yunjispecialbuyer/collectionCard/queryUserCard.json?.+/ E: \ work \ fd \ active \ queryUserCard json # configuration vein as the backslash followed by the name of the corresponding vein as # / https://m.test.com/yj/subject?.+/ : / / intercept test # configuration file  # /https://m.test.com/yj/subject?.+/ /Users/yunji/Downloads/test.html https://m.baidu.com/ weinre://baidu https://m.baidu.com/ weinre://baidu # http://lg.test.com/linkBasePath/yunjioperateapp/legao/queryRankList.json?appCont=0&rankIdList=3340,3411,3413 resBody://{queryRankList.json} /http://item.test.com/yunjiitemapp/app/cart/makeOrderItemCheck.json.+/ resBody://{demo.json} }Copy the code

Mobile Phone Agent Configuration

Proxy for local services

Local Browser Configuration

Local browser configuration requires third-party plug-ins. You can configure a proxy server to use the local browser. The official offer is that the plugin is

{ "url": "${url}", "port": "${port}", "version": "${version}", "query": "${query}", // equivalent to location.search, if not in the URL? ${search}", // equivalent to location.search, if not in the URL? ${queryString} = ${queryString} = ${queryString} = ${queryString} It is? "SearchString ": "${searchString}", // equivalent to location.search, but not in the URL? It is? "queryValue": "${query.name}", "host": "${host}", "hostname": "${hostname}", "path": "${path}", "pathname": "${pathname}", "reqId": "${reqId}", "now": ${now}, "method": "${method}", "xff": "${reqHeaders.x-test}", "other": "${reqHeaders.other}", "cookie": "${reqCookie}", "cookieValue": "${reqCookie.cookieName}", "clientIp": "${clientIp}" }Copy the code

Common interface proxies

/http://item.test.com/yunjiitemapp/app/cart/makeOrderItemCheck.json.+/ resBody://{makeOrderItemCheck.json}
Copy the code

makeOrderItemCheck.json

{"currentTimeMs":1644806139735,"errorCode":1,"errorMessage":" unknown error "}Copy the code

summary

  1. The integrated function is very suitable for our usual development habits, and can basically meet most of the needs of the front end. For the front end, node will be installed on the computer, which is very suitable for the front end

  2. Can be plug-in development, friendly to programmers, all functions can be very intuitive to see the configuration file, in line with the programmer’s development habits. Before we do the others

  3. Directly through the browser can see the corresponding effect, very convenient and easy to use