Fiddler前端页面调试工具简易入门

前端初级选手们最常用的工具应该算是各大浏览器自带的调试工具了(就是各大浏览器们按F12调出来的那个货),作为初级选手我也是用这些调试工具进行调试,最初觉得Firefox的firebug牛逼,好用。还可以按装webdeveloper等各种插件,用起来很牛逼。后来转战chrome,发现这个浏览器用着爽啊,调试工具也不差,但是总感觉有时候有些复杂,或者力不从心,于是去网上了解大神们的调试工具,发现一款挺牛叉,简单用用推荐大家。

下面就是今天推荐的闪闪发光的工具Fiddler它可以用反向代理的身份帮助你调试线上的网站,也可以帮你调试移动端的页面,用起来真是爽爽哒。废话少说下面开始正题。

Fiddler是个啥:

Fiddler是一个http协议调试代理工具,它能够记录并检查所有你的电脑和互联网之间的http通讯,设置断点,查看所有的“进出”Fiddler的数据(指cookie,html,js,css等文件,这些都可以让你胡乱修改的意思)。

这是百度百科给的定义,单从括弧里边的解释--cookie,html,js,css等文件,这些都可以让你胡乱修改的意思--隐约可以感觉这是个可以在前端页面捣乱的熊孩子。真是因为这个这货能为了前端选手们的调试工具。

反向代理是个啥:

反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求连接的客户端,此时代理服务器对外就表现为一个反向代理服务器。

没错又是百度百科摘来的(我也很惭愧,但是没办法)。简单来说反向代理就是帮助服务器的,用户在浏览页面或者其他服务器上的资源时反向代理服务器接收用户请求并向服务器请求资源,得到资源后再反馈给用户,但是用户不知道反向代理这层的存在,感觉就是在直接访问服务器。在反向代理服务器里边我们可以做很多设置来帮助服务器减轻负担,屏蔽危害等。站在服务器的角度看反向代理服务器跟站在用户的角度看代理服务器其实感觉差不多应该。

如何利用反向代理调试:

了解了反向代理之后,当我们要调试一些线上页面时,我们打开浏览器,输入地址查看页面,这个过程实际就是用户请求服务器的过程,我们打开fiddler后,fiddler会监听我们的请求数据和接收到的数据,前面说了Fiddler是一个http协议调试代理工具,所以它能够监听所有来往数据。

由于它可以监听所有数据并且可以把这些数据在两者之间相互传递,那么它想要篡改这些内容那么它应该可以做到。就好比一个中间的传话的人,在传话时加些莫须有的内容传过去,听的一方肯定以为是另一方传来的。Fiddler也有这么个功能,可以指定本地文件替换掉从服务器传来的文件,但是浏览器并不知道,它会按照fiddler给它的数据来渲染页面,从这个角度看fiddler实际是实现了一个反向代理的功能,我们就可以利用这个功能来调试我们的线上的东西了。

看看是怎么实现:

我们拿博客园首页试一下吧,首先你得打开fiddler,然后在浏览器里边刷新博客园首页,再回到fiddler可以看到左侧列表里边有很多请求记录,找到aggsite.css这个文件,我们就是要把博客园首页的背景颜色换掉所以要找css文件,如下图:

对就是这个文件,我们右键它,然后save 好像只能open as local file才能正常下载下来(总觉的是我的方法不对,没有找到下载的方法)。下载下来保存好(我比较懒,直接放到了桌面,您随意)。

保存完,看看fiddler右侧窗口很多选项卡,找到AutoResponder并激活它。可以看到下面这么个界面:

恩,面板是空的,在左侧列表把刚才那个css文件拖到面板来,你会发现多了个文件了。下图:

接着在下面的Rule Editor 那下面的文件选择按钮那,选择我们刚刚保存在桌面的aggsite.css文件,然后save。当然记得要把上面的Enable rules选中,不然不起作用。

选中Enable rules

好了,接下来我们去编辑本地的css文件了,把body的背景色改成黄色,然后回到浏览器,刷新博客园首页。

哇擦咧,发现博客园首页背景色居然真的变成黄色了,太神奇了不是吗。好吧是我大惊小怪了,见的世面少啊还是,下面是效果。

对,设置fiddler作为反向代理调试代码就这么简单,没有什么难的。easy~   , 那接下来看看如何调试手机端页面吧。

如在移动端 调试:

大概思路就是通过把你的机器设置为手机的代理服务器,这样通过fiddler做代理实现fiddler对你手机网页的监听,这一步实现后剩下的操作就跟上面的操作一样了。既然这样,那么我们只接受下如何设置fiddler作为手机的代理。

首先需要保证你的主机和手机在同一局域网,一个网段好连通啊(我们公司不同的WiFi不是同一个段,我用我的itcode连的WiFi跟我主机不是一个,让我郁闷一阵子,后来只能又换了一个组里自己搞定WiFi)。

接下来设置一下fiddler,在tools里边找fiddler options....   在打开的面板里边找到connections 选项卡,激活后勾选Allow remote computers to connect那项,如下图:

意思就是,随便,只要你们想连都可以啊,来吧,我奉献我的带宽,看看我是不是很有奉献精神。。。。好吧~,再说就跑题了。。。。

设置好fiddler之后,查看自己机器ip地址,然后在手机上无线连接里边设置代理。

我用的罗永浩的情怀手机,点开无线里边有个高级设置,代理设置就在里边,其他的手机应该也好找。

好了,设置完,打开手机浏览器,刷一刷某个页面,在fiddler左侧的列表里看看是不是有很多的数据了,如果是手机端访问的页面啥啥的,那就ok,这个代理就设置成功了。

