高效前端优化工具--Fiddler入门教程

简介: 简介: Fiddler是用C#编写的一个免费的HTTP/HTTPS网络调试器。Fiddler是以代理服务器的方式,监听系统的网络数据流动英语中Fiddler是小提琴的意思,Fiddler Web Debugger就像小提琴一样,可以让前端开发变得更加优雅。

简介:

Fiddler是用C#编写的一个免费的HTTP/HTTPS网络调试器。Fiddler是以代理服务器的方式,监听系统的网络数据流动英语中Fiddler是小提琴的意思,Fiddler Web Debugger就像小提琴一样,可以让前端开发变得更加优雅。

它可以做什么?

Fiddler是以代理服务器的方式,监听系统的网络数据流动,并在ie, 火狐下都可以安装哦(这个是最好的特点 呵呵)

  1. 它能 够记录所有的你电脑和互联网之间的http通讯,Fiddler 可以也可以让你检查所有的http通讯,设置断点,以及Fiddle 所有的“进出”的数据(指cookie,html,js,css等文件,这些都可以让你胡乱修改的意思)
  2. Fiddler还提供了清除IE缓存、请求构造器、文本转换工具等等一系列工具,对前端开发工作很有价值。

下载和安装

  1. 官方网站免费下载Fiddler。(英文版)
  2. 下载汉化版本(本人推荐,哥哥英文不好,重点推荐汉化版)点击下载汉化版:

工作原理:

默认情况下:Fiddler监控客户端浏览器所有http数据流,如果你设置了IE浏览器,那么IE浏览器所有的http请求都会被Fiddler监控。

工作原理如下图:

图片1

解释:

作为系统代理,所有的来自微软互联网服务(WinInet)的http请求再到达目标Web服务器的之前都会经过Fiddle,同样的,所有的Http响应都会在返回客户端之前流经Fiddler。当你关闭Fidder的时候,它就会自动从系统注册表中移出,减少资源浪费。当你关闭Fiddler的时候,它就会自动从系统注册表中移出,减少系统资源浪费(这个功能很好啊 赞一个)

firefox下配置Fiddler

作为开发web开发人员常使用的浏览器肯定非firefox 莫属了,下面是在火狐下配置fiddler。

  1. fiddler 在安装和第一次运行之后会的我的文档中生成配置文件,其中在scripts目录下有BrowserPAC.js

QQ截图20111107181126

    2. 配置火狐

打开firefox 在选项/高级/网络/自动代理配置/填上:file:///C:/Users/caiyou/Documents/Fiddler2/Scripts/BrowserPAC.js

ff

 

***********************************安装ok了,下面就要测试一下了

fiddler界面

界面列表

1

初次认识一下软件界面:

内容我就不说了,因为是汉化版,只要小学毕业,基本上都认识,所以说还是汉化好。

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

------------------------------------------------------------------------------

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

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

 
请求过程中暂停

 
返回过程中暂停

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

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

 
返回的内容类型是HTML

 
返回的内容类型是图片

 
返回的内容类型是Javascript

 
返回的内容类型是CSS

 
返回的内容类型是XML

 
普通的成功的返回

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

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

 
返回内容为一个证书请求

 
返回内容是服务器错误

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

------------------------------------------------------------------------------------------

统计功能

tj

选中左侧http请求,右侧会相应的统计出累积信息

还有一些其他功能,汉化版没有语言障碍,大家可以一个个尝试。

 

HTTP性能概述

fiddle毕竟只是测试工具,如果要想进行web前端优化,肯定要知道一下专业术语和优化策略,

下面推荐在下的几篇网页优化的文章:

  1. 高性能建站之前端优化篇
  2. 网站优化--让你的网页飞起来
  3. 让网站飞起来01---浏览器缓存技术

如果你喜欢本博客可以选择分享,或者支付宝微支付:支付宝担保交易购买支付宝担保交易购买


知识共享许可协议本文基于署名-非商业性使用 3.0许可协议发布,欢迎转载,演绎,但是必须保留本文的署名:PHP淮北(蔡友):http://www.cnblogs.com/phphuaibei,也可以邮件与我联系

