Fiddler 跟踪数据包

随着 HTML5 的急速增长,现在越来越多的人,开始涉及到移动终端的 Web 开发领域,但手机端始终没有 PC 端这么多的调试工具。即使 PC 端浏览器模拟 user-agent 进行开发,也可能会发生移动终端和 PC 端浏览器渲染不一致的问题。

所以,最好还是在真正的手机端开发调试,但,怎么抓包呢?

今天,就向大家介绍 Fiddler 如何抓取 Android 手机浏览器上的数据包。

众所周知,Fiddler 是通过代理来实现数据捕获的。对 Android 手机来说,也是通过将网络连接的代理指向 PC 机的 Fiddler 端口,来实现数据包的拦截。

下面,我以我的一次实践为例,向大家介绍如何操作。

环境:Windows7、moto mb860(android 2.3.4)

1、首先,确保安装 Fiddler 的电脑和手机在可以互相访问的局域网内。因为要将手机的代理指向 PC 机,不能互相访问是不行的。

2、Fiddler 开启远程连接。Fiddler 主菜单 Tools -> Fiddler Options…-> Connections 页签

将允许远程电脑连接打勾;上面的的端口号无需改变,保持默认即可。

打勾后,请重启一下 Fiddler,这一步很重要。

3、在设置手机的代理之前,我们需要先获得安装 Fiddler 这台电脑在局域网内的 IP。在手机上设置代理服务器的时候会用到,开始菜单打开运行窗口(快捷键 Win + R),输入 cmd 回车,进入 Windows 命令行工具,输入 ipconfig 回车,结果形如下图:

你实际的局域网 IP 肯定跟我的不一样,不过不用担心,你把这个 IP 地址记下来。

4、现在,我们需要设置手机的代理。

打开系统设置

进入 Wifi 设置

找到当前正在使用的 Wifi 连接,长按会出来快捷菜单

选择“修改网络”,或者“代理服务器”,进入编辑界面

将使用代理服务器打勾,并填上刚才在 PC 机上 ipconfig 获得的 IP 地址 192.168.1.95,端口号填 Fiddler 默认的 8888

进入无线和网络模块

代理例外地址不用管了,留空吧。

点保存,就完成了代理的设置。

5.现在,我们就可以尝试下配置是否好了,打开遨游浏览器

与此同时,我们看看 Fiddler 上的数据抓包结果吧

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android知识点总结

01-React搭建react环境及SCSS的配置

70720
来自专栏君赏技术博客

怎么让APP`iTunes Connect`名字和在设备上显示的名字是一致的

在iTunes Connect和设备上显示的名字是一致的,因为避免混淆。对于WatchKit的app,对于WatchKit应用程序,这意味着在iTunes Co...

30230
来自专栏宋凯伦的技术小栈

Angular JS + Express JS入门搭建网站

  3月份开始,接到了新的任务,跟UI开发有关,用的是Angular JS,Express JS等技术。于是周末顺便学习下新技术。   组里产品UI架构如下: ...

31060
来自专栏前端架构

再谈DOMContentLoaded与渲染阻塞—分析html页面事件与资源加载

浏览器的多线程中,有的线程负责加载资源,有的线程负责执行脚本,有的线程负责渲染界面,有的线程负责轮询、监听用户事件。

2K150
来自专栏前端架构与工程

Node.js建站笔记-使用react和react-router取代Backbone

斟酌之后,决定在《嗨猫》项目中引入react,整体项目偏重spa模式,舍弃部分server端的模板渲染,将一部分渲染工作交给前端react实现。 react拥有...

27190
来自专栏Python攻城狮

Django教程(二)- Django视图与网址进阶1. HTML表单2.CSRF3.代码操作

HTML 表单用于搜集不同类型的用户输入。 表单是一个包含表单元素的区域。 表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、...

10740
来自专栏假装我会写代码

highlight.js 在 Vue 中使用的一点儿经验

30720
来自专栏BestSDK

开发微信小程序,必知的40个小技巧

微信小程序开发者和开发需求者必读的40条技巧分享: Q:为什么脚本内不能使用window等对象 A:页面的脚本逻辑是在JsCore中运行,JsCore是一个没有...

63330
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

教你轻松修改React Native端口

告诉大家一个好消息,为大家精心准备的React Native视频教程发布了,大家现可以看视频学React Native了。 当我们运行一个React Na...

44440
来自专栏HaHack

学习 React Native for Android:环境搭建

11920

扫码关注云+社区

领取腾讯云代金券