ASP,NET2,1前端开发和调试工具Firebug和Fiddler的安装和使用.pptVIP

任务描述 了解前端开发工具Firebug和Fiddler 掌握前端开发工具Firebug和Fiddler的使用方法 任务目标 知识目标 能力目标 很多资深的前端设计师都拥有自己最喜欢的工具、脚本和资源，在本任务中，将引入两种Web前端开发工具Firebug和Fiddler来开发“中国无锡质量网”的Web页面。 相关知识 1、前端开发 2005年以后，互联网进入Web 2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。以前掌握Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。 Web前端开发在系统开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。Web前端开发人员能够准确和快速地把握整个网页的架构，从而达到减少开发成本和页面美化目的。Web前端开发简单地说，它的主要职能就是把网站的界面更好地呈现给用户。 相关知识 Web前端开发技术包括3个要素：HTML、CSS和JavaScript，但是随着RIA（Rich Internet Application，富互联网应用）的流行和普及，Flash、Flex、Sliverlight、XML及服务器端语言也应用到Web前端开发中。Web前端开发是个非常新的领域，总有新的灵感和技术不时闪现出来，如HTML8，CSS sprite、负边距布局、栅格布局等；各种JavaScript框架层出不穷，如EXT、Jquery等，为整个Web前端开发领域注入了巨大的活力；浏览器大战也越来越白热化，跨浏览器兼容方案的解决依旧是百家争鸣，各有所长。为了满足“高可维护性”的需要，需要更深入、更系统地去掌握Web前端开发技术，这样才能创建一个好的前端架构，保证系统的质量。 相关知识 2．前端开发工具 前端开发工具即网页调试工具，在前端开发中我们经常会要调试页面，主要HTML、CSS调试和JS调试。所以前端工具在网页调试过程中起着事半功倍的作用，前端开发工具种类繁多，有基于Firefox浏览器的、有基于IE浏览器的，还有其他调试工具，本任务主要推荐一些优秀，并被广为用之的前端开发工具，例如基于Firefox浏览器的Firebug插件，基于IE浏览器的Fiddler插件。 任务实施 1、Firebug的安装和使用 Firebug是网页浏览器 Mozilla Firefox的一个插件，?Firebug 和 Firefox 整合在一起可以组成最强大的网页调试工具。Firebug可以在任何网页中编辑、调试或监视HTML、CSS、JavaScript代码，如同一把精巧的瑞士军刀，从各个不同的角度剖析Web页面内部的细节层面，给Web开发者带来很大的便利。 Firebug也是一个除错工具。用户可以利用它除错、编辑、甚至删改任何网站的 CSS、HTML、DOM以及JavaScript代码，下面笔者将结合中国无锡质量网给大家介绍下Firebug网页速度优化工具的详细使用方法: 任务实施 (1）安装Firebug。因为Firebug需要在Firefox浏览器中运行，所以我们首先要安装 Mozilla Firefox 23.0.1（目前最新官方版本是23.0.1版本）。安装好浏览器后，打开Firefox浏览器，选择顶部菜单栏上的【工具】菜单，点击【最新使用菜单】中的【自定义Firefox】，进入Firefox浏览器的插件库，在【搜索附加组件】输入框中输入“Firebug”，等搜索结果出来后就可以发现一个名称为“Firebug 1.12.1”的插件，这个就是我们要找的firebug了，它有一个重要的标志就是图片为一个小爬虫。点击后面的【添加到Firefox】按钮进入Firebug的下载安装页面。软件下载结束弹出【软件安装】安装窗口，如图2-1所示。 任务实施 图 2-1 Firebug安装 任务实施 单击【安装】按钮，完成Firebug的安装。安装完Firebug后重启Firefox浏览器，此时我们可以发现在状态栏最右边有一个“小爬虫”的图标（ ），对了，这就是我们安装成功的firebug插件。灰色图标表示Firebug未开启对当前网站的编辑、调试和监测功能。而黄色（ ）则表示Firebug已开启对当前网站的编辑、调试和监测功能。 (2) 启用和关闭Fireb