Firefox擴展Firebug是一個全功能的Web 應用程序調試器，可以協助Web黑客洞悉復雜的Web 應用程序的內部工作機制。它有兩種版本：一種可以跨瀏覽器使用的組件Firebug Lite，另一種是專用于專用于火狐瀏覽器的擴展Firebug。本文將著重向讀者介紹前者的用法。

一、簡介

瀏覽器擴展Firebug提供了一個集成環境，我們能夠在其中對感興趣的Web 應用程序進行的全面的分析（參見圖1）。它提供了許多功能，可以探索DOM結構、動態地修改HTML 代碼、跟蹤和調試JavaScript代碼、監視網絡請求和響應等等。

圖1  瀏覽器擴展Firebug

二、利用Firebug控制臺劫持函數

Firebug控制臺可以用來計算表達式。作用如同命令行JavaScript解釋器。在控制臺中，我們不僅可以輸入JavaScript表達式(例如，Alert (‘Message’);)，而且還能接收錯誤消息。如下圖所示：

圖2  Firebug控制臺

您也可以動態插入代碼，舉例來說，如果要測試一個Web 應用程序，該程序有一個從窗口對象導出的方法，稱為performRequest。應用程序使用該方法從客戶端發送請求到服務器。我們更感興趣的可能是這個函數請求的信息，所以我們將在控制臺中提供下列命令來劫持該方法：

window._oldPerformRequest = window.performRequest;
window.performRequest = function () { console.log(arguments);
window._oldPerformRequest.apply(window, arguments) }

上述代碼實際上將用我們自己的函數替換原先的performRequest函數，我們的函數執行時將在控制臺中列出所有參數。當函數調用結束時，我們將代碼流程重定向到oldPerformRequest定義的原先的performRequest上，它將執行要求的操作。現在，我們已經明白如何在無需改寫Web 應用程序的方法的情況下來劫持函數。

二、利用Firebug瀏覽和動態修改HTML元素

許多Web開發人員和設計者經常忽視HTML 源代碼的可讀性，尤其是用所見即所得的編輯器產生的頁面。這會加劇我們審查其源代碼的難度，這時，我們就需要使用其他一些工具來重新組織頁面的各個部分。當然，我們可以使用DOM Inspector來探索這些結構欠佳的HTML 源代碼，而Firebug也能達到同樣的目的，下面是Firebug的HTML視圖。

圖3   Firebug的HTML視圖

如圖3所見，可以選擇并展開當前視圖中的每個HTML 元素。當鼠標停在某個元素上的時候，瀏覽器就會高亮顯示對應元素。在右邊的窗口，顯示了關于式樣、布局和DOM 特性的信息。DOM信息極為有用，當您想查詢各種不同類型的屬性可用時，幾乎與DOM Inspector一樣。此外，我們也可以用它探索應用程序運行機制。舉例來說，AJAX應用開發人員經常會為圖像、鏈接及其他類型的html 元素添加附加的屬性，而這些屬性和方法可能是應用程序邏輯的關鍵部分。

HTML視圖還能用于動態地修改應用程序文檔的結構。我們可以通過按下鍵盤上的刪除鍵來刪除所選定的元素，或者修改各個元素的屬性，方法是在元素屬性上雙擊并設置它的值。注意，HTML 結構的改變可能對頁面更新事件不起作用。如果希望變化固定下來，可以使用GreaseMonkey腳本。

三、利用Firebug調試JavaScript腳本

Ajax 應用程序通常涉及JavaScript、XML和按需信息檢索。它們的規模常常超過正常應用程序，并且運行起來很像是桌面應用程序。因為大量使用JavaScript，所以您將發現標準漏洞估計程序將無法覆蓋所有可能的攻擊方式。就像二進制程序測試一樣，我們需要使用調試器來跟蹤代碼、分析程序結構和調查潛在的問題，Firebug為我們提供了所有這些功能，下圖向我們展示了Firebug腳本調試器視圖。

圖4  Firebug腳本調試視圖

在圖4中我們可以看到一個斷點，其位于第2行。 斷點是些偽指令，用來通知JavaScript解釋器當代碼抵達這些斷點時停止/中止該進程。一旦程序暫停，我們就可以查看存放在全局、局部變量中的當前數據，甚至更新它們。我們不僅可以通過它來了解程序正在干什么，并且還能取得對應用程序的完全控制。

在圖4的右邊，您可以看到監視和斷點列表。斷點列表包含我們在當前調試的代碼中設置的全部斷點。您可以迅速禁用和啟用斷點，但是卻無需知道斷點的精確位置。

監控列表提供了一個機制來監視DOM結構中的變化。舉例來說，如果想知道某個的值在程序運行過程中的變化情況，只須簡單創建一個相應的的監控條目即可。