Firebug使用手册专用课件.pptVIP

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