您的位置:首页 > 其它

firebug指南----使用命令行接口

2010-09-21 12:53 323 查看
原文地址: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)~


<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

单击"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 和这个)。现在我现在已经解释了关于控制台选项卡的所有事情。希望你觉得他有用

如果你有任何意见或者建议,请联系我。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: