轩枫阁

首页 / Web前端 / 移动前端 / 移动端 / 使用Fiddler抓包和调试移动web页面

使用Fiddler抓包和调试移动web页面

前言

本文将介绍如果通过Fiddler,将移动端访问的请求代理至PC机(即抓包),便于开发和调试移动web页面。

常用于:查看请求、使用本地资源文件直接调试线上网页、更改页面参数、H5开发及bug调试。

原理图

fiddler-proxy

简单说明

  • 手机和PC接入同一个网络,通常是同一个wifi(可以用PC创建一个wifi,工具如:全民wifi、无线网卡)
  • 打开Fiddler中的网络监听,端口设为8888
  • 将手机的网络代理服务器设置为PC的IP,端口设为8888
  • 通过手机的http请求都会经过Fiddler,于是我们可以根据需要设置该请求是用本地文件代理或者直接请求服务器,并能看到http请求

具体教程

设置Fiddler

  1. 打开Fiddler,执行菜单栏 Tools -> Fiddler Options 打开设置界面
  2. 切换到Connections选项卡,如图设置和勾选
    fiddler-proxy-set-fiddler
  3. 如果要捕获https的请求,切换到HTTPS选项卡,勾选对应的选项

获取PC的IP地址

方法一

鼠标hover至Fiddler右上角的网络图标,查看本机IP,如图:192.168.1.107。注意,连上同一wifi后,需手机和PC在同一IP段内才能正常抓包。

mbdevipaddress

 

方法二

  • 打开命令行工具,运行 ipconfig
  • 无线局域网的IP地址,即我们需要的地址,这里是 172.27.23.1

fiddler-proxy-get-ip

设置iPhone代理

  • 设置 -> 无线局域网,点击当前连接的wifi
  • 滚动到HTTP代理栏,选择 “手动”,服务器填写PC的IP地址,端口号填写在Fiddler中设置的端口号,即8888

fiddler-proxy-iphone

设置Android代理

  • 设置 -> WLAN,长按当前连接的wifi,点击修改网络
  • 勾选“显示高级选项”,代理选择手动,代理服务器主机名填写PC的IP地址,代理服务器端口设为8888,点击保存

fiddler-proxy-android

运行截图

如果一切顺利的话,通过手机访问网页,就能在Fiddler看到访问的请求。

fiddler-proxy-run-result

抓HTTPS的数据包

对于特别注意信息安全的企业,可能会用到 HTTPS 的方式来加载网页。比如手机上访问 企业号官网 抓包效果如图:

mbdevhttps

只能看到请求,但是看不到具体的内容,需要做以下配置:

  • 安装 CertMaker for iOS and Android 用来抓HTTPS的数据包;
  • 打开Fiddler,点击菜单栏上的 Tools – Fiddler Options – HTTPS,勾选上Decrypt HTTPS traffic ,然后重启Fiddler;
  • 打开手机,访问本机IP+8888,例如:192.168.1.107:8888, 点击 You can download the FiddlerRoot certificate 按照提示,在手机上安装证书,重启手机浏览器。

再访问企业号官网:https://qy.weixin.qq.com,完成!

mbdevhttpsres

参考自:如何使用Fiddler调试移动web页面移动前端开发基础与优化

101/470
103/470

相关阅读

文章评论

  • fidder现在没用了.用Charles.这个感觉是目前用的最好的一个.
    手机和电脑,都可以抓
    望博主有空看看.比fidder好用多了

    • 好的,感谢[嘻嘻]

  • 有没有微信号可以看到这些个文章,很厉害,学到很多东西

    • 暂时还没有,正在规划公众号中[嘻嘻]

      • 昨天找了 还真有轩枫阁这个公众号,不过里面没什么东西就是了

        • [拜拜]那个是我的测试号

  • 优美文章www.shanjuetang.cn,想和贵站交换友情链接,如果博主觉得可以,欢迎回访~ 谢谢~

    • 不符合哈

  • 使用Fiddler抓包和调试移动web页面

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子