抓包神器 whistle快速入门我正在参与掘金创作者训练营第4期，点击了解活动详情，一起学习吧！ whistle简介类

我正在参与掘金创作者训练营第4期，点击了解活动详情，一起学习吧！

whistle简介

类似的工具有Windows平台上的Fiddler，主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应，也可以作为HTTP代理服务器使用，不同于Fiddler通过断点修改请求响应的方式，whistle采用的是类似配置系统hosts的方式，一切操作都可以通过配置实现，支持域名、路径、正则表达式、通配符、通配路径等多种匹配方式，且可以通过Node模块扩展功能：

安装

安装node，对于前端基本都有安装
安装whistle

npm install -g whistle

启动

w2 start  //启动



w2 restart // 重启



w2 stop // 停止



w2 run  // 调试模式启动whistle(主要用于查看whistle的异常及插件开发)

常见配置

# 配置本地服务代理， 方便本地开发和调试
127.0.0.1:8008 v.test.com

127.0.0.1:8080 lg.test.com

127.0.0.1:8082 la.test.com



# 配置weinre相关   斜杠后面是对应的名字  同一局域网内进行手机页面真机调试的神器

# /https://m.test.com/yj/subject?.+/   weinre://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





# 第三方放过拦截

**.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/

# 静态资源匹配

static.test.com disable://intercept

image.yunjiweidian.com   disable://intercept

# m.test.com   disable://intercept





# 正则匹配对应的页面  并指定返回本地的替代页面 本地文件替换有时候会引起跨域问题，可以用模板代替

# /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





# 正则匹配接口  并返回希望返回的数据

# /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 



# 配置weinre相关   斜杠后面是对应的名字

# /https://m.test.com/yj/subject?.+/ weinre://test   



# 配置文件拦截

# /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}

}

手机代理配置

代理本地服务的时候

本地浏览器配置

本地浏览器配置需要第三方插件配合使用，可以可以设置代理服务器就能使用。官方提供的是插件是

{

    "url": "${url}",

    "port": "${port}",

    "version": "${version}",

    "query": "${query}", // 相当于 location.search ，如果 url 里面没有 ? 则为空字符串

    "search": "${search}", // 相当于 location.search ，如果 url 里面没有 ? 则为空字符串

    "queryString": "${queryString}",  // 相当于 location.search ，但如果 url 里面没有 ? 则为 ?

    "searchString": "${searchString}",  // 相当于 location.search ，但如果 url 里面没有 ? 则为 ?

    "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}"

}

常见的接口代理

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

makeOrderItemCheck.json

{"currentTimeMs":1644806139735,"errorCode":1,"errorMessage":"未知错误"}

小结

集成的功能非常适合我们平时的开发习惯，基本能满足前端开的大部分需求，对前端来说基本都会在电脑安装node,非常适合前端使用
可以进行插件开发，对程序员比较友好，所有的功能都能非常直观的看见配置文件，符合程序员的开发习惯。在我们做其他的
直接通过浏览器就能看到对应的效果，非常的方便易用

抓包神器 whistle快速入门

whistle简介

推荐理由

安装

启动

常见配置

手机代理配置

本地浏览器配置

常见的接口代理

小结