Commandlinie是Firebug中總有用的一個特性。如果你有Microsoft Visual Studio的使用經驗，你就會知道“Immediate Window”
和“Watch Window”的作用，我倒是想起了AutoCAD中的Commandline，通過快速的輸入命令來完成操作。

Firebug中的命令行更像“Immediate Window”，你能夠在任何時候檢測代碼中的值，firebug命令行的一個好處就是可以在”設計時“
就查看代碼。另外還有一個優點就是你可以在命令行寫js語句并且讓他們立刻執行。

firebug commandline的詳細的api可以在官方的地址中看到：http://getfirebug.com/commandline.html

下面來詳細的介紹一下：

命令行的類型。firebug中有兩種類型的命令行：1、單行模式；2、多行模式；

1、單行模式。單行模式是firebug的默認命令行模式，它允許我們一次輸入一行代碼。單行模式的優點是支持自動完成。
?? ?這個很強大的，就像在終端中一樣，你還可以使用上下鍵來調入最近使用過的命令。
2、多行模式。多行模式是單行模式的加強版，它允許我們一次輸入多行代碼并且馬上執行。
這兩種模式都有各自的優勢，大家可以根據自己的情況選擇適合的模式。

Commandline API使用示例。

在使用之前，需要在提醒一下盡管這些API在運行時和DEBUG時都可以使用，但是他們在DEBUG時尤其有用，下面我們就來看看為什么。

API列表：

1、$(id)；
2、$$(selector);
3、$x(path);
4、dir(object);
5、dirxml(node);
6、cd(window);
7、clear();
8、inspect(object [,tagname]);
9、key(object);
10、values(object);
11、debug(fn) & undebug(fn);
12、monitor(fn) & unmonitor(fn);
13、monitorEvents(object [, tagname]) & unmonitorEvents(object [, tagName]);
14、profile(title) & profileEnd();

1、$(id)。
?? ?使用過Prototype的同學看到這個一定很親切。
?? ?對了，他的用法就和Prototype中的$一樣，在單行模式中，命令會將選擇的元素打印到console中
?? ?在多行模式中，你就完全可以像在Prototype中那樣使用它了。
?? ?對于Prototype不熟悉的同學可以查看參考資料中的連接了解更多的情況。

2、$$()。
?? ?返回給定CSS選擇器選中的元素數組。
?? ?關于CSS Selector（選擇器），相信了解一些CSS的人都有一些印象，Jqueyr將Css Selector發揚的很光大。
?? ?我在console中試驗了幾個jquery中的常用寫法，看來支持的還是不夠好。
?? ?
3、$x(xpath)。
?? ?返回給定xpath下的元素數組。
?? ?例如在一個包含多個p的div中，我們可以用下面的代碼獲得每個p。
?? ?var obj = $x('html/body/div/p');
?? ?console.log(obj[0].id);
?? ?console.log(obj[1].id);
?? ?console.log(obj[2].id);

4、dir(object)。
?? ?打印一個對象的所有屬性，結果形式和在DOM標簽中看到的一樣。
?? ?其實這個用法和console.dir()是一樣的。
?? ?var obj = $x('html/body/div/p');
?? ?dir(obj);
?? ?
5、dirxml(note)。
?? ?打印xml或HTML元素的樹形結構。打印的結果就像在HTML標簽中看到的一樣。
?? ?之前我們也接觸過console.dirxml()的用法，這兩個方法是一樣的。

6、cd(window)。
?? ?cd是用來在框架布局的不同窗口間切換，不過據說還不是很完善。
?? ?
7、clear()。
?? ?清除控制臺的內容，就像在Javascript中使用Console.clear()一樣。
?? ?
8、inspect(object [,TabName])。
?? ?在最適合的標簽中檢測一個元素，也可以通過TabName指定需要打開的標簽。
?? ?例如：
?? ??? ?inspect($('txt1'),'html');
?? ??? ?就會打開HTML標簽，并且選中id為txt1的元素。

9、keys(boject)。
?? ?返回指定名稱的對象的所有屬性的名稱數組。指定的名稱可以是Javascript對象，也可以是HTML的DOM元素。
?? ?function Car(){ ?
?? ? this.Model = "Old Model"; ?
?? ? this.getManufactor = new function(){ ?
?? ? return "Toyota"; ?
?? ? } ?
?? ?}
?? ?var o = new car()
?? ?我們可以用keys(o)獲得car對象的所有屬性。
?? ?
?? ?還可以獲得HTML元素的所有屬性名稱，比如 keys($('txt5'));

10、values(object)。
?? ?返回對象包含的屬性值的數組。
?? ?像keys一樣，我們既可以用在javascript上，也可以用在html元素上。
?? ?
11、debug(fn)和undebug(fn)。
?? ?在程序的開始處添加或刪除斷點。
?? ?
12、monitor(FunctionName)和unmonitor(FunctionName)。
?? ?打開或關閉函數調用的記錄。
?? ?通常，如果我們想知道一個函數是否被執行，我們會加入一個alert()或者console.log()來記錄。
?? ?這實在是一個累人的工作，特別是如果編輯一個很大的script文件的時候，我們需要找到這個函數，加入alert,console.log
?? ?保存然后再運行，我們需要不斷地保存、修改、運行來檢查函數在那里被執行了。
?? ?有了firebug你就不再需要這么累了，你只需要知道這個函數，然后你就可以跟蹤它，只要他被執行了，執行情況就會打印在
?? ?console窗口中。另外，console還會提供一個指向這個函數的連接。
?? ?
?? ?使用方法?? ?monitor(func1); 找到問題的原因后，我們還可以通過 unmonitor(func1)里解除對于函數的追蹤。
?? ?
13、monitorEvent(object [,types])和 unmonitorEvent(object [,types])。
?? ?打開或關閉對于對象動作的記錄。
?? ?
?? ?types表示的我們要追蹤的事件類型，最常用的就是'mouse'和'key'
?? ?完整的參數類型包括：“composition”, “contextmenu”, “drag”, “focus”, “form”, “key”, “load”, “mouse”, “mutation”, “paint”, “scroll”, “text”, “ui”, and “xul”
?? ?
?? ?不過不幸的是，這個API工作地不是很好，希望作者能夠在后繼的版本中完善一下。?? ??? ??? ? ?

14、profile([title])和profileEnd([title])
?? ?對于這個命令，我想看過上一篇的同學應該比較熟悉。這個就和console.profile()是一樣的，用來記錄頁面中js的執行情況
?? ?并在結束后給出分析報告。
?? ?
最后，希望每一位使用firebug來開發的同學，能夠提高自己的開發效率。
?? ??? ??? ?
[參考資料]
1、firebug commandline?? ??? ?http://michaelsync.net/2007/09/15/firebug-tutorial-commandline-api
2、prototype?? ??? ??? ??? ??? ?http://www.prototypejs.org/
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的Firebug Command Line 的使用技巧的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。