目录
相关文章
|
10月前
|
缓存 移动开发 Rust
前端构建工具 Mako 开源了
Hi,我是 sorrycc,Mako 的主要负责人之一,也是 Umi、Dva、Father 等库的作者。 很开心,Mako 终于开源了! Github 地址:https://github.com/umijs/mako/ 今天和大家正式介绍下他。
402 3
|
4月前
|
JSON 人工智能 前端开发
前端开发中使用whistle代理工具
Whistle是一款强大的代理工具,相比Charles、Fiddler更轻量且功能丰富。它适用于前端开发中的多种场景,如接口数据Mock、接口代理、静态资源代理等。通过简单的规则配置,可将接口指向本地JSON文件,解决跨域问题,或代理静态资源以满足特定域名访问需求。此外,Whistle还支持本地端口间转发与移动端请求抓包,搭配SwitchyOmega插件使用效果更佳。需注意,使用前请确保已安装Node环境并参考官方文档完成基础配置。
|
9月前
|
前端开发 JavaScript API
探索React Hooks:前端开发的革命性工具
【10月更文挑战第5天】探索React Hooks:前端开发的革命性工具
|
6月前
|
机器学习/深度学习 人工智能 自然语言处理
DeepSeek Artifacts:在线实时预览的前端 AI 编程工具,基于DeepSeek V3快速生成React App
DeepSeek Artifacts是Hugging Face推出的免费AI编程工具,基于DeepSeek V3,支持快速生成React和Tailwind CSS代码,适合快速原型开发和前端组件构建。
1877 39
DeepSeek Artifacts:在线实时预览的前端 AI 编程工具,基于DeepSeek V3快速生成React App
|
7月前
|
人工智能 前端开发 小程序
2024年12月30日蜻蜓蜻蜓AI工具系统v1.0.0发布-优雅草科技本产品前端源代码已对外开源可免费商用-优雅草老八
2024年12月30日蜻蜓蜻蜓AI工具系统v1.0.0发布-优雅草科技本产品前端源代码已对外开源可免费商用-优雅草老八
245 31
2024年12月30日蜻蜓蜻蜓AI工具系统v1.0.0发布-优雅草科技本产品前端源代码已对外开源可免费商用-优雅草老八
|
5月前
|
人工智能 自然语言处理 前端开发
VSCode AI提效工具,通义灵码前端开发体验
通义灵码2.0是一款强大的VS Code插件,安装简便,图标易记。其亮点包括接入deepseek-v3/r1模型,支持智能问答、AI编程、代码优化及贴图提问;多语言和编辑器支持;个性化使用满足不同需求。个人版完全免费,节省12%开发时间。对比1.0版本,2.0在功能实现上更加完善,尤其在前端项目中表现出色,根据需求描述生成完整项目结构和详细代码,极大提升开发效率。
339 0
|
7月前
|
前端开发 JavaScript 开发者
前端项目代码规范工具 (ESLint. Prettier. Stylelint. TypeScript)
前端项目代码规范工具 (ESLint. Prettier. Stylelint. TypeScript)
412 4
|
8月前
|
前端开发 数据处理 Android开发
Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍
本文深入探讨了Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍,以及具体操作步骤、常见问题解决、高级调试技巧、团队协作中的调试应用和未来发展趋势,旨在帮助开发者提高调试效率,提升应用质量。
199 8
|
8月前
|
监控 前端开发 JavaScript
前端稳定性工具-Sentry
【11月更文挑战第9天】Sentry 是一个开源的错误和性能监控平台,支持多种编程语言和框架。它能够捕获前端应用中的各种错误和性能问题,提供详细的错误信息和用户行为关联,帮助开发团队快速定位和解决问题,优化应用性能。但需注意隐私保护、数据准确性和成本控制。
621 3
|
8月前
|
前端开发 JavaScript API
前端开发的秘密武器:这些工具让你轻松应对各种复杂动画效果!
【10月更文挑战第30天】前端开发中,动画效果为页面增添了无限生机。CSS3的@keyframes规则和JavaScript动画库如GSAP、Anime.js等,使开发者能轻松实现从简单到复杂的动画效果。掌握动画原理和设计原则,结合工具和库,可以创造出既美观又实用的动画,提升用户体验。
167 4