WEB調試工具－－FireBug的使用技巧

FireBug是頁面瀏覽器fireFox下的一款開發類插件，它集HTML查看和編輯，javascript的控制檯，網絡情況監視器於一體，是開發javaScript，html，css和ajax的得力助手。

 

Firebug是開發類插件.集編輯查看/控制檯.網絡情況監視一體,開發前端的得力工具.

（1）在線代碼測試工具：http://www.lvyestudy.com/tools/run_code.aspx；
（2）在線調色板：http://www.lvyestudy.com/tools/color_picker.aspx；

（3）CSS3圓角生成器：http://www.lvyestudy.com/tools/border_radius.aspx

 

Firebug插件下載網址：https://www.getfirebug.com

在firefox瀏覽器中用F12打開，Command+F12新窗口打開

 

 

FireBug窗口功能：

控制檯：JavaScript命令行操做、顯示JS錯誤信息、提示信息、日誌信息，右側可寫本身的JS命令。

HTML：顯示頁面的HTML源碼。

CSS：編輯頁面的CSS源碼。

腳本：顯示頁面腳本和調試。

DOM：顯示頁面對象和DOM屬性。

網絡：顯示頁面下載和花費時間。

Cookies：顯示頁面請求的Cookies，及查看和修改。

標籤能夠經過點擊其下拉菜單控制設置爲‘啓用’或者‘停用’。

小甲蟲能夠設置顯示或者不顯示某些標籤。

標籤欄左側的搜索框能夠進行相應的搜索。

 

 

打開Firebug的四種方法：

一、在右上方點擊小甲蟲。

二、點擊鼠標右鍵，選擇使用Firebug查看元素。

三、使用快捷鍵F12。

四、使用快捷鍵Command+Ctrl+C。

 

 

可用方向鍵進行微調字體，

- 按住↑或↓，每次以1個單位調整。

- 按住Ctrl+↑或Ctrl+↓，每次以0.1個單位調整。

- 按照Shift+↑或Shift+↓，每次以10個單位調整。

 

評估頁面下載速度：

一、分類別的查看下載文件和http請求

二、能夠查看http請示的詳細信息，是否成功、是否緩存、請求參數、響應的結果等

三、緩存狀態304

四、在調節寬度和高度這些數字值是可使用鍵盤上下鍵來增長或者是減小，同時也能夠經過shift+上下鍵 表示每按一下增長減小10 ctrl+上下鍵 表示每按一下增長減小0.1

 

 

AJAX即「Asynchronous Javascript And XML」（異步JavaScript和XML），是指一種建立交互式網頁應用的網頁開發技術。
一、AJAX = 異步 JavaScript和XML（標準通用標記語言的子集）。
AJAX 是一種用於建立快速動態網頁的技術。
經過在後臺與服務器進行少許數據交換，AJAX 可使網頁實現異步更新。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。
二、Ajax 的核心是 JavaScript 對象 XmlHttpRequest。該對象在 Internet Explorer 5 中首次引入，它是一種支持異步請求的技術。簡而言之，XmlHttpRequest 使您可使用 JavaScript 向服務器提出請求並處理響應，而不阻塞用戶。
三、XHR的做用就是對Ajax請求進行監聽。
四、XHR:XML HTTP REQUEST 輸入字符就會有請求參數，包含關鍵字參數，返回結果是下列的html代碼
當頁面向服務器發送get或post請求是，它會監聽這些請求，並在firebug下羅列起來。其中參數就是咱們請求的字符或者名字（鍵值對）。響應是從服務器中回覆的信息。

 

JS代碼的調試：<br>

腳本：可查看JS代碼，對其設置斷點（點擊左側行號便可）<br>

方法：單步進入、單步退出、單步跳過、繼續<br>

執行到斷點處，切換到監控欄，可改變斷點中相應的變量<br>

函數如何被調用：在代碼處寫入 console.trace();<br>//console.trace

概況欄：可進行簡單的性能分析

 

console.log("%d年%d月%日",2015,3,30);

console.group("第一組");

console.log("101");

console.group("第二組");

console.log("101");

 

console.time("test");

運行

console.timeEnd("test");

會輸出運行時間

 

一、查看JS代碼，設置斷點（點擊左側行號便可）

二、調試js功能代碼

F8：繼續

F10:單步跳過

F11：單步進入

Shift+F11：單步退出

三、console.trace()能夠知道函數如何被調用

點擊概況

等待頁面執行完畢

再次點擊概況，就會……

顯示函數被調用時的一些參數信息

 

 

進階提示

1)不要放過全部能夠點擊的地方

2)不斷地點擊右鍵，收穫驚喜

3)經過點擊下拉菜單，發現有趣的功能

4)小甲蟲所在的主菜單，擴展就在裏面

FireBug調試工具是火狐瀏覽器的組件，在火狐瀏覽器中添加FireBug便可在火狐瀏覽器打開的網頁中調試代碼。固然，其餘瀏覽器也有FireBug，但比火狐的稍微差一點。