`
传说の黄花菜
  • 浏览: 201896 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

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

阅读更多

引言:

       命令行是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列表:

  1. $(id)
  2. $$(selector)
  3. $x(xpath)
  4. dir(object)
  5. clear()
  6. inspect(object[, tabName])
  7. keys(object)
  8. values(object)
  9. debug(fn) & undebug(fn)

 #1. $(id )

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

 例子(1.0)~

Html代码 复制代码
  1. < body >       
  2. Name :  < input   id = "nameTextBox"   class = "normalText"   type = "text"   />       
  3. </ body >     
<body>   
Name : <input id="nameTextBox" class="normalText" type="text" />   
</body>  

 

步骤~

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

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

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

输出结果~


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

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

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

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

         ·点击“运行”。

Js代码 复制代码
  1. var  txt = $( 'nameTextBox' );      
  2.      
  3. txt.value =  'Michael Sync' ;      
  4. txt.textAlign =  'center' ;      
  5. txt.style.color =  'blue' ;      
  6. txt.style.borderStyle =  'double' ;      
  7. 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)~

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

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

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

  
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′))。

<!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中打开“控制面板”标签。

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

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

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

 

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


#8. values(object)

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

例子:参考例子1.4

步骤~

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

    ·点击“控制台”标签

    ·跳转到多行命令行。

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

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

 

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


 

 

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

 

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


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

 

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

 

 

  • 大小: 27 KB
  • 大小: 29.4 KB
  • 大小: 47.2 KB
  • 大小: 17 KB
  • 大小: 6.8 KB
  • 大小: 5.1 KB
分享到:
评论

相关推荐

    firebug1.12-firebug1.11-firebug1.10-firebug1.9-firebug1.8-firebug1.7

    这个压缩包包含了Firebug从1.7到1.12的不同版本,让我们逐一探讨这些版本中的关键更新和特性。 1. Firebug 1.7: - 在这个版本中,Firebug引入了对HTML5新特性的支持,如离线存储(localStorage和sessionStorage)...

    firebug-2.0.16-是firefox下的一个扩展,能够调试所有网站语言

    Firebug是firefox下的一个扩展,能够调试所有网站语言,如Html,Css等,但FireBug最吸引人的就是javascript调试功能,使用起来非常方便,而且在各种浏览器下都能使用(IE,Firefox,Opera, Safari)。除此之外,其他功能...

    firebug-2.0.16-fx

    "firebug-2.0.16-fx"显然指的是Firebug的一个特定版本,2.0.16,专为Firefox浏览器(fx)设计。在这个版本中,Firebug提供了强大的功能来帮助开发者优化和调试网页应用。 1. **Firebug简介**:Firebug是一款开源的...

    firebug-1.11.2-fx.xpi

    firebug-1.11.2-fx.xpi一个不错的资源

    firebug-1.10.6-fx.xpi

    firebug-1.10.6-fx.xpi

    firebug-1.12.7-fx_82618

    而我们今天要关注的是其1.12.7版本,即"firebug-1.12.7-fx_82618",它代表了那个时代Firebug的集大成者。 1. Firebug核心功能: - HTML检查:Firebug允许用户实时查看和编辑网页的HTML结构,轻松定位并修改元素,...

    firebug-2.0.19-fx

    firebug-2.0.19-fx

    firebug-2.0.16-fx.rar

    Firebug-2.0.16-fx.rar是这个插件的一个特定版本,适用于Firefox 48.0。在这款版本中,Firebug包含了对网页元素、网络请求、JavaScript控制台、存储、命令行等多个关键开发功能的支持。 Selenium则是一个自动化测试...

    firebug-1.5.2-fx

    通过下载并安装"firebug-1.5.2-fx.xpi"文件,你可以在现代的Firefox上重温这个经典的工具,感受其在CSS、HTML和Div调试中的无尽魅力。 此外,"Readme-说明.htm"文件可能包含了关于插件的安装、使用方法和注意事项,...

    firebug-1.9.0-fx

    - **命令行API**:提供了一套强大的JavaScript命令行工具,用于运行表达式、操作DOM、触发事件等。 3. **Firefox 1.9.0对开发者的影响**: 这个版本的发布,让Firefox成为了开发者首选的浏览器之一,因为Firebug...

    火狐hackbar插件firebug-2.0.19-fx和hackbar-1.6.3-fx

    老版本的firebug-2.0.19-fx和hackbar-1.6.3-fx支持老版的火狐浏览器

    firebug-1.4.4-fx

    firebug-1.4.4-fx,jQuery的调试工具,firebug-1.4.4-fx,firebug-1.4.4-fx,firebug-1.4.4-fx,firebug-1.4.4-fx,firebug-1.4.4-fx

    初识Firebug全文--Firebug的使用.mht

    初识Firebug全文--Firebug的使用.mht初识Firebug全文--Firebug的使用.mht初识Firebug全文--Firebug的使用.mht初识Firebug全文--Firebug的使用.mht初识Firebug全文--Firebug的使用.mht初识Firebug全文--Firebug的使用...

    Firebug-yslow-培训讲稿

    Firebug-yslow-培训讲稿 Firebug-yslow-培训讲稿

    火狐插件firebug-2.0.16-fx

    总的来说,Firebug-2.0.16-fx是火狐浏览器开发者必备的工具之一,通过其丰富的功能,可以极大提高前端开发和调试的效率,同时也是学习Web开发技术的重要辅助工具。尽管现在火狐浏览器内置的开发者工具已经相当完善,...

    firebug-2.0.16-fx.zip

    标题中的"firebug-2.0.16-fx.zip"指的是Firebug的2.0.16版本的Firefox扩展程序的压缩包文件。Firebug是一款经典的Web开发工具,它集成在Firefox浏览器中,允许开发者实时查看、调试和修改HTML、CSS以及JavaScript...

    firebug-1.10.1-fx.xpi

    在经过了12个alpha以及4个beta版本后,Firebug团队终于发布了Firebug 1.10正式版,兼容Firefox 13~16版本。

    firebug-1.9.2-fx.xpi

    Firebug 为你的 Firefox 集成了浏览网页的同时随手可得的丰富开发工具。你可以对任何网页的 CSS、HTML 和 JavaScript 进行实时编辑、调试和监控。\n\n访问 Firebug 网站来查看文档、截屏以及讨论组(英语):...

    firebug-1.3.3-fx最新版

    firebug-1.3.3-fx.rar FireFox 调试工具,需要的下

    firebug-1.12.5-fx.xpi

    firebug插件 火狐浏览器最新版:http://download.csdn.net/detail/bingqilin88/6590763

Global site tag (gtag.js) - Google Analytics