轉載自:?http://blog.csdn.net/xmphoenix/article/details/6299898

在本章里，我們將討論Firebug提供的，以支持JavaScript的開發、調試、概覽、以及測試的各種工具。在這里我們將采用典型的 JavaScript用例的方式，并解釋如何使用Firebug來實現這些用例。

在本章里，我們將討論以下主題：

• 命令行API及其功能
• 控制臺API
• 單步JavaScript調試
• 插入條件或無條件斷點

命令行API

在第2章“Firebug窗口概覽”中，我們已經看到了如何使用命令行，這里，我們將討論的是命令行API提供的一些方法（methods）。這些方法將幫助我們調試JavaScript。下面是具體的描述與用法：

$(id)

這個方法類似于JavaScript中的document.getElementById()。它返回指定ID的單個元素。

我們將使用下面的HTML代碼來解釋$(id)方法。將這些代碼寫在一個HTML文件中，并用Firefox將其打開。

現在，當我們在Firebug的命令行中執行如下代碼，我們將看見如下的輸出窗口：

$("test_id")

$$(選擇器)

這個方法返回由指定CSS選擇器匹配元素所組成的數組。

Tip

關于CSS選擇器更多的信息，可以參考這個鏈接：http://www.w3.org/TR/css3-selectors

下面的HTML代碼片段顯示在其DOM樹上有四個HTML元素。我們將使用$$(選擇器)的方法來選擇全部四個元素：

下面的截圖顯示了在Firebug的命令行中執行 $$('input') 之后的輸出結果：

Tip

為了在Firebug的單一命令行執行代碼，你需要去掉“控制臺”標簽下拉菜單中的“更大的命令行”選項選擇。

$x(xpath)

此方法返回與給定的XPath表達式相匹配的元素的數組。

Tip

關于XPath更多的信息請參考：http://www.w3schools.com/xpath

為了解釋此方法，我們將使用前面的HTML文件來講解。現在，當我們在Firebug命令行執行如下代碼，我們將在Firebug的控制臺標簽頁看到輸出結果：

var objs = $x('html/body/input') console.log(objs[0].name) console.log(objs[1].name) console.log(objs[3].name) console.log(objs[3].name)

Note

多行命令行：為了方便，Firebug提供了一個多行命令行編輯器。這是一個迷你編輯器，我們可以在其中輸入多行JavaScript命令，甚至輸入完整的JavaScript程序，并且我們可以即時執行這些代碼。我們可以通過點擊控制臺標簽頁內右下角的紅色圖標來打開這個多行編輯器。

dir(對象)

這個方法打印出對象的所有屬性的交互清單。這個結果與我們在DOM標簽頁內看到的是一致的。

讓我們來看一下與我們在$$(選擇器)方法中使用過的HTML代碼。如果我們在Firebug的命令行中執行下面的代碼，我們將會得到如下的輸出：

var objs = $x('html/body/input') dir(objs)

dirxml(節點)

這個方法將打印一個HTML或XML元素的XML源碼樹。這個結果與我們在HTML標簽頁內看到的結果是一致的。我們可以在HTML標簽頁內點擊任意節點來觀察它。

使用相同的HTML文件，在Firebug的代碼行中執行如下代碼將得到其XML源碼樹。下面的截圖顯示了在控制臺標簽頁內產生的輸出結果：

var obj = $$('body')[0] dirxml(obj)

我們可以用$(id)選擇一個節點后，再將其傳遞給此方法，或者采用與此類似的其他獲取一個節點的方法。

默認情況下，命令行表達式是與頁面的頂層窗口相關的。cd()方法將使我們可以使用頁面內的框架窗口。

clear()

這個方法將對控制臺清屏。此方法提供的功能也可以通過點擊“清除”按鈕實現，這個按鈕在控制臺標簽頁的左上角。

inspect(object[, tabName])

這個方法讓我們可以用最適合的標簽來檢查一個對象，或者使用與可選參數tabName相一致的標簽。

