免费的HTML5连载来了《HTML5网页开发实例详解》连载(五)图解通过Fiddler加速开发

时间:2023-05-29 09:06:02

Fiddler是Windows底下最强大的请求代理调试工具,监控任何浏览器的HTTP/HTTPS流量,窜改客户端请求和服务器响应,解密HTTPS Web会话,图4.44为Fiddler原理示意图。

免费的HTML5连载来了《HTML5网页开发实例详解》连载(五)图解通过Fiddler加速开发

图4.44  Fiddler原理示意图

Fiddler安装的系统要求为Windows XP或Windows 8中的版本,其中Fiddler2依赖于Microsoft.NET Framework 2.0,最新的Fiddler4依赖于Microsoft.NET Framework 4.0。

Fiddler功能很多,在这里介绍一项最常用的代理功能。假使在维护的网站线上有个功能出现脚本问题,这时候采用传统的方法,将网页内容完整的保存到本地,然后调试对应的代码,很显然这种方法显得特点笨重,Fiddler解决这个问题显得游刃有余。要做的是,将对应问题脚本保存到机器本地,修改脚本并通过Fiddler代理,下面通过一个百度首页的操作示例演示该过程。

(1)开启Fiddler,选中其右侧“AutoResponder”标签页,勾选“Enable automatic responses”和“Unmatched requests passthrough”复选框,如图4.45所示。

免费的HTML5连载来了《HTML5网页开发实例详解》连载(五)图解通过Fiddler加速开发

图4.45  开启Fiddler

(2)打开Chrome浏览器,在地址栏内输入“http://www.baidu.com”并按Enter键进入,此时百度首页的请求会被完整的显示在Fiddler左侧的列表中,如图4.46所示。

免费的HTML5连载来了《HTML5网页开发实例详解》连载(五)图解通过Fiddler加速开发

图4.46  百度首页请求列表

(3)选中列表中的第5条请求(该请求为JavaScript脚本),在该请求上方单击并拖动至右侧“AutoResponder”标签页下方空白的列表中,如图4.47所示。

免费的HTML5连载来了《HTML5网页开发实例详解》连载(五)图解通过Fiddler加速开发

图4.47  代理一条脚本请求

(4)复制第5条请求的URL地址,使用浏览器打开并将脚本内容保存到机器本地文件夹

(5)在刚才保存的脚本末尾添加1行代码:

document.body.style.backgroundColor='black'                                                                  // 修改页面背景色为黑色

(6)修改Fiddler右侧“AutoResponder”标签页下方列表的“then respond width..”列,将其指向本地保存的脚本代码地址,如图4.48所示。

免费的HTML5连载来了《HTML5网页开发实例详解》连载(五)图解通过Fiddler加速开发

图4.48  修改请求的本地代理地址

(7)打开Chrome浏览器,在地址栏内输入“http://www.baidu.com”并按Enter键进入,此时百度首页变为黑色,Fiddler代理成功。

提示:示例中完成的功能只是一种简单的模拟,读者在实际开发中可以通过Fiddler代理,修改本地脚本的具体代码,再结合Chrome浏览器的调试功能,解决网站的线上问题将变得简单且高效。

学习HTML5最好的书就是《HTML5网页开发实例详解》,用代码学习用案例学习,可比看文字有趣多了!!!一本书搞定HTML5,从现在开始。

免费的HTML5连载来了《HTML5网页开发实例详解》连载(五)图解通过Fiddler加速开发