Fiddler2进行调试跟踪JS

一.Fiddler2简介

        Fiddler2是一个网络调试代理,用来监测本地计算机和Internet之间所有的HTTP通讯。

        可以监测所有的HTTP通讯,设置断点,并且可以修改到进入到本地计算机的数据和从本地计算机出去的数据(就是可以伪造数据)。

        Fiddler包含一个JScript .NET 事件脚本子系统(event-based scripting subsystem),可以使用任何一种.Net语言扩展。

        该软件是免费的,支持多种浏览器,包括Internet Explorer,Mozilla Firefox,Opera和其它一些浏览器

从Fiddler官方网站上可以看见原版的英文介绍 http://www.fiddler2.com/fiddler2/

 

二.Fiddler的一些实用功能
        可在PC机上,抓移动端设备http请求包
        可挂载静态资源到本地计算机,进行调试
        可直接在composer模块写http请求,模拟发送请求http请求(上传无法模拟)
        可模拟低网速模式,当然Chrome浏览器也可以模拟低网速模式,如下所示:

 

三.Fiddler2调试跟踪JS

        正常我们发布生产运行的网站JS是用压缩工具压缩后的,如果在生产上发现问题,开发、测试环境无法重现的话,我们该如何具体跟踪定位呢?

        通过Fiddler2设置代理将调试定位到本地的非压缩的js文件。

        下面简单介绍下Fiddler2的使用:

源代码:

<!DOCTYPE html>
<html>
<head>
<script language="JavaScript" type="text/JavaScript"
	src="lib/jquery/jquery-1.9.1.js"></script>
<style>
body {
	font-size: 16px;
	font-weight: bolder;
}
p {
	margin: 5px 0;
}
</style>
</head>
<body>
	<div>
		<span>Hello</span> <span>
			<p class="selected">test</p> </span>
		<p>And One Last Time</p>
		<p class="selected">again</p>
	</div>
	<p class="selected">Hello Again</p>
	<script>$("div").find(".selected").css("color", "blue");</script>
</body>
</html>

运行效果:

        浏览器的Debug可以看到,加载的是jquery-1.9.1.js

        打开Fiddler.exe,点击“AutoResponder”,添加Rule,然后编写规则表达式,匹配上就映射我本地的jquery-1.8.3.js

        配置好后,再访问工程,左侧将显示请求信息,点击请求jquery-1.9.1.js的请求,右下方我们看到显示的是jquery-1.8.3.js。

        也可以通过浏览器的Debug工具查看如下,加载的是本地的jquery-1.8.3.js。这样我们就可以将其运用到生产环境的断点调试跟踪了。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值