[翻译]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）~

<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">

<head>

<title>Firebug</title>

div{

background-color:Black;color:White; border: solid 1px grey;

}

</style>

</head>

<body>

<br />

</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">

<head>

<title>CommandLine - $</title>

</head>

<body>

<h2>All about Firebug</h2>

</div>

<p>Firebug is the most popular tool in web revolution.</p>

</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');

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

<head>

<title>Keys and Values</title>

</head>

<body>

<tr>

</tr>

</table>

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">

<head>

<title>Monitor and Profiler</title>

function func1(){

//doSomething

}

function func2(){

//doSomething

}

function func3(){

//doSomething

}

</script>

</head>

<body>

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

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

posted @ 2008-04-25 18:15 looping 阅读(1738) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Coding,changing

写程序，踢足球，弹吉他~~

[翻译]firebug指南----使用命令行接口

公告