最后就用上面我们说的反向代理调试步骤来调试这个页面就ok了。

本文完。

ps:很多事情看起来可能有些难度,听起来也很牛逼的样子,但是当我们亲身接触一下,研究一下,发现,没想象的那么难。当然要相信牛逼的值得我们学习的东西永远都是存在的。

时间: 2024-09-28 23:08:03

Fiddler前端页面调试工具简易入门的相关文章

前端技术-调试工具(上)

页面制作之调试工具 常用的调试工具有Chrome浏览器的调试工具,火狐浏览器的Firebug插件调试工具,IE的开发人员工具等.它们的功能与使用方法大致相似.Chrome浏览器简洁快速,功能强大这里主要介绍Chrome浏览器的调试工具. 打开 Google Chrome 浏览器,通过下面任何一种方式进入开发人员工具: -点击位于浏览器用户界面右上角的"页面"下拉菜单,"更多工具"→"开发人员工具". -右键点击网页上的任一元素,在弹出菜单中选择&

前端技术-调试工具(下)

页面制作之调试工具 五.Profiles 这个主要是做性能优化的,包括查看CPU执行时间与内存占用等. 例述如下:原文地址:http://www.smashingmagazine.com/2012/06/12/javascript-profiling-chrome-developer-tools/. 你的网站正常运转.现在我们来让它运转的更快.网站的性能由页面载入速度和代码执行效率决定.一些服务可以让你的网站载入更快,比如压缩JS和CDN,但是让代码执行的更快你要做的事情.代码中很小的改动都可能

用github来展示你的前端页面吧

前言 经常会有人问我如何才能将自己做的静态页面放到网上供他人欣赏,是不是需要自己有一个服务器,是不是还要搞个域名才能访问?对于以上问题我都会回答:用github来展示你的前端页面吧. 工欲善其事,必先利其器.github是一个很好的代码管理与协同开发平台,在程序界又被称为最大的"同性交友网站".如果你不懂git,没有自己的github账户,那你就丢失了一把能够很好的展示自我,储存知识的利器. 当然知道github的人不在少数,但是大部分人可能仅知道它可以用于管理我们的项目代码,而不知道

前端页面有哪三层构成 兼容性

[HTML && CSS]1.Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义? 首先我讲讲如何触发两种模式:        加入xml头部声明可以触发IE浏览器的Quirks mode,触发之后,浏览器解析方式就和IE5.5一样,拥有IE5.5一样的bug和其他问题,行为(Javascript)也是如此.          IE6的触发        在XHTML的DOCTYPE前加入XML声明  <?xml version="1.0"

网页前端页面加载性能测试各工具可行性方案分析

网页前端页面加载性能测试各工具可行性方案分析 征对各个浏览器和工具做了测试,之所以选择的是百度首页测试,因为其比较单一,没有多层嵌套和持续加载,尽量减少其他影响,测试中发现目前有些方案是不可行的,后面征对各个测试结果给出了可行方案和不可行的建议. 1 .webbrowser(内核IE10)和IE10浏览器的比较: Webbrowser的测试方法为,先执行清除浏览器缓存,从开始导航开始计时,DocumentCompleted时间将2次触发,取最后一次的时间,按照DocumentCompleted解

Mock.js 与 fiddler 前端模拟数据与拦截请求

最近 工作需要  接触了Mock.js. Mock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试.提供了以下模拟功能: 根据数据模板生成模拟数据 模拟 Ajax 请求,生成并返回模拟数据 基于 HTML 模板生成模拟数据 http://mockjs.com/ 什么入门之类的 看官网就会~~~ Fiddler   web调试利器 便于我们调试前后端数据等. Fiddler是一个web调试代理.它能够记录所有客户端和服务器间的http请求,允许你监视,设置断点,

四: 使用vue搭建网站前端页面

---恢复内容开始--- 在搭建路由项目的时候的基本步骤 一:创建项目 安装好vue 搭好环境 (步骤在上篇博客中) 进入项目目录      cd   目录路径/ 目录名 创建项目          vue init webpack  项目名 效果: 项目文件结构:及作用 -- build // 项目构建(webpack)相关代码 | |-- build.js // 生产环境构建代码 | |-- check-version.js // 检查node.npm等版本 | |-- dev-client

前端开发调试工具记录

前端开发调试工具记录 开发工具 vs Code与Web Storm docker(docker compose:docker hub) nvm(nodejs版本管理) 调试工具 Chrome + Android /Safari + IOS(界面类) Safari偏好设置-高级-显示开发菜单=>增加开发者选项=>打开网页检视器 手机设置,safari设置,高级,打开Web检查器=>开发可以看到手机设备 手机通过ip访问网页,开发内通过点选指定窗口即可调出调试窗口. Chrome输入:chr

《逻辑思维简易入门》(第2版) 阅读笔记二

<逻辑思维简易入门>(第2版) 阅读笔记二 本周阅读的是<逻辑思维简易入门>的第三章,也就是说,本书的第一部分就已经读完了. 第三章.信念的优点 信念和负信念是人们在接受一个事物时一种心理态度,延伸来说也就是对事物的认知态度.因为我们在研究 逻辑思维的时候,都有一个前提:“以正常情况以及说话者真诚”,所以有人如果对于一件事物不做回应,我们可以认为这是一种既不相信,也不怀疑的的态度. 信念的优缺点有很多,在书中主要介绍了下面几种: 1.准确性 好的信念实在准确的表达事实,同样真的信念