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列表

1. $(id)
2. $$(selector)
3. $x(xpath)
4. dir(object)
5. dirxml(node)
6. cd(window)
7. clear()
8. inspect(object[, tabName])
9. keys(object)
10. values(object)
11. debug(fn) & undebug(fn)
12. monitor(fn) & unmonitor(fn)
13. monitorEvents(object[, types]) & unmonitorEvents(object[, types])
14. profile([title]) & profileEnd()

#1.$(id)

 

根据特定ID返回单个元素。

这个是js中document.getElementById(”)的缩写版

 

例子（1.0）~

< body >
Name :  < input id = " nameTextBox "   class = " normalText "  type = " text "   />
</ body >

 

怎么做：

• 把上边这段代码粘贴到一个空白的html文件中然后在firebug中打开。
• 打开firebug然后单击"console"选项卡。
• 在命令行中输入$(’nameTextBox’)并且按回车。

输出~

 

它看起来非常简单（但是不是非常有用），但是我要说的是，当你在调试模式的时候或者是在多命令行写脚本的时候非常有用。

让我们看看怎样使用多命令行模式，怎样即时执行javascript.

• 点击"Options>Larger Command line"
• 复制下边的代码然后把他们粘贴到多命令行窗口（多命令行）
• 点击“run”

 

var txt  =  $( ' nameTextBox ' );

txt.value  =   ' Michael Sync ' ;
txt.textAlign  =   ' center ' ;
txt.style.color  =   ' blue ' ;
txt.style.borderStyle  =   ' double ' ;
txt.style.borderColor  =   ' pink ' ;

 

结果~~

 

 

#2.$$(选择符)

 

返回一个匹配特定css选择符的数组。

 

例子( 1.1 )~

<! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
< html xmlns = " http://www.w3.org/1999/xhtml "   >
< head >
< title > Firebug </ title >
< style type = " text/css " >
div {
background-color:Black;color:White; border: solid 1px grey;
}
</ style >
</ head >
< body >
< div id = ' div1 ' > This  is  DIV1. </ div >
< br  />
< div id = ' div2 ' > Here  is  one more. </ div >
</ body >
</ html >

 

注意：我在这个例子中使用了“css类型选择符”

步骤：

• 在命令行中输入$$('div')然后按回车键（你将得到一个数组中含有两个div对象（div1和div2）

#3.$x(xpath)

返回一个匹配特定xpath表达式的元素集合。

注意：如果你不了解XPath,你可以看下xpath指南here [^].

 

例子（1.2）~

<! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
< html xmlns = " http://www.w3.org/1999/xhtml "   >
< head >
< title > CommandLine  -  $ </ title >
</ head >
< body >
< div id = ' container '  style = " width:800px " >
< div id = ' leftsidebar '  style = " width:100px; background-color:Gray;min-height:400px;float:left; " >   </ div >
< div id = ' content '  style = " width:600px;min-height:400px; background-color:ThreeDShadow;float:left; " >
< div id = ' content-header '  style = " padding:2px;font-family:Calibri,Trebuchet MS; " >
< h2 > All about Firebug </ h2 >
</ div >
< div id = ' content-body '  style = " padding:2px;font-family:Calibri,Trebuchet MS; " >
< p > Firebug  is  the most popular tool  in  web revolution. </ p >
</ div >
</ div >
< div id = ' rightsidebar '  style = " width:100px; background-color:Gray;height:400px;float:right; " ></ div >
</ div >
</ body >
</ html >

 

我们将要在多行命令行中测试。

 

把这个代码粘贴在多行命令行模式。

 

var obj  =  $x( ' html/body/div/div ' );
console.log(obj[ 0 ].id);
console.log(obj[ 1 ].id);
console.log(obj[ 2 ].id);

 

结果~

#4.dir(object)

输出和这个对象有关的所有属性的列表。这个和你在点击dom选项卡后看到的效果一样。

它像我在第一部分中提到的console.write()。所有我认为你已经有些想法了关于console.dir是什么并且怎么使用。这个例子，我将不使用新的HTML代码，而是使用前边的例子代替（例1.2）并且我将改变在多行命令行中的代码。

 

var obj  =  $x( ' html/body/div/div ' );
< strong > dir(obj); </ strong >

 

下边的图片显示出了这个例子的结果。你将会得到这三个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~

 

<! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
< html xmlns = " http://www.w3.org/1999/xhtml "   >
< head >
< title > Keys and Values </ title >
</ head >
< body >
< table id = " tbl1 "  cellpadding = " 0 "  cellspacing = " 0 "  border = " 0 " >
< tr >
< td > A </ td >
< td > B </ td >
< td > C </ td >
</ tr >
</ table >
< script language = " javascript "  type = " text/javascript " >
function Car() {
this.Model = "Old Model";
this.getManufactor = new function(){
return "Toyota";
}
}
</ script >
</ body >
</ html >

 

步骤~

• 在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~

<! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
< html xmlns = " http://www.w3.org/1999/xhtml "   >
< head >
< title > Monitor and Profiler </ title >
< script type = " text/javascript " >
function func1() {
//doSomething
}
function func2() {
//doSomething
}
function func3() {
//doSomething
}
</ script >
</ head >
< body >
< input id = " btn1 "  type = " button "  value = " Invoke func1() "  onclick = " func1(); " />
< input id = " btn2 "  type = " button "  value = " Invoke func2() "  onclick = " func2(); " />
< input id = " btn3 "  type = " button "  value = " Invoke func3() "  onclick = " func3(); " />
</ body >
</ html >

 

步骤~

• 在单行命令行中输入"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

1. 单击"Profile"按钮
2. 在js代码中使用console.profile(’My Profiler Title’)
3. 在命令行中使用profile(’My Profiler Title’)

如果你想知道更多关于在firebug中profiler的信息。请阅读我以前的指南(Firebug Tutorial - Logging, Profiling and CommandLine (Part II)).

总结

这个都是关于控制台选项卡的。即使仅仅一个选项卡，我也必须把我的指南分成三部分part 1, part 2 和这个)。现在我现在已经解释了关于控制台选项卡的所有事情。希望你觉得他有用

如果你有任何意见或者建议，请联系我。