使用Fiddler提高前端工作效率 (介绍篇)
1. Fiddler 是什么?
Fiddler是用C#编写的一个免费的HTTP/HTTPS网络调试器。英语中Fiddler是小提琴的意思,Fiddler Web Debugger就像小提琴一样,可以让前端开发变得更加优雅。
Fiddler是以代理服务器的方式,监听系统的网络数据流动。运行Fiddler后,就会在本地打开8888端口,网络数据流通过Fiddler进行中转时,我们可以监视HTTP/HTTPS数据流的记录,并加以分析,甚至还可以修改发送和接收的数据。Fiddler还提供了清除IE缓存、请求构造器、文本转换工具等等一系列工具,对前端开发工作很有价值。
Fiddler是以代理服务器的方式,监听系统的网络数据流动。运行Fiddler后,就会在本地打开8888端口,网络数据流通过Fiddler进行中转时,我们可以监视HTTP/HTTPS数据流的记录,并加以分析,甚至还可以修改发送和接收的数据。Fiddler还提供了清除IE缓存、请求构造器、文本转换工具等等一系列工具,对前端开发工作很有价值。
2. 下载和安装Fiddler
- 安装.net framework 2.0以上版本
- 从官方网站免费下载Fiddler。
Firefox中用Fiddler,可以下载一个插件:Fiddler开关
- 安装.net framework 2.0以上版本
- 从官方网站免费下载Fiddler。
Firefox中用Fiddler,可以下载一个插件:Fiddler开关
3. Fiddler的界面和功能
列表

左侧是数据列表,以不同的图标区分数据类型和状态,以下是图标对应的含义:

正在将请求数据发往服务器

正在从服务器下载返回数据

请求过程中暂停

返回过程中暂停

请求中使用了HTTP HEAD方法; 返回中应该没有body内容

请求中使用了HTTP CONNECT方法,建立HTTPS连接通道

返回的内容类型是HTML

返回的内容类型是图片

返回的内容类型是Javascript

返回的内容类型是CSS

返回的内容类型是XML

普通的成功的返回

返回内容为 HTTP/300,301,302,303 or 307 跳转

返回内容为HTTP/304: 使用本地缓存

返回内容为一个证书请求

返回内容是服务器错误

请求被客户端、Fiddler或服务器中断

![]() |
正在将请求数据发往服务器 |
![]() |
正在从服务器下载返回数据 |
![]() |
请求过程中暂停 |
![]() |
返回过程中暂停 |
![]() |
请求中使用了HTTP HEAD方法; 返回中应该没有body内容 |
![]() |
请求中使用了HTTP CONNECT方法,建立HTTPS连接通道 |
![]() |
返回的内容类型是HTML |
![]() |
返回的内容类型是图片 |
![]() |
返回的内容类型是Javascript |
![]() |
返回的内容类型是CSS |
![]() |
返回的内容类型是XML |
![]() |
普通的成功的返回 |
![]() |
返回内容为 HTTP/300,301,302,303 or 307 跳转 |
![]() |
返回内容为HTTP/304: 使用本地缓存 |
![]() |
返回内容为一个证书请求 |
![]() |
返回内容是服务器错误 |
![]() |
请求被客户端、Fiddler或服务器中断 |
查看器
利用查看器提供的很多形式,我们可以查看数据流的内容。

请求构建器(Request Builder)
可以创建任意数据的请求

过滤器
过滤器可以对左侧的数据流列表进行过滤,我们可以标记、修改或隐藏某些特征的数据流。

AutoResponse功能
这个功能可以算的上是Fiddler最实用的功能,可以让我们修改服务器端返回的数据,例如让返回都是HTTP404或者读取本地文件作为返回内容。我们将在实例中介绍利用AutoResponse功能。

文本编码和解码
提供了常用的一些文本编解码的转换。

