移动开发中Fiddler的那些事儿

本文涉及的产品
.cn 域名,1个 12个月
简介: 当我以前在调PC端网页的时候,Firefox有Firebug,Chrom也有自己的调试抓包工具,用起来很方便。

当我以前在调PC端网页的时候,Firefox有Firebug,Chrom也有自己的调试抓包工具,用起来很方便。

但是现在我要在手机上面调试页面,这个时候就没有这么方便的现成工具了。

后面发现了Fiddler,设置一下后,就能用这个来抓取手机访问页面时候的请求了。

下面是文章大纲:

  1. Fiddler配置与手机无线的配置
  2. HOST修改
  3. AutoResponder
  4. 指令
  5. 过滤Filter
  6. 插件

 

一、Fiddler配置与手机无线的配置


1、首先电脑和手机要使用同一个无线


  image.png      

image.png

 

2、配置Fiddler,单机Tools=》Fiddler Options

  image.png

 

3、配置手机无线,我的手机是Android机,IOS也是差不多的,就是加个代理和端口,主机名就是你电脑的IP地址,自己用ipconfig看下就有了。

  改好后,要重新连接一下,才能让Fiddler抓取到。


  image.png

 

二、HOST修改


我一开始调试手机网页,都是先把文件上传到绑域名的服务器上,然后再访问测试,这样效率有点低。

以前的PC网页都是在本地调试好后上传到服务器上的,现在我也想这么做,这个时候就需要在Fiddler中配置域名转向了。

1、例如用手机访问http://www.pwstrick.com/fiddler/这个页面:



  image.png


Fiddler抓取到的如下所示:


  image.png

 


2、接下来我要让http://www.pwstrick.com/fiddler/访问的是我本中的工程文件。


点击Tools=》HOSTS打开的页面如下:

  image.png

 

满心欢喜的以为域名已经转向了,用浏览器打开,duang一下是下面那个鸟样:


  image.png


 

后面我想到得在我本地Apache上面配置个虚拟目录:


  image.png


刷新下页面:弹出的内容就变成本地设置的了


  image.png


现在访问pwstrick地址的HOSTIP就变成了127.0.0.1了


  image.png

 

三、AutoResponder


刚上面的host修改,是把所有这个域名下的文件都重定向。但有的时候只需要测试某个文件,这个时候就可以用AutoResponder了。

1、将第一个和第二个打勾,第二个不打勾的话,所有页面就都不能访问啦,第二个选项的意思是不匹配的请求都保持不变。


  image.png

 

2、在下面做个匹配规则,我选的是完全匹配,这里可以用正则表达式,高大上的东西。

  image.png

  image.png

 


3、满怀期待的刷新下页面,出来了用的是demo2.js文件中的内容


  image.png

 

点击进入fiddler文档页面查看更多规则事例...

 

这个请求还可以让他延时请求,或者其他方式,选项如下:

  image.png

 

四、指令



在软件的底部有个打指令的地方,目前我用的最多的就cls,就是清屏幕,其他指令还不怎么用,我比较low,囧。点击查看fiddler官方文档

  image.png

刚查看文档,发现几个未来应该会用到的指令,这里做个小记录

 

?sometext

  image.png

  image.png


输入?pwstrick然后直接按回车就会看到搜索URL中包含pwstrick的地址。

 

=status

=method

选择响应状态=status (200、404等)或请求方法=method的会话(POST、GET等)

 

@host

选择会话中域名包含host的会话,此时按Enter键可高亮所有匹配的结果

将会把api.pwstrick.com、www.pwstrick.com等URL选中

  image.png

 

!dns hostname

进行目标域名的DNS查找,并将结果显示在LOG选项卡上

  image.png

  image.png

 


五、过滤Filter


1)过滤域名


image.pngimage.png


选项好多,这里我打算把pwstrick.com给过滤出来,然后就把那个选项打勾

接着点击Actions中的Run Filterset Now,不过滤请求的话,太多眼都看花了,随便访问个线上网站就有几十个请求,唰唰下来


  image.png

 

2)自定义请求头或响应头属性


Set request header与Set response header,设置自定义请求头与响应头。可以模拟跨域等问题。

2.jpg


坐标的是不肥请求头,右边是部分响应头,Origin与Access-Control-Allow-Origin对应了起来,必须一模一样,少个“http”都不行。

1.jpg3.jpg



六、插件


1、JavaScript Formatter

将压缩过的JavaScript脚本格式化,查看别人网站时候的压缩脚本时候用很给力

首先得要先下载这个插件然后安装,点击页面搜索到JavaScript Formatter,点击下载。

安装好后重启Fiddler,接下来邮件那个URL就会看到下图中的红色框选项,点击一下。

  image.png

接下来就能看到好看的JavaScript脚本了,不过不足的是不是彩色的,没有高亮。这个时候可以借助另外一个插件配合一下,那就是Syntax-Highlighting Add-Ons,也是在官网的插件页面搜索标题下载,下载完后就会多个SyntaxView选项,下图中的截图是我已经下载好了的画面,并且Syntax-Highlighting Add-Ons这个插件还可以做些其他功能具体可以查看文档。


  image.png        image.png

 

2、Gallery


这是看图片的一个插件,没有这个插件的话我还得复制URL,然后在浏览器中输入看图片。

我抓取了花瓣网的页面做演示:我先做了个域名过滤,旁边的Gallery一栏就会自动出来图片。

  image.png

  image.png

 

相关文章
|
移动开发 JavaScript 前端开发
移动开发中Fiddler的那些事儿
来源:http://www.cnblogs.com/strick/p/4570006.html 当我以前在调PC端网页的时候,Firefox有Firebug,Chrom也有自己的调试抓包工具,用起来很方便。 但是现在我要在手机上面调试页面,这个时候就没有这么方便的现成工具了。 后面发现了Fiddler,设置一下后,就能用这个来抓取手机访问页面时候的请求了。 下面是文章大纲:
1365 0
|
3月前
|
开发框架 Dart Android开发
移动应用开发中的创新之路:探索跨平台解决方案
【9月更文挑战第21天】在移动应用的海洋中,开发者们面临着一个不断变化的挑战——如何在多个操作系统上提供无缝的用户体验。本文将探讨跨平台开发的魅力与挑战,并深入分析Flutter框架如何成为现代开发者的利器。我们将通过实际代码示例,揭示Flutter简化开发流程、提高生产效率的秘密。从Dart语言的基础到热重载的便捷性,本文旨在为读者提供一次全面而深刻的跨平台开发之旅。
|
1月前
|
C# Android开发 虚拟化
C# 一分钟浅谈:MAUI 跨平台移动应用开发
.NET MAUI 是 Microsoft 推出的跨平台框架,支持 Windows、macOS、iOS 和 Android。本文从基础概念入手,探讨 MAUI 的常见问题、易错点及解决方案,并通过代码示例详细说明。涵盖平台特定代码、XAML 语法、数据绑定、性能优化和调试技巧等内容,帮助开发者更好地掌握 .NET MAUI。
188 55
|
2月前
|
开发框架 前端开发 Android开发
移动应用开发中的跨平台策略与实践
【9月更文挑战第34天】本文将深入探讨移动应用开发的跨平台策略,包括对React Native、Flutter和Xamarin等流行框架的比较。文章还将分享一些实用的跨平台开发技巧和最佳实践,帮助开发者在多个平台上高效地构建和维护应用。无论你是初学者还是有经验的开发者,这篇文章都会为你提供有价值的见解和指导。
|
1月前
|
开发框架 数据安全/隐私保护 开发者
Flutter 是一款强大的跨平台移动应用开发框架,本文深入探讨了其布局与样式设计
Flutter 是一款强大的跨平台移动应用开发框架,本文深入探讨了其布局与样式设计,涵盖布局基础、常用组件、样式设计、实战应用、响应式布局及性能优化等方面,助力开发者打造精美用户界面。
43 7
|
1月前
|
开发框架 Dart 前端开发
Flutter 是谷歌推出的一款高效跨平台移动应用开发框架,使用 Dart 语言,具备快速开发、跨平台支持、高性能、热重载及美观界面等特点。
Flutter 是谷歌推出的一款高效跨平台移动应用开发框架,使用 Dart 语言,具备快速开发、跨平台支持、高性能、热重载及美观界面等特点。本文从 Flutter 简介、特点、开发环境搭建、应用架构、组件详解、路由管理、状态管理、与原生代码交互、性能优化、应用发布与部署及未来趋势等方面,全面解析 Flutter 技术,助你掌握这一前沿开发工具。
58 8
|
1月前
|
前端开发 Android开发 开发者
移动应用开发的未来:探索跨平台解决方案##
在移动开发的海洋中,跨平台框架如同一艘能够穿梭于iOS和Android两大操作系统之间的航船。本文将探讨这艘航船的构造—从它的起源、它的引擎(技术架构),到它能抵达的岸边(应用场景)。我们将启航,一探究竟如何在波涛汹涌的市场中找到自己的航线。 ##
31 3
|
1月前
|
开发框架 前端开发 JavaScript
移动应用开发的未来之路:探索跨平台框架
【10月更文挑战第42天】在数字时代,移动应用已成为日常生活的一部分。本文将探讨跨平台开发框架,如React Native和Flutter,它们如何改变开发者构建应用的方式。我们将深入了解这些框架的工作原理、优势以及面临的挑战,并展望未来移动应用开发的发展趋势。通过实例分析,我们旨在为读者提供关于选择合适移动应用开发工具的见解,以适应不断变化的技术环境。
|
1月前
|
前端开发 Android开发 开发者
移动应用开发的未来:跨平台框架与原生开发的融合
【10月更文挑战第36天】本文探讨了移动应用开发领域内,跨平台框架与原生开发之间的相互作用及其未来发展趋势。通过分析Flutter和React Native等流行跨平台解决方案的优缺点,以及它们如何与传统iOS和Android开发相结合,本文揭示了一种新兴的开发模式,旨在提高开发效率并保持应用性能。
|
2月前
|
Dart Android开发 开发者
掌握跨平台移动应用开发:Flutter 的崛起
【10月更文挑战第9天】本文介绍了Flutter,一个由Google支持的开源UI工具包,专注于跨平台移动应用开发。文章详细探讨了Flutter的核心优势,如原生性能、热重载、丰富的组件及高可定制性,并提供了实施开发的步骤指南。此外,还分享了Flutter在快速原型开发、高性能应用及跨平台维护中的应用实例和实战技巧,旨在帮助开发者高效利用Flutter构建高质量移动应用。