Shulou(Shulou.com)05/31 Report--

This article introduces you how to use the cross-platform web debugging tool whistle, the content is very detailed, interested friends can refer to, I hope it can be helpful to you.

Whistle is a cross-platform web debugging proxy tool based on Node. Similar tools include Fiddler+Willow on Windows platform, Charles based on Java, Livepool based on Node and so on. Like all web debugging agent tools, the main function of whistle is to view and modify the request response of HTTP, HTTPS, Websockt or as a HTTP proxy server, but unlike Fildder+Willow, Charles and Livepool to modify the request response through breakpoints, whistle uses a similar configuration Hosts way to modify the request response through configuration. And provide rule grouping function and through domain name, path, regular three matching methods (the hosts configuration of the system only supports domain name matching), especially for terminal debugging provides weinre,log and other functions, and supports expansion through the Node module.

Basic function

Github address

Installation startup

The installation and startup of whistle requires the following four steps: install node, install whistle, start whistle, and configure the agent.

Install Node (it is recommended to install the latest version, the LTS version or the current version, if you have installed, you can ignore this step): https://nodejs.org/

Install tnpm ():

Npm install @ tencent/tnpm-g-- registry= http://r.tnpm.oa.com-- no-proxy# Mac, Linux users may need to add sudosudo npm install @ tencent/tnpm-g-- registry= http://r.tnpm.oa.com-- no-proxy

Install whistle and the plug-ins txpac plug-ins needed to access the external network in the corporate network:

Tnpm install-g whistle @ tencent/whistle.txpac# Mac, Linux users may need to add sudosudo tnpm install-g whistle @ tencent/whistle.txpac

Start whistle

W2 start

The default port of whistle is 8899. If you want to change the port number, you can start it like this:

W2 start-p 8888

Restart whistle:

W2 restart

Turn off whistle:

W2 stop

For more information, see the command line help:

W2 help

Configure the agent

Whistle needs to manually configure the browser proxy or system proxy (the ip of the proxy is the ip of the machine where whistle resides. If it is local, enter 127.0.0.1; the port number is the port number set at startup. Default is 8899):

Configure the browser proxy (recommended):

Install the chrome agent plug-in: whistle-for-chrome plug-in or Proxy SwitchySharp

Install the firefox Agent plug-in: Proxy Selector

Configure the system agent:

1) Windows

2) Mac

Usage

After installing node, installing whistle, starting whistle, and configuring the agent, you can start using whistle and open the whistle configuration management page with a Chrome browser.

For interface related operations, see interface functions

Configuration mode

Configuration mode of traditional hosts:

# single hostip hostname# combination hostip hostname1 hostname2... HostnameN# such as 127.0.0.1 www.example.com127.0.0.1 a.example.com b.example.com c.example.com

Configuration mode of whistle:

# single operation pattern operator-uri# if pattern and operator-uri are not a combination of domain names or paths at the same time, the location can be changed to operator-uri pattern# combination mode pattern operator-uri1 operator-uri2... Operator-uriN# pattern1 and operator-uri are not a combination of domain names or paths. You can configure operator-uri pattern1 pattern2 as follows. PatternN

Where pattern can be:

Domain name: www.test.com (all requests under this domain name will match operator-uri)

Path: requests of http://www.test.com/xxx(http://www.test.com/xxx and its subpaths will match operator-uri), or protocol://www.test.com/xxx,protocol without protocol can be http, https, ws, wss (requests of http://www.test.com/xxx and its subpaths will match operator-uri)

Regular: / ^ https?:\ / ([^\ /] +)\ / xxx/ (http (s): / / host:port/xxx and its subpath requests all match operator-uri, and the submatches in url can be obtained through $1, $2,..., $9 in operator-uri)

The protocol://ruleValue-shaped URI,whistle abstracted from the above basic functions of operator-uri will modify the request or response according to the matching operator-uri 's protocol and ruleValue. For details of protocol and ruleValue, please see the whistle help documentation and protocol list.

For example:

# modify www.example.com response corswww.example.com resCors://*# or resCors://* www.example.com# simultaneously modify multiple custom domain names or paths resCors://* / example\ .com / a.test.com b.test.com# modify www.test.com corswww.test.com 127.0.1 corswww.test.com with ports host, referer and response 8080 referer:// http://www.example.com resCors://* some examples

Intercept HTTPS

If intercepting HTTPS is not enabled, the plaintext of HTTPS and Websockt request response cannot be seen in whistle, and only limited operations such as host and proxy can be set on HTTPS and Websockt through whistle. To fully operate HTTPS and Websocket request response through whistle, you need to open HTTPS intercept and install the root certificate of whistle in the system or browser. For more information, please see: HTTPS

Configure host

