软件开发实用教程第2版教学课件ppt作者华驰21前端开发和调试工具Firebug和Fiddler的安装和使用课件.ppt

任务实施 图 2-18 代理服务器设置 任务实施 作为系统代理，所有的来自微软互联网服务的http请求在到达目标Web服务器的之前都会经过Fiddle，同样的，所有的Http响应都会在返回客户端之前流经Fiddler。 Fiddler运行界面如图2-19所示，可以看到，软件窗口大体可以分为六大部分：菜单栏、工具栏、会话列表、命令行工具栏、HTTP Request显示栏、Http Response显示栏。让您在捕获数据的时候一目了然。 任务实施 图2-19 Fiddler运行界面 提示：当关闭Fiddler的时候，它就会自动从系统注册表中移出， 换句话说，当你关闭了Fiddler后，Fiddler就不会再起任何作用。 任务实施 (3) 使用Fiddler ① Fiddler的HTTP统计视图 Fiddler会话列表中陈列出了所有的HTTP通信量，并以列表的形式展示出来，点击你想查看的一个或者多个会话，再点击右边的【统计】选项卡，你就可以很轻松的查看到请求数、发送字节数等信息。如果您选择第一个请求和最后一个请求，可获得整个页面加载所消耗的总体时间（如图2-20所示）。从而对页面的访问进行访问速度优化。 图2-20 HTTP统计视图 任务实施 正如图2-20所示，打开中国无锡质量网，可以清楚的观察到HTTP请求数为62（其中60条数据请求成功），发送26466B，接受3094287B等利用我们优化访问页面速度的数据。 ②QuickExec命令行的使用：QuickExec命令行是会话列表下边的黑色区域，你可以在里面输入命令，回车之后即可执行你的命令，非常方便，在这里为大家介绍几个常用的命令： ●Help：打开官方的使用页面介绍，所有的命令都会列出来 ●cls：清屏(Ctrl+x 也可以清屏)； ●select： 选择会话的命令； ●?.png：用来选择png后缀的图片； ● bpu：截获request。 任务实施 ③ 通过Fiddler设置断点修改Request。Fiddler最强大的功能莫过于设置断点了，设置好断点后，你可以修改httpRequest 的任何信息包括host, cookie或者表单中的数据。设置断点有两种方法： 第一种：打开Fiddler 点击【设置】选项卡，在弹出的下拉列表框中选择 【自动断点】选项卡，在弹出的下拉列表框中单击【请求之前】(这种方法会中断所有的会话)；如果想消除命令的话，击【设置】选项卡，在弹出的下拉列表框中选择【自动断点】选项卡，在弹出的下拉列表框中选择【禁用】就可以了。 第二种:在命令行中输入命令:“bpu 网址名”(这种方法只会中断某一具体的会话)；如果想消除的话，在命令行中输入“bpafter”。 任务实施 ④ Fiddler中设置断点修改Response。Fiddler中修改Response,有两种方法： 第一种：打开Fiddler 点击【设置】选项卡，在弹出的下拉列表框中选择【自动断点】选项卡，在弹出的下拉列表框中选择【响应之后】(这种方法会中断所有的会话)，如果想消除命令的话，击【设置】选项卡，在弹出的下拉列表框中选择【自动断点】选项卡，在弹出的下拉列表框中选择【禁用】就可以了。 第二种:在命令行中输入命令:“bpafter 网址名”(这种方法只会中断某一具体的会话)，如果想消除的话，在命令行中输入“bpafter”。 任务实施 ⑤ Fiddler中查询会话 用快捷键Ctrl+F 打开 Find Sessions的对话框，输入关键字查询你要的会话（如图2-21所示）。 查询到的会话会用黄色显示。例如，在Fiddler查询会话框中输入“wxzl”,单击【Find Session】按钮，那么主机中涉及wxzl的所有信息将会以黄色高亮显示出来（如图2-22所示）。 图2-21 Fiddler查询会话1 图2-22 Fiddler查询会话2 任务考核 本任务考核标准如表2-2所示。 小结与课堂延伸 在“中国无锡质量网”用户界面完成之后，在细节上肯定还有一些需要调试的地方，如错误或无效链接、不当的CSS样式表、错误的JavaScript代码等，所以系统的调试是一个不容忽视的环节，所以只要是设计开发，就需要进行调试，尽管相对来说，前端的调试要简单一些，但使用一些调试工具或插件还是能提高你的工作效率。本任务通过安装和使用前端开发工具Firebug和Fiddler对“中国无锡质量网”的前台程序及后台管理程序进行测试与分析，进而优化代码执行效率和页面访问速度。 小结 课堂 延伸 本任务的拓展训练为自己选择如WebDeveloper等其他1-2款调试工具，正确安装并熟悉其用法。 学习情境二 ：系统开发工具 工作任务：前端开发和调试工具Firebug和Fiddler