最好使用机器名替换 localhost       2 fiddler 过滤"> 在Windows 8.1上使用Fiddler重定向http请求进行前端调试 - 11GX
首页 > 在Windows 8.1上使用Fiddler重定向http请求进行前端调试

在Windows 8.1上使用Fiddler重定向http请求进行前端调试

介绍:

fiddler是一个http协议调试代理工具,它能够记录并检查所有你的电脑和互联网之间的http通讯,设置断点,查看所有的“进出”Fiddler的数据(指cookie,html,js,css等文件,这些都可以让你胡乱修改)。 fiddler 要比其他的网络调试器要更加简单,因为它不仅仅暴露http通讯还提供了一个用户友好的格式。目前fiddler支持全浏览器,全操作系统,全平台。







原理:

fiddler本质就是做为web代理服务器(127.0.0.1:8888)存在 ,在启动时自动设置HTTP代理为自身地址监听所有通过的数据。

注意:

Firefox需手动设代理为127.0.0.1:8888,或者启用安装fiddler时自动安装的插件fiddler hook。

使用本机localhost测试时加"."(如:http://localhost.:2391/view/ )。



下载和安装

fiddler的官网是http://www.telerik.com/fiddler

在Windows 8.1上面我选择fiddler4下载,双击exe文件并直接安装

安装完成后,在浏览器窗口中输入

http://127.0.0.1:8888/

如果输出结果如下,说明安装成功:



查看相应的版本号为



自动重定向示例

自动重定向功能是fiddler最实用的功能,这里的Rule可以自由地设定,可以使用搜索(默认)、精确匹配(EXACT)、正则表达式匹配(REGEX)。处理方式可以选择使用文件,也可以选择合适的时间暂停数据流(*bpu、*bpafter),人工干预。通过以下几个步骤,我们演示了怎样将HTTP请求重定向到本地的文件,进行web调试。这种调试方式不需要发布到线上再验证,避免了修改不成功、对用户造成影响的风险,而且不需要搭建复杂的开发服务器等开发环境,非常适合快速web调试。

首先打开fiddler,接着打开任意浏览器,我这里以maxthon为例,让它访问

http://www.ifeng.com/

我们会看到许多http交互在左上部窗口中闪动,这里每个http请求,在fiddler里面称为一个session会话。



1.将文件保存到本地并修改

我现在想修改凤凰网的图标

http://y1.ifengimg.com/a/2015_09/1d8401937113fd3.gif

先在左下命令行窗口中搜索该文件的session

?1d8401937113fd3.gif



按回车选中,我们看到选中的session是蓝色显示的,在该session上点击右键保存为本地文件



2.开启Fiddler自动重定向,创建新规则,将Http请求重定向到本地文件,保存好规则.

 注意勾选这三个方框,再点击“Add Rule”来添加规则



3.刷新一下浏览器页面,同时在命令行窗口中clear清除所有的会话,如果像下面这样,这个session的底色是灰色的,已经成功将这个请求重定向到本地文件了!



4.修改本地文件,进行测试

比如修改该文件,加上我的网名“tao_627”,刷新maxthon浏览器后,我们看到如下效果

另一个重定向例子

现在我打算修改如下跟广告相关的js文件

http://h0.ifengimg.com/ifeng/sources/yingguang-20140307.js 

也可以按照上面的方法进行,先保存成本地文件,再创建如下规则



我们看到这个特定的会话已经变成灰色

下面的工作我们只需修改本地js并调试就可以了。

当然我也可以将指定的js文件重定向到互联网上去的其他任意文件(包括后台服务器上的js),比如我将上面的网址重定向到(注意勾选那三个框,否则不会有效果)

http://h0.ifengimg.com/ifeng/sources/yingguang-20140307.js  ==> http://www.xxdao.com/dsp/js/ifengads.js

我们就可以看到它的实际效果,参见下面的截图



通过这种方法,我们可以很方便地进行我们的js文件的修改和调试了。

在调试的过程中,我发现从浏览器中的调试工具中,被重定向的请求中不会出现302的过程,而直接是我们修改后的内容,这个想想也应该是这样的。



参考文献

[1].http://blog.sina.com.cn/s/blog_0ee72b3701013g58.html

[2].http://jingyan.baidu.com/article/63acb44ae6122e61fcc17e33.html

[3].http://www.tuicool.com/articles/I7FVNr    超详细

更多相关:

  • 本文来自 运维人生 ,作者:fly是个稻草人链接:http://www.ywadmin.com/?id=76误删除linux系统文件了?不用急,本文将给你一个恢复linux文件的方法,让你轻松应对运维中的各风险问题。方法总比问题多~说在前面的话针对日常维护操作,难免会出现文件误删除的操作。大家熟知linux文件系统不同win有回收...

  • 原文来自SecIN社区—作者:WiHat0x00 什么是WebShell渗透测试工作的一个阶段性目标就是获取目标服务器的操作控制权限,于是WebShell便应运而生。Webshell中的WEB就是web服务,shell就是管理攻击者与操作系统之间的交互。Webshell被称为攻击者通过Web服务器端口对Web服务器有一定的操作权限,而...

  • 断电时文件系统发生了什么?硬盘又发生了什么?下一次开机时写到一半的文件在系统层面还在吗?在底层还在吗?更进一步的, 文件系统如何保证事务性, 会不会存在某种极端情况导致例如最后几个bit还没写完, 文件系统却认为它成功了的情况?回答不限任何文件系统,谢谢!下面是「北极」的回复分享断电的一瞬间,很多事情是无法确定的:1. 你无法确定...

  • 接到项目需求。需要搭建一个页面进行交互,慢慢来b (2).jpg使用python django框架进行页面的搭建在项目文件下打开窗口,输入命令;django-admin startproject helloword#在文件helloword/helloword/创建view.py在view.py文件中输入以代码from django....

  • 常见的错误集合解决方案(一)No.1提示错误'Microsoft.VC90.CRT,version="9.0.21022.8"把Microsoft.NET Framework 3.5.1下面的全部勾选上。No.2解决Qt Designer设计的图标但是VS生成不显示问题描述:在Qt designer中为菜单栏和工具栏设计的图标,但是...

  • ng g s services/http  app.module.ts ... @NgModule({declarations: [...],imports: [...HttpClientModule,//这个很重紧要,没有就会报错],providers: [],bootstrap: [AppComponent] }) expor...

  • set-misc-nginx-module模块是标准的HttpRewriteModule指令的扩展,提供更多的功能,如URI转义与非转义、JSON引述、Hexadecimal/MD5/SHA1/Base32/Base64编码与解码、随机数等等。在后面的应用中,都将会接触使用到这个模块的。该模块是由章亦春先生开发的,他开发的其他模块应用...

  • 该源码包是MySQL-python-1.2.4b4.tar.gz 从2013-06-28以来一直没有更新,注意该网站可以区分访问的终端类型是Windows还是Linux之类的,从而返回的源码包格式不一样。 在CentOS上的安装方法是 http://www.cnblogs.com/jackluo/p/3559978.html...

  • ATS默认提供了对Referer头的http request的防盗链功能,主要应用于图片,对视频等会使用级别更高的防盗链功能,比如事先约定好key,采用md5或HMAC-Sha1算法加密等。 在remap.config中按如下格式设置: map_with_referer client-URL origin-server-URL re...

  • 测试大文件下载 curl -I "http://resource.tsk.erya100.com/TS/flv/TS180/5836/9.flv?t=1430796561727" 单条转发模式in per remap mode 在remap.config中添加一条 map http://resource.tsk.e...

  • 修改客户端配置        最好使用机器名替换 localhost       2 fiddler 过滤...