此外,还可以对两个数据流进行比较
Fiddler可以保存和打开“SAZ”格式的文件,这样就可以将监听到的数据流保存下来,下次再重新打开分析。可以利用FiddlerCap——一个专门用来录制保存SAZ的小工具——保存SAZ文件。SAZ文件可以设置密码保护,比较贴心。
使用Fiddler提高前端工作效率 (介绍篇)的更多相关文章
- 使用Fiddler提高前端工作效率 (实例篇)
上篇中,我们对Fiddler Web Debugger有了简单的接触,也许你已经开始在用Fiddler进行HTTP相关的调试,在这一篇,我们将通过一个实例了解Fiddler的神奇魔法. 在我们前端开发 ...
- html样式表极大地提高了工作效率
样式表极大地提高了工作效率 样式表定义如何显示 HTML 元素,就像 HTML 3.2 的字体标签和颜色属性所起的作用那样.样式通常保存在外部的 .css 文件中.通过仅仅编辑一个简单的 CSS 文档 ...
- Android 上能提高学习工作效率的应用
在知乎上有朋友问 Android 上能提高学习.工作效率的应用有哪些?我给他们的推荐获得了最多赞同.以后会不断完善更新此贴. Any.do :规划日程,各平台都有. Evernote:记笔记,各平台都 ...
- 程序员如何巧用Excel提高工作效率 第二篇
之前写了一篇博客程序员如何巧用Excel提高工作效率,讲解了程序员在日常工作中如何利用Excel来提高工作效率,没想到收到很好的反馈,点赞量,评论量以及阅读量一度飙升为我的博客中Top 1,看来大家平 ...
- 利用 Ant 和 Eclipse 有效地提高部署工作效率
读者定位为具有 Java 和 Ant 使用经验的开发人员. 读者可以学习到如何使用 Ant 解决一些多用户开发环境中,根据不同的目标环境编译成不同部署包的问题. 工作场景 现在有一个 web 项目,是 ...
- 【Java】能提高日常工作效率的一些Java函数
自编工具总是临时抱佛脚来得顺溜,宜常备手边以提高工作效率: package com.hy; import java.io.File; /** * 日常工作常用的一些工具方法 * @author 逆火 ...
- Snipaste - 可以提高你工作效率的截图软件
使用Snipaste提高您的工作效率 Snipaste是一个简单但功能强大的剪切工具,还允许您将屏幕截图固定在屏幕上.下载并启动应用程序,按F1开始剪切,然后按F3将其粘贴为浮动窗口.而已! 您还可以 ...
- 提高前端开发效率的N种方法
一.使用固定的html模板和css公共样式 事先把模板建好,每次需要用的时候直接拿来就行,不再需要为浏览器兼容问题考虑太多时间 这里我整理了一套,希望对大家有帮助:http://www.cnblogs ...
- gulp + browserSync 一起提高前端开发效率吧!
前端开发的时候,每次修改代码后,要移动鼠标到浏览器选中再刷新查看效果,不知觉间我们的加班的时间又增加了0.5s, 真是罪孽!所以在使用gulp之后,就一直对能自动监听文件刷新页面的browserSyn ...
随机推荐
- GNU LIBC源代码学习之strcmp
比較两个字符串 我的代码块 #include <string.h> int my_strcmp(const char* s1,const char * s2) { if((s1==NULL ...
- new的例子
12.6 编写函数,返回一个动态分配的int的vector.将此vector传递给另一个函数,这个函数读取标准输入,将读入的值保存在vector元素中.再将vector传递给另一个函数,打印读入的值. ...
- 如何实现windows和linux之间的文件传输
2010-04-25 18:10 如何实现windows和linux之间的文件传输 如果想从windows中传送大量文件到Linux中,想必会难倒部分Linux初学者,尤其是文件很大时.我曾试过在li ...
- Enable SPI 1.0 and 1.1 with device tre overlays on BeagleBone
For most people the above image means absolutely nothing, but for that one guy that has been searchi ...
- 关于Xcode7中的tbd文件
tbd 是 text-based stub libraries的意思, 是苹果在Xcode7中使用的一个技术,便于减少Xcode7中SDK的体积. 下面讲解下Xcode7如何通过tbd这个技术减少SD ...
- android activity启动的4种方式记录及打开其他应用的activity的坑
Android启动的四种方式分别为standard,singleTop,singleTask,singleInstence. standard是最常见的activity启动方式,也是默认的启动的方式. ...
- 页面常见效果js实现
2015.12.2 页面常见效果js实现 [有没有觉得很坑,[笑哭,邮箱写上]] 复习: Js内置对象: 1.浏览器对象 window document history location event ...
- Linux常用系统调用
转载 http://www.ibm.com/developerworks/cn/linux/kernel/syscall/part1/appendix.html#icomments 按照惯例,这个列表 ...
- 简单的实现QQ通信功能(四)
第四部分:主界面的设计及代码 一:效果图及界面设计 1. 效果图: 2. 界面设计: (1)上面显示自己信息用一个PictureBox和两个Label,用来显示自己的头像和昵称备注名. (2)下面用了 ...
- 使用JUnit4与JMockit进行打桩测试
1. 何为Mock 项目中各个模块,各个类之间会有互相依赖的关系,在单元测试中,我们只关心被测试的单元,对于其依赖的单元并不关心(会有另外针对该单元的测试). 比如,逻辑层A类依赖了数据访问层B类的取 ...