《软件开发实用教程第2版教学作者华驰21前端开发和调试工具Firebug和Fiddler的安装和使用课件》由会员分享，可在线阅读，更多相关《软件开发实用教程第2版教学作者华驰21前端开发和调试工具Firebug和Fiddler的安装和使用课件（41页珍藏版）》请在金锄头文库上搜索。
1、学习情境二 ：系统开发工具,工作任务：前端开发和调试工具Firebug和Fiddler的安装和使用,ASP.NET软件开发技术项目实践,任务描述,了解前端开发工具Firebug和Fiddler,掌握前端开发工具Firebug和Fiddler的使用方法,任务目标,知识目标,能力目标,很多资深的前端设计师都拥有自己最喜欢的工具、脚本和资源，在本任务中，将引入两种Web前端开发工具Firebug和Fiddler来开发“中国无锡质量网”的Web页面。,相关知识,1、前端开发 2005年以后，互联网进入Web 2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。以前掌握
2、Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。 Web前端开发在系统开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。Web前端开发人员能够准确和快速地把握整个网页的架构，从而达到减少开发成本和页面美化目的。Web前端开发简单地说，它的主要职
3、能就是把网站的界面更好地呈现给用户。,相关知识,Web前端开发技术包括3个要素：HTML、CSS和JavaScript，但是随着RIA（Rich Internet Application，富互联网应用）的流行和普及，Flash、Flex、Sliverlight、XML及服务器端语言也应用到Web前端开发中。Web前端开发是个非常新的领域，总有新的灵感和技术不时闪现出来，如HTML8，CSS sprite、负边距布局、栅格布局等；各种JavaScript框架层出不穷，如EXT、Jquery等，为整个Web前端开发领域注入了巨大的活力；浏览器大战也越来越白热化，跨浏览器兼容方案的解决依旧是百家争鸣
4、，各有所长。为了满足“高可维护性”的需要，需要更深入、更系统地去掌握Web前端开发技术，这样才能创建一个好的前端架构，保证系统的质量。,相关知识,2前端开发工具 前端开发工具即网页调试工具，在前端开发中我们经常会要调试页面，主要HTML、CSS调试和JS调试。所以前端工具在网页调试过程中起着事半功倍的作用，前端开发工具种类繁多，有基于Firefox浏览器的、有基于IE浏览器的，还有其他调试工具，本任务主要推荐一些优秀，并被广为用之的前端开发工具，例如基于Firefox浏览器的Firebug插件，基于IE浏览器的Fiddler插件。,任务实施,1、Firebug的安装和使用 Firebug是网页
5、浏览器 Mozilla Firefox的一个插件， Firebug 和 Firefox 整合在一起可以组成最强大的网页调试工具。Firebug可以在任何网页中编辑、调试或监视HTML、CSS、JavaScript代码，如同一把精巧的瑞士军刀，从各个不同的角度剖析Web页面内部的细节层面，给Web开发者带来很大的便利。 Firebug也是一个除错工具。用户可以利用它除错、编辑、甚至删改任何网站的 CSS、HTML、DOM以及JavaScript代码，下面笔者将结合中国无锡质量网给大家介绍下Firebug网页速度优化工具的详细使用方法:,任务实施,(1）安装Firebug。因为Firebug需要在
6、Firefox浏览器中运行，所以我们首先要安装 Mozilla Firefox 23.0.1（目前最新官方版本是23.0.1版本）。安装好浏览器后，打开Firefox浏览器，选择顶部菜单栏上的【工具】菜单，点击【最新使用菜单】中的【自定义Firefox】，进入Firefox浏览器的插件库，在【搜索附加组件】输入框中输入“Firebug”，等搜索结果出来后就可以发现一个名称为“Firebug 1.12.1”的插件，这个就是我们要找的firebug了，它有一个重要的标志就是图片为一个小爬虫。点击后面的【添加到Firefox】按钮进入Firebug的下载安装页面。软件下载结束弹出【软件安装】安装窗口
7、，如图2-1所示。,任务实施,图 2-1 Firebug安装,任务实施,单击【安装】按钮，完成Firebug的安装。安装完Firebug后重启Firefox浏览器，此时我们可以发现在状态栏最右边有一个“小爬虫”的图标（ ），对了，这就是我们安装成功的firebug插件。灰色图标表示Firebug未开启对当前网站的编辑、调试和监测功能。而黄色（ ）则表示Firebug已开启对当前网站的编辑、调试和监测功能。 (2) 启用和关闭Firebug。Firebug很听话，只有你需要它的时候才会出现。我们以“中国无锡质量网”为例子，在Firefox浏览器地址栏中输入http:/localhost:4036
8、/wxzl/index.aspx，单击浏览器状态栏最右边的 “小爬虫”图标或者按F12键，即可打开页面窗口，此时页面窗口被分成两部分，浏览器的上半部分是网页，下半部分是Firebug的界面（即上面网页的同步显示），其中Firebug又有两部分组成，一部分是功能区，另一部分信息区（如图2-2所示）。,任务实施,图2-2 启用Firebug,任务实施,要关闭Firebug控制窗口，单击Firefox浏览器状态栏最右边的“小爬虫”或按F12键就可以。如果要关闭Firebug编辑、调试和监测功能，则需要单击功能区最左边的“小爬虫”图标，然后在弹出的下拉列表框中单击【停用Firebug】。 (3）使用F
9、irebug。如图2-2所示，单击功能区最左边的“小爬虫”图标（ ），可打开主菜单（如图2-3所示），其主要功能有隐藏Firebug；停用Firebug；调整Firebug界面位置；增大信息区域显示文本的字号；设置Firebug显示错误数、显示信息提示等。,图2-3 Firebug 主菜单功能,任务实施,单击功能区左边第二个按钮（ ），用鼠标直接选择页面中的一些区块，不仅可查看相应的HTML源代码和CSS样式表，而且选中页面中的文本节点后，还可以对其进行修改，修改结果会马上反应在页面中，真正的做到所见即所得。例如: 单击功能区左边第二个按钮（ ），接着用鼠标选中中国无锡质量网“最新告示”栏目中
10、“更多”超链接 (如图2-4所示),然后通过Html控制面板将“更多”改成“more”，修改完成，在中国无锡质量网Web页面内即可看到相应的变化（如图2-5所示）。,任务实施,图2-4 Html源代码1,图 2-5 Html源代码2,此外，从图2-4中看到，Firebug功能区还有7个主要的Tab按钮(见表2-1)，接下来笔者将主要介绍这7方面的功能。,任务实施,默认情况下，控制台、脚本、网络、Cookies这四个Tab按钮是关闭的，需要手动开启。而HTML、CSS和DOM是默认激活的。, 控制台功能：控制台的主要功能是用来显示网页各类错误信息，包括显示当前页面中的javascript错误以及
11、警告，并提示出错的文件和行号，方便调试，这些错误提示比起浏览器本身提供的错误提示更加详细且更具有参考价值。而且在调试Ajax应用的时候也是特别有用，能够在控制台里看到每一个XMLHttpResquests请求post出去的参数、URL、http头及回馈内容，原本似乎在幕后黑匣子里运作的程序被清清楚楚地展示在你面前。 下 面以“中国无锡质量网”为例，打开Firefox浏览器，打开Firebug，打开控制台启用，在Firefox浏览器输入“中国无锡质量网”的地址，根据Firebug控制台的提示，可以清楚的看到中国无锡质量网首页面出现五处错误（如图2-6所示）。,任务实施,任务实施,图2-6 控制台
12、查看器, HTML功能：单击功能区“HTML”标签即可切换到查看源代码功能（如图2-7所示），首先看到的是经过格式化的HTML代码，层次清晰，能够方便的分辨出每一个标签之间的从属关系，其次虽然Firefox也提供了查看页面源代码的功能，但是它显示的只是页面文件本身的源代码，通过脚本输出的HTML源码是看不到。但是利用Firebug则是所见即所得，是最终的源代码，并可进行编辑，实时显示，从而实现页面最佳效果。,任务实施,图2-7 HTML查看器,正如图2-7所示，此时，在HTML查看器中显示的是中国无锡质量网的源代码，各个标签之间的从属关系层次清晰，所见即所得。 CSS功能：单击功能区“CSS”
13、标签，可切换到CSS查看器页面（如图2-8所示），CSS查看器不仅自下向上列出每一个CSS样式的从属继承关系，还列出了每一个样式在哪个样式文件中的定义。此外，可以在这个查看器中直接添加、修改、删除一些css样式属性，并可在当前页面中直接看到修改后的效果。,任务实施,图2-8 CSS查看器,一个典型的应用案例就是调整页面中字体颜色。例如，打开Firefox浏览器，打开Firebug，在Firefox浏览器输入“中国无锡质量网”的地址，切换到CSS标签查看器，我们看到“技术交流”和“企业查询”栏目下的文章标题颜色是黑色的，找到文章标题的样式A:link（如图2-9所示），此时，color属性值是#
14、000000（即黑色）,修改color属性值为red(如图2-10所示),修改结束，同一时间，我们可以看到“技术交流”和“企业查询”栏目下的文章标题颜色是红色的了（如图2-10所示）。,任务实施,任务实施,图2-9修改CSS前文章标题颜色,图2-10 修改CSS后文章标题颜色,任务实施,【提示】：在HTML里调试出正确的源代码和CSS后，要记得将源代码和CSS的修改结果复制到你的源代码文件中，否则你的调试结果在页面刷新之后会付之东流。 脚本（Javascript）功能：单击功能区“脚本”标签，可切换到脚本调试器页面（如图2-11所示），此处可以进行脚本单步调试、断点设置、变量查看等功能，同时通
15、过右边的监控功能来实现脚本运行时间的查看和统计，提高运行效率。,图2-11 脚本查看器,图2-11 脚本查看器,任务实施,【提示】：如果要在脚本中设置一个断点，可以单击行号旁边的空白区域，此时会出现一个红色的点，表示在这里设置了断点（如图2-12所示），当脚本运行到此会停止运行，等待您的操作。在右边的小窗口将标签切换到“断点”不仅可以查看我们设置的所有断点（如图2-13所示），而且还有移除所有断点及禁用所有断点的功能。在断点标记的红点上单击右键还可以设置断点条件，在符合的时候才会停止脚步的执行。,图2-12 脚本查看器中单个断点,任务实施,图2-13 脚本查看器中多个断点,任务实施, DOM功
16、能：单击功能区“DOM”标签，可切换到查看页面DOM信息页面（如图2-14所示），DOM(Document Object Model)包含了大量的Object以及函数、事件，在从前，你要想从中查到需要的内容，有点难度，就好比你去了一个大型图书馆，想要找打几本名字不太确切的小说，众多的选择会让你无所适从。但是使用Firebug的DOM查看器确能方便的浏览DOM的内部结构，帮您快速定位DOM对象，并可双击来实现DOM节点属性或值的修改。 【提示】：编辑DOM对象值得时候，您会发现DOM具有自动完成功能，例如，当您输入document.get之后，按下tab键就能补齐为document.getElementById。,图2-14 DOM查看器,任务实施, 网络功能：单击功能区“网络”标签，可切换网络监控页面（如图2-15所示），Firebug网络监控器功能同样强大，它能将页面中的CSS、Javascript以及网页中引用的图片载入消耗的时间以矩状图显示出来，这样方便找出其中运行时间较慢的部分，进而对网页进行调优。,图2-15 网络查看器,
