背景

常规移动端 web 开发，经常会在PC下使用 chrome 来模拟，基本没有太大差别。但日常开发中经常出现场景：

• 开发的需求经常是微信或 QQ 内打开H5页面，登录使用微信或 QQ 来已有的登录态( QQ 打开使用 QQ 登录态，微信使用微信授权登录)，这时PC上无法模拟登录，登录后的流程无法在pc上模拟，会需要在手机端调试；
• 或者是页面会投放到某些 app 中(使用 QQ 或微信登录，要使用应用中有登录态)，但需要开发测试完成后才能加到 app 中( app 没有测试环境入口)，这时会替换已有的一些H5页面作为调试的入口；
• 有时一些使用的移动端 js 库出现异常，无法直接修改调试，但又要对线上文件进行调试。

在以上开发场景时，没有抓包和页面本地替换来开发调试都十分麻烦。以下介绍下我用过的工具：

win下的抓包替换调试工具

fiddler(抓包，代理) + 插件 willow (页面替换和域名hosts设置)， win 下使用简单方便， win 下开发组内基本都是用这个。

mac下的抓包替换调试工具

charles(收费) 图形化界面，没 fiddler 好用，用了几次不太顺手，关键收费，想免费需破解。

linux，win，mac通用的抓包替换调试工具

nproxy(代理)阿里前端大牛写的命令行工具 + wireshark (抓包)图形，linux，macx 下经常使用。

#nproxy安装：使用npm安装即可[-g 全局安装]
$ npm install -g nproxy
#拷贝重定向的文件模板，根据模板做相应修改，命令行下会高亮替换的链接
$ cp /usr/lib/node_modules/nproxy/replace-rule.sample.js ./
#常用参数 -p 设置代理端口(默认的监听端口为8989)，-l 加载配置文件，-d 开启调试功能， -h 查看命令帮助
$ nproxy -p 8888 -l replace-rule.sample.js -d
[INFO] NProxy started on 8888! 
#显示连接successfully说明手机连接代理成功，就可以调试了．
[INFO] connect to https server successfully! 

• 用 wireshark 来抓 http 请求，分析响应的数据。
• 测试的手机和电脑(要有无线网卡)连到相同网段，手机的代理设置成电脑的 ip 和端口就可以调试了。