[翻译]firebug指南----使用命令行接口
继续翻译~~~
原文地址:http://michaelsync.net/2007/09/15/firebug-tutorial-commandline-api
第一部分:控制台标签:在firebug中使用命令行
简介
命令行是firebug中最有用的功能之一。如果你在使用VS中有些经验,当调试的时候,你可能知道VS的“immediate window”和“watch window”。
firebug的命令行就像VS中的"immediate window"一样,你可以在任何时候检查特定的对象的值。更好的是,firebug的命令行也可以在设计的时候使用(注意:vs 的"immediate"窗口只能在调试的时候使用)。并且,另外一个优势是你可以在命令行写javascript代码然后实时地执行它。
命令行的接口列表可以在firebug的官方网站上找到【链接:http://getfirebug.com/commandline.html】。在这个指南中,我要写些使用命令行的例子。我希望你觉得他有用。
命令行的类型
在控制台面板中有两种命令行的类型。
单行命令行
多行命令行
单行命令行
这个是firebug控制台面板中默认的。它允许你一次写一个。单行命令行的优势是它支持自动完成功能。
什么是自动完成?(参考http://getfirebug.com/cl.html)
使用tab键你可以自动完成变量的名字和对象属性。不断的敲它,你可以循环所有的可能性集合,用shift+tab后退。
自动完成工作在很多层次。你可以直接按下tab键来循环全局变量,而不用输入任何东西。你可以输入“document.b”,再按TAB,来遍历所有以"b"开头的属性。你甚至可以输入一个复杂的表达式像“document.getElementsByTagName(’a')[0].”来看文档中第一个链接的所有属性。另外,你可以使用“上”“下”得到你刚才输过的命令。
多行命令行
多行命令行是单行命令行的增强版。它允许你不止一次输入js代码。并且,你可以随时执行这些代码。
单行和多航模式都有他们自己的优点。你可以根据你要做的东西来选择使用哪一个。对我来说,我绝大数情况下是使用单行命令模式。
命令行接口的例子
在读这个指南之前,注意所以的接口都可以在设计和调试的时候使用。然而,当你在调试模式的时候,这个是更有用的。我要告诉你这些是因为你可能在考虑你为什么需要这些API
下载~ Demo Zip File
api列表
- $(id)
- $$(selector)
- $x(xpath)
- dir(object)
- dirxml(node)
- cd(window)
- clear()
- inspect(object[, tabName])
- keys(object)
- values(object)
- debug(fn) & undebug(fn)
- monitor(fn) & unmonitor(fn)
- monitorEvents(object[, types]) & unmonitorEvents(object[, types])
- profile([title]) & profileEnd()
#1.$(id)
根据特定ID返回单个元素。
这个是js中document.getElementById(”)的缩写版
例子(1.0)~
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
怎么做:
- 把上边这段代码粘贴到一个空白的html文件中然后在firebug中打开。
- 打开firebug然后单击"console"选项卡。
- 在命令行中输入$(’nameTextBox’)并且按回车。
输出~
它看起来非常简单(但是不是非常有用),但是我要说的是,当你在调试模式的时候或者是在多命令行写脚本的时候非常有用。
让我们看看怎样使用多命令行模式,怎样即时执行javascript.
- 点击"Options>Larger Command line"
- 复制下边的代码然后把他们粘贴到多命令行窗口(多命令行)
- 点击“run”
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
结果~~
#2.$$(选择符)
返回一个匹配特定css选择符的数组。
例子( 1.1 )~
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
注意:我在这个例子中使用了“css类型选择符”
步骤:
- 在命令行中输入$$('div')然后按回车键(你将得到一个数组中含有两个div对象(div1和div2)
#3.$x(xpath)
返回一个匹配特定xpath表达式的元素集合。
注意:如果你不了解XPath,你可以看下xpath指南here [^].
例子(1.2)~
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
我们将要在多行命令行中测试。
把这个代码粘贴在多行命令行模式。
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
结果~
#4.dir(object)
输出和这个对象有关的所有属性的列表。这个和你在点击dom选项卡后看到的效果一样。
它像我在第一部分中提到的console.write()。所有我认为你已经有些想法了关于console.dir是什么并且怎么使用。这个例子,我将不使用新的HTML代码,而是使用前边的例子代替(例1.2)并且我将改变在多行命令行中的代码。
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
下边的图片显示出了这个例子的结果。你将会得到这三个div对象的所有属性和方法。(leftsidebar, content, rightsidebar)
#5. dirxml(note)
输出一个html和xml元素的XML资源树,这个和你直接单击html选项卡一样。你可以单击任何一个节点来查看。
#6. cd(window)
默认情况下,命令行表达式和页面最高层的窗口有关。cd()允许你使用在页面中框架的窗口。
注意:这个API看上去不能正常工作。我将通知firebug团队并且让你们知道结果。
#7. clear()
清除控制台。如果你想清除控制台,输入这个命令“clear()”按回车。你也可在在js代码中输入"cosole.clear()".
#8. inspect(object[,tabName])
在一个最合适的标签中检查对象,或是通过可选的参数实现标签识别
可用的标签名字是“html”, “css”, “script”, 和“dom”.
步骤~
- 在firefox中打开“example1.2”
- 在单行模式中输入inspect($(’content-header’),’html’)
- html选项卡被打开并且名为“content-header”的div被选择。(对照下边的图片)
#9. keys(object)
返回一个数组,数组中包含这个标签的对象的所有属性的名字。这个对象可以是js对象( eg: var objCar = new Car() )或者是html对象(eg: document.getElementById(’table1′))。
例1.4~
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
步骤~
- 在ff中打开“example 1.4”
- 打开“console”选项卡
- 单击选项菜单中的“Larger command line”
- 写下下边的代码 var o = new Car();keys(o);
- 你会得到js类“Car”的所有属性的名字。
注意:如果你想练习这个API,请试着用这个API得到名叫“tbl1”表的所有属性的名字。让我知道你得到的结果是什么。
#10. values(object)
返回一个数组,数组中含有这个对象的所有属性的值。
例子:参考 例1.4
步骤~
- 在ff中打开"example1.4"
- 打开“console”选项卡
- 点击“Larger Command Line“
- 在命令行中写下下边的代码 var o = new Car();
<strong>values(o);</strong> - 你将得到js类"car"的所有属性的值
注意:因为getManufactor是个函数,所以它显示"object"(绿色链接),而不是值"Toyota"
#11. debug(fn) and undebug(fu)
在函数的第一行添加或者移除一个断点。
注意:在这个指南中,我不介绍这个API。关于这个,请读下个部分。
#12. monitor(functionName) and unmonitor(functionName)
打开/关闭函数调用记录日志
通常,如果我们想知道一个特定的函数是否被激发。我们通常使用"alert()"或者"console.log()"。如果我们使用了很多js文件,那就是一个相当大的工作量了。因为我们需要在所有的js文件中找到这个函数,然后再放上"alert()"或者是"console.log",并且再一次保存那个文件然后在浏览器中运行。用了firebug你不需要做那些事情了。你只需要知道这个函数,你可以跟踪他被执行了多少次。当你监视的那个函数被激发后,你可以在控制台中得到通知。另外,它将会给你指向这个函数的链接。
例1.5~
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
步骤~
- 在单行命令行中输入"monitor(func1)"(等几秒钟直到">>>monitor(func)")在命令行中显示。
- 然后,你可以点击这些按钮中的任何一个来激发你想要的函数
- 虽然我们一直监视"func1()"函数,无论何时你点击"invoke func1()"按钮,我们得到链接通知(对比下边的图片)。但是当你单击其他链接的时候,你将得不到任何东西。这是监听的API在firebug中的工作原理。当你监视的函数激发后,你会得到通知。
- 输入"unmonitor(func1)"来移除对func1()的监视。
结果~
#13. monitorEvents(object[, types]) and unmonitorEvents(object[, types])
快速打开或关闭对一个对象的所有事件的记录
可选参数"types"可以具体指定一个具体的事件集合来记录。最常用的值是"mouse"和"key"
这些可用的类型的列表包括composition”, “contextmenu”, “drag”, “focus”, “form”, “key”, “load”, “mouse”, “mutation”, “paint”, “scroll”, “text”, “ui”, 和“xul”
注意:不幸的是,这个API不能正常工作。以后我将和firebug团队联系并且更新她,对不起。
#14. profile([title]) and profileEnd()
打开和关闭javascript profiler。这个可选的参数标题包含在报告头中输出的文本。有三种方式可以打开javascript profiler
- 单击"Profile"按钮
- 在js代码中使用console.profile(’My Profiler Title’)
- 在命令行中使用profile(’My Profiler Title’)
如果你想知道更多关于在firebug中profiler的信息。请阅读我以前的指南(Firebug Tutorial - Logging, Profiling and CommandLine (Part II)).
总结
这个都是关于控制台选项卡的。即使仅仅一个选项卡,我也必须把我的指南分成三部分part 1, part 2 和这个)。现在我现在已经解释了关于控制台选项卡的所有事情。希望你觉得他有用
如果你有任何意见或者建议,请联系我。