Firebug使用手册.ppt

Firebug使用使用-JavaScript 调试利器调试利器目录简介安装功能介绍简介Firebug是Firefox下的一款开发类插件，现属于Firefox的五星级强力推荐插件之一。它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和 Ajax的得力助手。Firebug如同一把精巧的瑞士军刀，从各个不同的角度剖析Web页面内部的细节层面，给Web开发者带来很大的便利。安装1.从上得到firefox的最新版本(或用附件FirefoxSetupcn2.0.0.11.zip)2.从 上得到firebug的最新版本(或用附件firebug1.0-current.xpi)3.安装完毕后，在firefox中按F12进入firebug界面，如下：安装firebug工作区安装4.打开需要进行调试的界面,如5.依次选择下列各项，查看其输出功能介绍1.Console控制台2.HTMLHTML查看器3.CSSCSS查看器4.Script脚本查看器5.DOM文档结构查看器6.Net网络状况监视Console控制台能够显示当前页面中的javascript错误以及警告，并提示出错的文件和行号，方便调试，这些错误提示比起浏览器本身提供的错误提示更加详细且具有参考价值。而且在调试Ajax应用的时候也是特别有用，你能够在控制台里看到每一个XMLHttpRequests请求post出去的参数、URL，http头以及回馈的内容，原本似乎在幕后黑匣子里运作的程序被清清楚楚地展示在你面前。像C shell或Python shell一样，你还能在控制台中查看变量内容，直接运行javascript语句，就算是大段的javascript程序也能够正确运行并拿到运行期的信息。Console2.点击Run或按ctrl+Enter运行脚本，结果如图3图图2脚本运行结脚本运行结果显示区域果显示区域1.在调试脚调试脚本编辑区本编辑区输入图中代码调试脚本编辑区脚本运行结果脚本运行结果显示区域显示区域图图1点击可切换控制台编辑模式,当前显示为单行模式，点击后如图2为多行编辑模式在单行编辑模式下按下在单行编辑模式下按下Tab键，可实现代码提示的功能键，可实现代码提示的功能Console图图3图图43.点击此处可查看详细的错误信息,点击后结果如图4Consolep Logging的使用Firebug提供了强大的Logging函数供我们在代码中使用，使用这些函数我们就不用再一次次去点击那些alert出来的讨厌而信息不足的对话框了。如：console.log(“message”);console.info(“message”);console.warn(“message”);console.error(“message”);Consolea.输入并运行如下命令b.运行结果显示如下c.在编辑区输入并运行如下命令d.运行结果显示如下Consolep console.trace()打印执行当前语句时的堆栈信息Consolep console.time(“flag”)p console.timeEnd(“flag”)计算两个函数调用其间代码执行的时间Consolep console.dir(object)用来显示object对象的所有属性p console.dirxml(element)用来显示xml文档HTML查看器2.鼠标放到这里3.所选择的区域对应的背景色发生了变化1.选择HTMLHTML查看器1.选择Inspect3.注意这里的变化2.鼠标放鼠标放到这里到这里HTML查看器可直接在此编辑CSS查看器1.选择CSS2.点击鼠标右键3.可进行编辑4.语法提示：输入一语法提示：输入一个字母后，系统将提个字母后，系统将提示可以匹配的选项，示可以匹配的选项，如图中输入如图中输入f，系统提，系统提示示float，在提示的过，在提示的过程中通过使用向上向程中通过使用向上向下方向键可以选择其下方向键可以选择其它匹配选项它匹配选项Script查看器1.选择Script查看器2.显示当前所打开的网页的JavaScript脚本3.点击增加断点4.如果用到外部JS可在此切换显示内容Script查看器设定断定点后，在Console中输入a(),按下ctrl+Enter，结果如下：运行后效果运行后效果DOM查看器显示当前文档的结构选择DOMNet查看器显示网页内资源的下载时间选择Net