程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> .NET網頁編程 >> .NET實例教程 >> Firebug Command Line 的使用技巧

Firebug Command Line 的使用技巧

編輯:.NET實例教程


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. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved