文档介绍：Firebug是firefox下的一个插件,能够调试所有网站语言,如Html,Css等,但FireBug最吸引我的就是javascript调试功能,使用起来非常方便,而且在各种浏览器下都能使用(IE,Firefox,Opera, Safari)。除此之外,其他功能还很强大,比如html,css,dom的查看与调试,网站整体分析等等。总之就是一整套完整而强大的 WEB开发工具。再有就是其为开源的软件。
Fire bug简介
启动Fire fox ->工具->附加组件->搜索”Fire bug”->添加->安装->重启Fire fox ->ok
Fire bug安装
如图:1-1
启动Fire fox ->工具->附加组件->扩展->添加->安装->ok
Fire bug禁用、卸载
如图:2-1
:启动Fire fox ->按F12启动Fire bug
Fire bug启用、关闭
如图:3-1
如图:3-2
:Fire fox 页面右下角->按点击“臭虫”
:启动Fire Bug->按F12关闭Fire bug
如图:3-3
如图:3-4
:如图3-4所示
:启动Fire bug ->控制台->启用->ok
:显示各种脚本错误信息、数值、命令调试等。
Fire bug控制台
如图:5-1
Fire bug命令行
如图:6-1
如图:6-2
单行命令行:
     单行命令行是firebug控制台面板中默认的,它允许我们每次只能输入一行命令。
     此外,我们还能通过按键盘上的“↑”和“↓”键翻阅之前输入过的历史纪录。
多行命令行:
     多行命令行是单行命令行的加强版,它允许我们一次可以输入多行javascript代码同时执行。
Fire bug API
API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件的以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。API除了有应用“应用程序接口”的意思。
命令行API:
     注:虽然所有的API都可以在开发阶段和程序运行阶段使用,但是最能发挥firebug所长的还是在调试javascript程序的时候。
Fire bug API 函数
$(id) :根据给定的id返回相应的元素。
$$(selector) : 返回根据给定的CSS选择器相匹配的元素数组。
$x(xpath) :返回给定xml路径(xpath)相匹配的元素数组。
dir(object) :打印给定对象的所有属性。
clear() :清除控制台的内容。
inspect(object[, tabName]) :在合适的标签中查看参数给定的对象,可选参数tabName可以强制制定跳转到哪个标签查看。这些合适的标签包括“HTML”,“css”,“脚本”,“dom”。
keys(object) :返回对象所有属性名(包括方法名)的集合数组。
values(object) :返回该对象的所有属性值。
debug(fn) & undebug(fn) :在给定方法的第一行增加或删除一个断点。
Fire bug API举例
<html>
<head>
<title>fire bug</title>
</head>
<body>
Name:<input id = "name" class = "normalText" type = "text"/> <br><br>
password:<input id = "password" class = "normalText" type = "password"/>
</body>
</html>
$(id )
 根据给定的id返回相应的元素。
步骤:
复制以上代码到一个空的HTML文件上,然后在firefox浏览器中打开它。
打开firebug控制面板(按F12键或点击右下角甲虫图标),点击控制台标签。
在命令行上输入$(’nameTextBox’) ,然后按回车键。
Fire bug 控制台数据显示
举例:抢车位
("","我的金币:"++" 钻石:"++" 经验:"++"/"++" 汽车数量:"++" 游戏等级:"+);