清華大佬耗費三個月吐血整理的幾百G的資源，免費分享！....>>>

首先 更新你的火狐瀏覽器到最新版。直接按Ctrl+Shift+K 三鍵組合直接打開Firebug.

這里的調(diào)試網(wǎng)頁主要以修改百度的首頁。

具體用到的內(nèi)容會在實際中進行。

第一   調(diào)試網(wǎng)絡(luò)情況。

------------------------------------------------------------------------------

打開百度首頁。同時打開 firebug。（Ctrl+shift+K）

如圖所示 可以點擊網(wǎng)絡(luò)標簽查看 網(wǎng)頁的詳細的網(wǎng)絡(luò)請求。

其實，我感覺最有用的就是點擊下面的 XHR 標簽。打開異步請求過濾。可以查看 網(wǎng)站的異步請求情況。包括post數(shù)據(jù)。

之后點擊過濾出的請求。雙擊，就可以在右側(cè)查看請求的 參數(shù)信息以及發(fā)送的cookie等。可以通過此得到請求是否完成，請求的運行情況。

可以點擊上面的標簽查看請求的返回狀況。

如圖點擊響應(yīng)。可以查看 這個返回的json數(shù)據(jù)。

當然也可以  編輯這個請求。測試另外一請求是否正常，這樣的話，就不需要再次加載頁面運行了。

-------------------------------------------------------------------------------------

第二  調(diào)試網(wǎng)頁元素DOM。

有這樣的情況。我做出一個網(wǎng)頁，但是可能在配色或是左右上下邊距上需要進行調(diào)整。那么可以通過調(diào)整元素的css值或是 屬性值進行調(diào)節(jié)。

首先，如何預(yù)覽整個網(wǎng)頁的元素情況？

可以點擊查看器。點擊左側(cè)的箭頭，這時，可以在網(wǎng)頁內(nèi)部移動，鼠標移動到哪個元素上，會顯示哪個元素的邊框虛線。如圖：

 

如果我只想查看 百度上面的一個連接。我可以在該鏈接上右擊---->最下面的查看元素。一樣可以查看該連接的CSS等情況。如圖

如果我感覺 如果這個連接顏色是 黑色的話，可不可以更好一些？

那么可以右擊該鏈接---->查看元素。

然后查看右下角的css規(guī)則（這個規(guī)則是 css定義的）點擊右側(cè)的計算。可以查看實際執(zhí)行到元素的css樣式（可以有利于調(diào)試于元素的css值）

恩，黑色還比較好看。

OK。如果我感覺，其實我想把連接修改一些內(nèi)容和樣式那么會怎樣。

選中后，選中 html編輯。如圖

那么修改html元素如圖所示

點擊上面的空白處應(yīng)用修改后。

于是就如圖了：

當然也可以選擇元素后。雙擊進入修改。

-----------------------------------------------------------------------------------

第三  調(diào)試器。

調(diào)試器可以查看網(wǎng)頁請求的js腳本以及腳本的定義，以及腳本的變量的實時值。

如圖所示

當然也可以右擊，彈出中選擇插入斷點等。

可以移動到 變量上或是對象上。查對象的所有屬性以及事件以及值的情況。

如移動到nava 上，顯示所有的值等信息。

如果，我想查看某個函數(shù)的定義。比如我想查看

if (navigator.userAgent.indexOf('Firefox') != -1) {

ToolbarPluginComms = initToolbarPluginComms();

中 initToolbarPluginComms（）的定義。

雙擊 initToolbarPluginComms（）方法選中后。（必須選中。雙擊即可）

右擊 --- 搜索函數(shù)定義

可以查看函數(shù)的定義

如果所示找到了函數(shù)定義，可以查看具體的函數(shù)執(zhí)行細節(jié)。

如果 js腳本經(jīng)過了壓縮和簡單格式混淆。那么可以點擊左側(cè)的美化進行美化操作，如果所示。

如果想查看 腳本的運行情況。

可以點擊 

 F11 進行單步調(diào)試。

F10 直接跳到下一個斷點。

可以進入腳本信息內(nèi)部。

右側(cè)顯示的是 所在的腳本內(nèi)部的變量等信息可以進行實時查看。

如圖所示：可以在左上側(cè)的調(diào)試標簽中點擊進行單步等調(diào)試。

-------------------------------------------------------------------------------------

好了。目前只是簡單介紹了如何使用。