# traditional hosts configuration 127.0.0.1 www.example.com # equivalent: www.example.com 127.0.1127.0.0.1 a.example.com b.example.com c.example.com# support with port 127.0.0.1 www.example.com 8080 www.example.com # equivalent to: www.example.com 127.0.0.1 www.example.com 8080127.0.1 Com # supports obtaining hosthost://www.qq.com:8080 www.example.com through domain name # equivalent to: www.example.com host://www.qq.com:8080host://www.qq.com:8080 a.example.com b.example.com c.example.com# supports matching 127.0.0.1 example 8080 / example / I # by regular expression equivalent to / example\ .com / I 127. 0.0.1 example.com/test 8080127.0.1test 80808080 / example.com/test\ .com / / test\ .com / # support path matching 127.0.0.1 test 8080 http://example.com/index.html https://www.test.com/test # equivalent to: test 127.0.0.1 test 808080808080800.0.0.1 test 8080808080800.0.1test 800.0.1test 808080808080800.0.0.1test 808080808080800.0.1test 8080808080800.0.1test 808080808080800.0.0.1 test 80808080800.0.0.1test 80808080800.0.1test 8080808080800.0.1test 800.0.1test 808080808080800.0.1test 800.0.1test 8080808080800.0.1test 800.0.1test 8080808080800.0.0.1test 8080808080800.0.

For full functionality, see the list of protocols.

Modify request

The following features are supported through domain name, path and regular matching method. For convenience, only take domain name matching method as an example, and others are the same:

# modify url parameters www.qq.com urlParams://E:\ test\ params.json # request method www.qq.com method://post# add request header www.qq.com reqHeaders:// (x-a=1&x-b=a%20b) # modify referer (modify referer shortcut) www.qq.com referer:// http://ke.qq.com/# modify cookie (modify request cookie shortcut) Www.qq.com reqCookie:// {reqCookie.json} # modify request form www.qq.com params:// {form.json}

JSON objects can exist in local files, Values in the interface, or inline into the Rules configuration. For more information, please see the implementation principle and data format.

For full functionality, see the list of protocols.

Modify response

The following features are supported through domain name, path and regular matching method. For convenience, only take domain name matching method as an example, and others are the same:

# modify response status code www.qq.com statusCode://500 # the request will not be sent to the backend server Can be used to simulate 4xx, 5xx request www.qq.com replaceStatus://404 # modify statusCode# add response header www.qq.com resHeaders:// (x-res-a=1&x-res-b=a%20b) # modify response type (shortcut method to modify response type) www.qq.com resType://text/plain # or: www.qq.com resType://text# request to replace www.qq.com https://www. Baidu.com# local replacement (directory separator in windows can be used with `\` You can also use `/`) www.qq.com file://E:\xxx # equivalent to: file://E:/xxx www.qq.com# Mac or Linuxwww.qq.com file:///User/xxx/test# if you want to continue the request online for a request that does not have a corresponding file locally. You can use www.qq.com x file://E:\xxx# to locally replace jsonpwww.qq.com tpl://E:\ xxx.json # xxx.json: {callback} ({"ec": 0}) www.qq.com xtpl://E:\ xxx.json # xxx.json: {callback} ({"ec": 0}) # inject html, css, Js (whistle will automatically be encapsulated and injected according to the response type) www.qq.com html://htmlFilewww.qq.com css://cssFilewww.qq.com js://jsFile

The JSON object or injected text can exist in a local file, a Values in the interface, or inline into the Rules configuration

Set up proxy

The following features are supported through domain name, path and regular matching method. For convenience, only take domain name matching method as an example, and others are the same:

# http proxy www.qq.com proxy://127.0.0.1:8888 # is equivalent to: proxy://127.0.0.1:8888 www.qq.com# setting multiple proxy://127.0.0.1:8888 www.qq.com / google/ / facebook/# socks proxy www.qq.com scoks://127.0.0.1:1008 # is equivalent to: socks://127.0.0.1:8888 Www.qq.com# sets up multiple socks://127.0.0.1:1008 www.qq.com / google/ / facebook/# pac scripts at the same time # sets the office network pac script (if whistle.txpac is installed Do not need to set up) /. / pac:// http://txp-01.tencent.com/proxy.pac# set up the office network pac script (if whistle.txpac is installed, it does not need to be set) /. / pac:// http://txp-01.tencent.com/proxy_devnet.pac

For full functionality, see the list of protocols.

Mobile debugging

Open the Online button in the upper right corner of the whistle configuration interface to obtain the ip and port of the current whistle, and the mobile device configures the proxy according to the corresponding ip and port (make sure that the mobile device and PC are in the same network segment). If you still cannot access it after configuration, you may need to turn off the firewall or set a whitelist.

# weinre (debug web page DOM structure) www.qq.com weinre://test# log (output web page console printed log) www.qq.com log:// {test.js}

For more information, see: weinre, log

For full functionality, see the list of protocols.

Other functions

The following features are supported through domain name, path and regular matching method. For convenience, only take domain name matching method as an example, and others are the same:

# disable cache www.qq.com disable://cache# ignore rule www.qq.com filter://rule | host | https

For full functionality, see the list of protocols.

Extension and application of plug-in

Whistle supports extending functionality through Node modules. For more information, please see plug-in Development.

Some applications of plug-ins:

HTTP proxy server function: imweb local proxy imwebproxy (the functions of Pb and CMEM correspond to two whistle plug-ins whistle.imwebproxy and whistle.cmem respectively)

Extended protocol function: imweb front-end local debugging environment whistle.imwebenv

Extended interface function: whistle.websocket

On the cross-platform web debugging tool whistle how to share here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.