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/

 

二.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>

运行效果:
Fiddler2进行调试跟踪JS_第1张图片

        浏览器的Debug可以看到,加载的是jquery-1.9.1.js
Fiddler2进行调试跟踪JS_第2张图片

        打开Fiddler.exe,点击“AutoResponder”,添加Rule,然后编写规则表达式,匹配上就映射我本地的jquery-1.8.3.js
Fiddler2进行调试跟踪JS_第3张图片
        配置好后,再访问工程,左侧将显示请求信息,点击请求jquery-1.9.1.js的请求,右下方我们看到显示的是jquery-1.8.3.js。
Fiddler2进行调试跟踪JS_第4张图片
        也可以通过浏览器的Debug工具查看如下,加载的是本地的jquery-1.8.3.js。这样我们就可以将其运用到生产环境的断点调试跟踪了。
Fiddler2进行调试跟踪JS_第5张图片

你可能感兴趣的:(JavaScript,fiddler2)