firebug指南（二）---firebug命令行API详解(转)

xangqun

浏览: 82619 次
性别:
来自: 江西

最近访客更多访客>>

林祥纤

donchiang709

marklam

wangzff

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

Firebug JavaScript XHTML HTML Firefox

引言：

命令行是firebug中最有用的功能之一。如果你以前有过使用Visual Studio（简称VS）开发项目的经验，就应该知道你在使用VS进行调试程序的时候，“立即窗口（Immediate window）”和“监视窗口（Watch window）”的有用性。

firebug的命令行类似于VS的立即窗口，你可以在任意时候检查一个特定对象的值，包括在设计时期也可以正常使用（注：VS的立即窗口只能在调试程序的时候使用）。此外，firebug命令行还有一个好处就是能够直接输入javascript代码即时执行。

接下来列举出的所有firebug命令行API都是能在firebug的官方网站上找到的（网址：http://getfirebug.com/commandline.html ）。在这里我将会进一步结合例子介绍大部分的API，希望对各位读者能有一点帮助。

命令行种类：

在控制台面板中有两类命令行。

·单行命令行

·多行命令行

单行命令行：

单行命令行是firebug控制台面板中默认的，它允许我们每次只能输入一行命令。

此外，我们还能通过按键盘上的“↑”和“↓”键翻阅之前输入过的历史纪录。

单行命令行

多行命令行：

多行命令行是单行命令行的加强版，它允许我们一次可以输入多行 javascript代码同时执行。

单行命令行和多行命令行各有各的优点，因此，您可以根据不同的场景使用不同的命令行，对于本人而言，主要还是使用单行命令行为主。

命令行API（附带例子）：

在正式学习这些API之前，我先声明一下,虽然所有的API都可以在开发阶段和程序运行阶段使用，但是最能发挥firebug所长的还是在调试我们的 javascript程序的时候。如果我们只是利用firebug去开发javascript程序，也许其他一些IDE会比firebug更适合。

例子下载~ Demo Zip File

API列表：

$(id)
$$(selector)
$x(xpath)
dir(object)
clear()
inspect(object[, tabName])
keys(object)
values(object)
debug(fn) & undebug(fn)

#1. $(id )

根据给定的id返回相应的元素。

例子（1.0）~

Html代码

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

Html代码

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

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

步骤~

·复制以上代码到一个空的HTML文件上，然后在firefox浏览器中打开它。

·打开firebug控制面板（按F12键或点击右下角甲虫图标），点击控制台标签。

·在命令行上输入$(’nameTextBox’) ，然后按回车键。

输出结果~

这个用起来很简单（而且看上去似乎也没什么大用），但是我觉得这在多行命令行中进行javascript调试的时候是比较有用的。

接下来让我们来看看如何使用多行命令行进行javascript代码的调试。

·点击单行命令行右边“^”图标。

·将以下javascript代码拷贝到多行命令行中。

·点击“运行”。

Js代码

var txt = $( 'nameTextBox' );
txt.value = 'Michael Sync' ;
txt.textAlign = 'center' ;
txt.style.color = 'blue' ;
txt.style.borderStyle = 'double' ;
txt.style.borderColor = 'pink' ;

Js代码

var txt = $('nameTextBox');
txt.value = 'Michael Sync';
txt.textAlign = 'center';
txt.style.color = 'blue';
txt.style.borderStyle = 'double';
txt.style.borderColor = 'pink';

var txt = $('nameTextBox');   
  
txt.value = 'Michael Sync';   
txt.textAlign = 'center';   
txt.style.color = 'blue';   
txt.style.borderStyle = 'double';   
txt.style.borderColor = 'pink';

输出结果~

#2. $$(selector)

返回根据给定的CSS选择器相匹配的元素数组.

注意：如果你还不清楚什么是CSS选择器，请点击此处。

例子（1.1）~

Html代码

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

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

步骤：

·在命令行中输入$$(’div’)，然后敲击回车键（你将得到所有的div元素数组（div1和div2））。

#3. $x(xpath)

返回给定xml路径（xpath）相匹配的元素数组。

注意：如果你对xpath还不是很了解，请点击这里。

例子（1.2）~

Html代码

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

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

此例子我们将用多行命令行进行测试。

将下列代码粘贴到多行命令行中。

Js代码

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

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标签上展示节点属性的风格是一样的。

这个例子我们还将继续沿用例子1.2中的HTML文件，然后将下列javascript代码粘贴到多行命令行中：

Js代码

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

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

结果如下图所示，你将会得到这三个div元素的所有属性和方法(leftsidebar, content, rightsidebar)。

#5. clear()

清除控制台的内容。如果你想要清空控制台中的所有内容，只要在命令行中输入“clear()” 然后点击回车键即可。也可以在javascript代码中加入“console.clear()” 语句。

#6. inspect(object[,tabName])

在合适的标签中查看参数给定的对象，可选参数tabName可以强制制定跳转到哪个标签查看。这些合适的标签包括“HTML”，“css”，“脚本”，“dom”。

步骤~

·在firefox浏览器中打开“example1.2”。

·在单行命令行中输入($(’content-header’),’html’) 。

·firebug将会自动跳转到HTML标签所对应的视图，而id为“content-header”的div标签将会被自动选择上（如下图）。

#7. keys(object)

返回对象所有属性名（包括方法名）的集合数组。对象可以是javascript对象( 如: var objCar = new Car() ) 或者也可以是HTML元素(如: document.getElementById(’table1′))。

Html代码

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

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

步骤~

·在firefox浏览器中打开“example1.4”。

·在firebug中打开“控制面板”标签。

·打开多行命令行（点击单行命令行右边“^”图标）。

·将下列代码粘贴到多行命令行上。

Js代码

var o = new Car();
keys(o);

  
var o = new Car();   
keys(o);

·你将会得到“car”对象的所有属性名（包括方法名）（如下图）。

#8. values(object)

返回该对象的所有属性值。

例子：参考例子1.4

步骤~

·在firefox中打开“example1.4”。

·点击“控制台”标签

·跳转到多行命令行。

·将下列代码输入到多行命令行中。

Js代码

var o = new Car();
values(o);

var o = new Car();   
values(o);

·你将会得到所有"car"对象的属性值。

注意：由于getManufactor是car的一个方法，所有只显示object超链接，而不是直接显示他的返回值“Toyota ”。

#9. debug(fn) and undebug(fu)

在给定方法的第一行增加或删除一个断点。

注意：关于这部分内容，我将在这系列接下来的篇章中详细讲述，敬请期待：）

原文连接：http://04101334.iteye.com/blog/339695

分享到：

firebug指南（三）---在firebug中使用日 ... | firebug指南（一）---概览与安装(转)

2010-05-06 13:52
浏览 1095
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论