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來開發的同學,能夠提高自己的開發效率