Firebug 使用手册

下载需要 10 金币 [ 金币充值 ]

服务器/托管费、人工审核、技术维护等都需要很多费用，请您支持深度开源的发展

下载PPT

PPT 内容

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

Firebug 使用手册

浪子7423

贡献于2012-05-22

Firebug 使用手册

PPT 内容

PPT 图集

相关PPT