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

简介:

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监控。

工作原理如下图:

解释:

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

firefox下配置Fiddler

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

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

    2. 配置火狐

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

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

ps:

园友 eEhdsa的友情提示:火狐下设置端口为8888 (127.0.0.1 : 8888)就可以被fiddler抓到了,这是fiddler默认端口,当然你有改过那肯定不是这个了..,本人测试,可以使用,当然前提是你端口没有被占用,再次表示很感谢@

fiddler界面

界面列表

初次认识一下软件界面:

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

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

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

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

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

 
请求过程中暂停

 
返回过程中暂停

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

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

 
返回的内容类型是HTML

 
返回的内容类型是图片

 
返回的内容类型是Javascript

 
返回的内容类型是CSS

 
返回的内容类型是XML

 
普通的成功的返回

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

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

 
返回内容为一个证书请求

 
返回内容是服务器错误

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

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

统计功能

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

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

HTTP性能概述

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

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

    1. 高性能建站之前端优化篇
    2. 网站优化--让你的网页飞起来
    3. 让网站飞起来01---浏览器缓存技术
时间: 2024-08-25 07:55:51

高效前端优化工具--Fiddler入门教程的相关文章

(转)前端构建工具gulp入门教程

前端构建工具gulp入门教程 老婆婆 1.8k 2013年12月30日 发布 推荐 10 推荐 收藏 83 收藏,20k 浏览 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具,一步步教你上手Gulp.不要怕,它其实很简单,我会分为五步向你介绍gulp并帮助你完成一些惊人的事情.那就直接开始吧. 第一步:安装Node 首先,最基本也最重要的是,我们需要搭建node环境.访问http://nodejs.org,然后点击大大的绿色的install按钮,下载完成后直接运行程序,

【转载】前端构建工具gulp入门教程

文章出自:http://segmentfault.com/a/1190000000372547 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具,一步步教你上手Gulp.不要怕,它其实很简单,我会分为五步向你介绍gulp并帮助你完成一些惊人的事情.那就直接开始吧. 第一步:安装Node 首先,最基本也最重要的是,我们需要搭建node环境.访问http://nodejs.org,然后点击大大的绿色的install按钮,下载完成后直接运行程序,就一切准备就绪.npm会随着安装

前端构建工具gulp入门教程(share)

参考自:http://segmentfault.com/a/1190000000372547 资源: npm上得gulp组件 gulp的Github主页 官方package.json文档 gulp中文官网 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具,一步步教你上手Gulp.不要怕,它其实很简单,我会分为五步向你介绍gulp并帮助你完成一些惊人的事情.那就直接开始吧. 第一步:安装Node 首先,最基本也最重要的是,我们需要搭建node环境.访问http://node

前端构建工具gulp入门教程

新建Gulpfile文件,运行gulp 安装好gulp后我们需要告诉它要为我们执行哪些任务,首先,我们自己需要弄清楚项目需要哪些任务. 检查Javascript 编译Sass(或Less之类的)文件 合并Javascript 压缩并重命名合并后的Javascript 安装依赖 npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev 新建gulpfile文件 现在,组件都安装完毕,我们需要新建

版本控制工具 GIT入门教程

GIT 在团队中的中作流程 1.每个程序员在自己的分支上进行开发 2.主程序猿/Leader合并程序员程序 3.程序员之间也可以对一下提交冲突进行合并 下载和安装 GIT官方网址:http:// git - scm.com 具体怎么装,一直点下一步就是了(PS:windows) 创建一个库 启动git bash,由于是刚刚安装,所以还没有任何工程库 创建一个目录 mkdir gitproject 进入gitproject目录 cd gitproject 初始化工程库 git init 系统给出提

实用PHP依赖管理工具Composer入门教程

PHP依赖管理工具Composer入门教程 Composer 是 PHP 的一个依赖管理工具.它允许你申明项目所依赖的代码库,它会在你的项目中为你安装他们. 依赖管理 Composer 不是一个包管理器.是的,它涉及 "packages" 和 "libraries",但它在每个项目的基础上进行管理,在你项目的某个目录中(例如 vendor)进行安装.默认情况下它不会在全局安装任何东西.因此,这仅仅是一个依赖管理. 这种想法并不新鲜,Composer 受到了 node

前端项目自动化构建工具——Webpack入门教程

参考资料:https://www.webpackjs.com/(中文文档)   https://www.webpackjs.com/(官方文档) 首先有必要说明一下,本文侧重讲解webpack基本配置属性,不附带实例,将会以通俗易懂的形式地讲解:如若需要实例进行相关练习,可将本文作为理论基础: Webpack是前端项目自动化构建工具,本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构

前端框架React Js入门教程【精】

现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略ReactJS的风采吧~~ 章有点长,耐心读完,你会有很大收获哦~ 一.ReactJS简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用

优雅高效的MyBatis-Plus工具快速入门使用

https://www.cnblogs.com/fingerboy/p/6657118.html目前正在维护的公司的一个项目是一个ssm架构的java项目,dao层的接口有大量数据库查询的方法,一个条件变化就要对应一个方法,再加上一些通用的curd方法,对应一张表的dao层方法有时候多达近20个,果断决定优化一下,经过一番探索,发现了一个mybatis的好伴侣,mybatis-plus,上手容易,简洁高效,这里有官方的文档入口,文档比较详细,本来不想在重复文档内容,但是关上文档,看着自己改过的项