图解前端调试工具Fiddler使用

Fiddler 是前端使用最广泛的线上调试工具,它不依赖于其它环境,直接安装即可。缺点是只能在 win 上使用,因为它是 C# 写的。

安装

  • 01

    安装超级简单,下载后直接下一步就行了。启动界面如下图所示:

使用

  • 01

    大体和 Charles 类似,打开浏览器访问要调试的页面,定位到要调试的资源(JS、CSS),映射到本地。 还是以 trip.jd.com 下的 search.js 测试 先清掉现有的请求数据,如下图所示:

  • 02

    浏览器打开访问 trip.jd.com,Fiddler 可以捕捉到其中的请求,找到 search.js,如下图所示:

  • 03

    右侧面板切换到 AutoResponser ,勾上前两个选项,如下图所示:

  • 04

    把左侧的 search.js 拖到 AutoResponser 里,如下图所示:

  • 05

    右下角 “Rule Editor” 最下面的下拉选择 “Find a file”,如下图所示:

  • 06

    选择之前下载到本地的 search.js 并点击 “save”,如下图所示:

  • 07

    这时可以任性的修改本地的 search.js了,之前加了个 alert,回到浏览器刷新页面既可以看到效果了。

(0)

相关推荐

  • HTTP调试工具 fiddler图文使用教程详细介绍(附软件下载)

    Fiddler可以帮您记录,调试Microsoft Internet Explorer与Web应用程序的交互,找到Web程序运行性能的瓶颈,还有如查看向Web服务器发送cookies的内容,下载内容的 ...

  • HTTP调试工具 fiddler图文使用教程

    Fiddler可以帮您记录,调试Microsoft Internet Explorer与Web应用程序的交互,找到Web程序运行性能的瓶颈,还有如查看向Web服务器发送cookies的内容,下载内容的 ...

  • Fiddler对安卓应用手机抓包图文教程

    做开发需要抓取手机app的http/httPS的数据包,想看APP发出的http请求和响应是什么,这就需要抓包了,这可以得到一些不为人知的api,比如还可以干些"坏事"... 需要 ...

  • 对Total Uninstall 和 HTTPDEBUG 一些小小的了解

    Total Uninstall介绍Total Uninstall 是一个安装程序时一个非常不错的监视工具。它能在安装程序前扫描一遍机器,然后安装完以后扫描一遍,使之可发现有疑处。 http://www ...

  • 使用前端开发调试工具fiddle进行线下调试css的方法

    fiddle的功能相当的强悍,用户也非常广,今天我就教大家用fiddle进行前端调试。 首先下载软件fiddle,点击对应的版本下载安装。 安装成功后打开看到右侧的导航栏: 点击AutoRespond ...

  • AMI BIOS设置图解教程+Award Bios设置全程图解

    和AMI Bios一样,再开机画面时按下“Del”键进入Bios设置菜单(有些是按F1键): 进入后大家会看到以下菜单,也有可能会有一些差别,但是基本上是差不多的,及算名字不同,但是基本上作用是一样的 ...

  • IE浏览器和Firefox下的HTTP调试工具

    IE浏览器和Firefox下的HTTP调试工具

  • 路由器指示灯含义 无线路由器指示灯图解

    伴随着智能手机的流行,如今无线路由器也早已走进千家万户,而智能手机、平板以及笔记本等无线设备Wifi上网就主要靠无线路由器无线网络来提供。不过,有时候也会出现一些网络问题,导致电脑或者智能手机设备这个 ...

  • 如何使用fiddler做整个目录替换

    前端开发经常会使用到 fiddler 的 AutoResponse 功能调试线上代码,在AutoResponse Tab页中可以很方便的指定一个本地文件替换服务器上的文件. 最经开发的一个项目,由于服 ...