可以使用的標簽名字有HTML、CSS、SCRIPT，以及DOM。

現在，對我們已經打開的HTML文檔，我們在Firebug的命令行中輸入下面代碼。輸出結果將顯示在HTML標簽頁內，截圖如下：

inspect($$('input')[0], 'html')

keys(object)

這個方法返回一個包含此對象所有屬性的名字的數組。

還是使用我們前面使用的HTML文件為例，執行下面的代碼將顯示第一個input標簽的全部屬性、實體、函數和常量：

keys($$('input')[0])

values(object)

這個方法將返回一個包含該對象所有屬性值的數組。

執行下面的代碼將顯示DOM樹中第一個input標簽的所有屬性值。

values($$('input')[0])

debug(fn)和undebug(fn)

這兩個方法將在函數的第一行增加或移除斷點。

我們將在后面第8章“AJAX開發”中學習這些方法的細節內容。

monitor(函數名)和unmonitor(函數名)

這些方法被用來打開或關閉對一個函數所有調用的日志記錄。

通常，為了查看JavaScript中某個函數是否被調用，我們在其內部設置alert()或console.log()方法。這是非常繁瑣的事情。首先，我們不得不在一個大的JavaScript文件中找到這個方法，然后我們需要添加alert或log方法。接下來，當我們看到每樣事情都對了，我們需要從代碼中移除所有的這些日志聲明。

Firebug用巧妙的方式來處理這種監視工作。為了判斷某個函數是否被調用，我們僅僅需要知道函數的名字就可以了。通過使用monitor()方法，我們可以跟蹤發現該函數被調用了多少次。我們將在控制臺上看到提示，告訴我們正在被監視的函數是否被調用了。并且，它還會給我們一個指向函數腳本的鏈接。

我們以下面的代碼為例來進行討論，創建一個HTML文件，輸入以下代碼，并且用Firefox瀏覽器打開這個文件：

This is the body ;

現在，在命令行輸入下面的代碼并且執行：

monitor(function1)

點擊本文檔中的按鈕“Invoke function1()”。我們將看到，無論何時只要調用了一次function1()函數，Firebug就會在控制臺面板上顯示其日志記錄。如果我們在控制臺面板上點擊function1()的鏈接，將跳轉到function1()函數所在的行。

下面的代碼將取消對function1()函數的監控：

unmonitor(function1)

monitorEvents(object[, types])

此方法將開啟對發送到一個對象的所有事件的日志記錄。可選的參數類型指定只記錄特定的消息族。類型中最常使用的值是mouse和key。

全部可用類型包括：composition, context menu, drag, focus, form, key, load, mouse, mutation, paint, scroll, text, ui, 以及 xul。

unmonitorEvents(object[, types])

此方法關掉發送到某對象的所有事件的日志記錄。

監視和取消監視事件與日志事件是一樣的，關于日志事件我們已經在前一章討論過。

讓我們考察全面使用的HTML文件。在命令行執行下面的代碼并且點擊第一個按鈕：

monitorEvents($("button1"))

下面的截圖顯示了事件監控情況：

profile([title])和profileEnd()

這兩個方法用于開啟和關閉JavaScript概況器。可選參數title將作為概況報告的抬頭打印在文本中。

下面是在Firebug中啟動JavaScript概況器的三個方法：

• 在控制臺標簽頁內點擊“概況”按鈕
• 從JavaScript代碼中使用console.profile("Profiler Title")
• 從命令行中使用profile("Profiler Title")

為查看概況器產生的統計信息，輸入如下HTML代碼，并保存為HTML文件，然后在瀏覽器中打開此文件。按F12打開Firebug并且點擊“Start”按鈕。

Click this button to profile JavaScript

下面截圖顯示了概況器產生的統計信息：

概況器的欄目與描述

