Fiddler2进行调试跟踪JS -

bijian1013

浏览: 3244513 次
性别:
来自: 深圳

最近访客更多访客>>

seal1002

dy.f

godandghost

lovefiger

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Fiddler2进行调试跟踪JS

博客分类：

JavaScript

JavaScript Fiddler2

一.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。这样我们就可以将其运用到生产环境的断点调试跟踪了。