使用Fiddler提高前端工作效率 (实例篇)

分类:网站建设| 发布:camnprbubuol| 查看: | 发表时间:2011/11/10

image

tip: 最好是没有缓存的返回内容(Result Code是200),这样可以进行下一步的保存。不是200也没关系,你只要本地硬盘上有这个文件就好了。

第二步:将JS文件保存到本地(如果本地已经有这个文件,可以跳过这步)

image

在这个js session上右键点击,选择“Save – Response –Response Body…”,将js文件的内容保存到本地。记住存的位置,下面我们会用到这个保存下来的文件。

第三步:开启FIDDLER的请求自动重定向功能

image

打开AutoResponder标签设置。有没有看到界面上有两个复选框?第一个的作用是开启或禁用自动重定向功能,我们就可以在下面添加重定向规则了。第二个复选框框勾上时,不影响那些没满足我们处理条件的请求。

第四步:创建重定向规则,将目标是这个JS的HTTP请求重定向到本地文件

我们可以通过“Add…”按钮手动添加规则,不过这个URL已经出现在我们的session列表中,可以直接拖动过来。在左侧的Session列表中选择第一步找到的session,拖动到AutoResponse标签中。这样就创建了一个针对这个URL的规则。

image

Fiddler帮我们生成的规则是:

  • 当URL为:image

    选择“Find a file…”,就可以选择本地的文件作为返回的body内容。

    image

    选择我们刚刚保存下来的文件。

    刷新一下浏览器页面,看一下session列表,如果像下面这样,这个session的底色是灰色的,那么恭喜你,你已经成功将这个请求重定向到本地文件了!

    image

    tip: 如果浏览器用的是Firefox,记得先清一下临时文件缓存,因为Firefox是真正的缓存,当判断文件的缓存还未过期时,就不会再发请求出来,Fiddler就获取不到了。

    第五步:修改本地文件,进行测试

    我们在本地的js文件中加一句alert(‘hello’)

    image

    刷新浏览器,看看效果,如果alert出来,那就成功了。

    继续修改这个文件并测试,成功修复问题后,我们就可以发布修改后的文件了。

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

    来源:http://q.pnq.cc/archives/422

    365据说看到好文章不转的人,服务器容易宕机
    原创文章如转载,请注明:转载自郑州网建-前端开发 http://camnpr.com/
    本文链接:http://camnpr.com/website-dev/491.html