• 函數（Function）：此欄顯示每個函數的名字。
• 調用（Call）：此欄顯示該函數被調用的次數。（在本例中loop()函數被調用了3次。）
• 百分比（Percent）：此欄顯示每個函數消耗的時間百分比。
• 占用時間（Own Time）：此欄顯示在某個函數中代碼所占用的時間。例如，foo()沒有自己的代碼。相反，它只是調用其他函數。因此，它的執行時間占用大約是~0毫秒。如果你看本欄的某些值，我們在此函數內添加一些循環。
• 時間（Time）：此欄顯示函數從開始的地方到結束的地方執行所花時間。例如，foo()沒有代碼。所以，它的執行時間大約是~0毫秒，但是在這個函數里要調用其他函數。所以，其他函數執行的全部時間是4.491毫秒。于是，這里顯示了4.54毫秒，這是三個loop()函數執行的時間加上自身foo()函數執行的時間之和。
• 平均時間（Avg）：此欄顯示某個函數的平均執行時間。如果我們僅僅調用一次這個函數，我們將看不到差別。但如果此函數被調用了多次，我們將看出差別。計算公式如下：

  平均時間＝自身代碼執行時間 ／ 調用次數

• 最小時間和最大時間（Min and Max columns）：這里顯示的是函數的最小執行時間。在我們的例子中，我們調用loop()三次。當我們傳遞1000作為參數時，大約只消耗了很短時間（0.045秒），當我們傳遞100000給此函數時，它消耗更長的時間（4.036秒）。所以，在本例中，最小時間將顯示0.045秒，而最大時間顯示為4.036秒。
• 文件（File）：此欄顯示函數所在的文件的文件名，并顯示所在行數。

控制臺API

Firebug對所有加載的頁面增加了一個全局變量，命名為“console”。這個對象包括許多方法，這些方法使得我們可以向控制臺寫入信息，以揭示出腳本運行中的信息。

console.log(object[, objcet, ...])

這個方法向控制臺寫入一個消息。我們可以傳遞任意多的參數，這些參數在一個空格分隔行內被鏈接起來。

log的第一個參數也許是包含類似printf字符串替換模式的字符串。例如：

console.log("The %s jumped over %d tall buildings", animal, count);

上面的例子可以用非字串替換的方式來重寫，效果一樣：

console.log("The", animal, "jumped over", count, "tall buildings");

這兩個技術可以聯合起來用。如果我們使用字符串替換模式，但是給出的參數多過替換模式使用的參數，其余的參數將附加在空格分隔行內，如下面的代碼所示：

console.log("I am %s and I have:", myName, thing1, thing2, thing3);

如果對對象進行了日志記錄，這些對象顯示出來的就不止是靜態文本，還有交互式的超鏈接，這些鏈接分別指向Firebug中與該對象相關的HTML、CSS、腳本或DOM標簽頁。我們也可以使用%o的模式在字符串中替換超鏈接。

下面是我們可以使用的字符串替代的全部模式：

Table�1.1.�

字符串
替換模式

%s
字符串

%d, %i
整數（還不支持格式化的數值）

%f
浮點數（還不支持格式化的數值）

%o
對象鏈接

console.debug(object[, object, ...])

此方法把一個消息寫到控制臺，這個消息包括了指向此方法被調用的行的超鏈接。

console.info(object[, object, ...])

此方法向控制臺寫入一個消息，這個消息帶有可視化的信息圖標（info icon）、作色代碼、以及指向此方法被調用的行的超鏈接。

console.warn(object[, object, ...])

此方法向控制臺寫入一個消息，這個消息帶有可視化的警告圖標、作色代碼、以及指向此方法被調用的行的超鏈接。

console.error(object[, object, ...])

此方法向控制臺寫入一個消息，這個消息帶有可視化的錯誤圖標（error icon）、作色代碼、以及指向此方法被調用的行的超鏈接。

console.assert(expression[, object, ...])

此方法測試一個表達式是否為真，如果不是，它將向控制臺寫入一個消息，并拋出異常。

console.dir(object)

此方法打印出對象的所有屬性的交互式列表。看起來與我們在DOM標簽頁中看到的視圖是一致的。

console.dirxml(node)

此方法打印HTML或XML元素的XML源代碼樹。這與我們在HTML標簽頁中看到的是一致的。我們可以通過點擊節點在HTML標簽頁內檢查此節點。

console.trace()

此方法輸出Javascript代碼在被調用時所執行交互式棧的跟蹤。

這個棧跟蹤列出了棧中的函數細節，以及每一個傳遞給函數的參數值。通過點擊函數，將轉到腳本標簽頁內相應代碼的位置。并且，點擊參數值將可以查看其在DOM或HTML標簽頁中的情況。

console.group(object[, object, ...])

此方法想控制臺寫入一個消息，并且以后向此控制臺寫入的消息都被縮進的嵌入一個塊中。調用console.groupEnd()可以關閉這個塊。

console.groupCollapsed(object[, object, ...])

這個方法類似于console.group()，只不過這個塊最初是折疊的。

console.groupEnd()

此方法關閉被console.group()或console.groupEnd()最近打開的塊。

console.time(name)

此方法用給定的名字創建一個新的計時器。用相同的名字調用console.timeEnd(名字)將停止計時器并且打印出所耗用的時間。

console.timeEnd(name)

此方法終止console.time(name)所創建的定時器，并打印出消耗的時間。

console.profile([title])

此方法啟用JavaScript概寫器。作為可選項的參數將會出現在概寫報告的頭部。

console.profileEnd()

此方法將關閉JavaScript概寫器并打印出報告。

console.count([title])

此方法將返回count被調用的代碼行的執行時間。作為可選參數的標題，將會在count所在行增加一個消息輸出。

Note

控制臺是一個附加到Web頁面的窗口對象上的對象。在Firebug中，這個對象僅僅在控制臺被啟用時附加。在Firebug Lite，如果Lite在此頁中已經安裝，則控制臺就被附加上。

JavaScript調試

本節介紹使用Firebug如果在內部和外部調試JavaScript。在開始之前，先回憶一下前面章節所介紹的內容：

• 腳本標簽頁
• 命令行API
• 控制臺API

使用Mozilla的Firefox和Firebug來調試JavaScript是一個非常直觀的過程。如果我們是Visual Studio的開發者，我們將不會感到使用Firebug來調試JavaScript有什么不同，除了調試器是作為瀏覽器的一部分之外。

Firebug中單步調試JavaScript

在一個編輯器中輸入下列代碼，并保存為.html文件，然后使用Firefox打開它：

現在在瀏覽器中按F12來打開并激活Firebug。點擊“腳本”標簽頁，并在第6行插入斷點，如下面的截圖所示：

Note

為了核實我們已經插入斷點，我們可在腳本標簽頁的右邊“斷點”面板中查看斷點列表。

在第6行顯示一個大的紅點，表明這里插入了一個斷點。現在，點擊“Click Me!”按鈕來執行JavaScript代碼。

一旦我們點擊，JavaScript將停在第6行，斷點所在的地方。

現在我們可以單步調試JavaScript，通過點擊在腳本標簽頁下的這些按鈕來操作：繼續、單步進入、單步跳過、單步退出。

• 繼續（F8）：只要腳本的執行被另一斷點所終止，這個按鈕就使得我們可以繼續腳本執行。
• 單步進入（F11）：這個按鈕可以使我們單步進入另一個函數的內部。
• 單步跳過（F10）：這個按鈕使我們可以單步跳過函數調用。
• 單步退出：這個按鈕使我們可以繼續腳本的執行并停在下一個斷點。

現在，我們點擊“單步跳過”并按F10執行第6行并移動到第7行。注意右邊的“監控”面板中的divElement的值。在執行第6行之前該值是undefined，在執行第6行之后，它被賦予一個HTML的div元素作為值。讓我們來看下面的截圖：

如果我們想要看看調用及執行流的棧的情況，只需要點擊在腳本標簽頁的右邊點擊“堆棧”標簽。

總結

以上是生活随笔為你收集整理的[转] 用Firebug调试JavaScript的全部內容，希望文章能夠幫你解決所遇到的問題。

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