firebug工具使用（上）

時間 2019-12-09

標籤 firebug 工具使用简体版

原文原文鏈接

基於fire-fox瀏覽器開發html

火狐瀏覽器--工具--附加組件--搜索到firebug--下載--重啓瀏覽器F12啓動瀏覽器

功能介紹緩存

按鈕一：配置信息，可設置文本信息如文字大小、自定義快捷鍵、版本號等等。性能優化

按鈕二：選擇網頁上的元素：當鼠標移動到網頁任意一個元素上面，信息欄就出出現對應的HTML和CSS代碼，點擊下方編輯按鈕就能夠修改對應HTML和CSS樣式網絡

按鈕三：腳本，能夠查看當前網頁的每個JS執行過程，具體詳見下方例子工具

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        var result = 0;
        for(var i =0 ; i<5;i++){
            result +=i;
        }
        alert(result);
    </script>
</head>
<body>

</body>
</html>

F12打開firebug，點擊腳本按鈕而且在代碼result +=i前面打上斷點在按F5刷新。意爲：當程序執行到result +=i這行會停下來，有利於調試。性能

此時右上出現幾個新的按鈕：測試

斷續：會跳過此次循環，執行下一次的循環；優化

單步進入：會一步步去執行代碼；網站

右方爲監控區域：針對上方代碼會顯示當前的一些數據,如 i=0、result=0等等；

點擊斷續，i直接+1，result也變爲result+i;

點擊單步進入：箭頭指向上面的for循環，鼠標移入也會看到當前對應的值。

集合斷續和單步進入就能夠直觀的看到程序執行的順序和運行結果

調試成功點擊斷點處就能夠取消斷點讓程序流暢運行了

DOM按鈕：針對當前變量的一些顯示信息，如i的值result的結果等

網絡按鈕：當前網頁的HTTP請求的信息，如圖片、CSS、腳本等。下方信息條包含URL(頭信息、響應、緩存)、狀態碼（200，304，404，,500）、域（請求來自哪裏以及詳細信息）、時間線（路由解析、創建連接、發送請教、等待響應、接收數據、DOMContentLoaded）

經過DOM按鈕能夠更好在測試環境或是線上對網站進行調試和一些性能優化

保持按鈕：常規來講當點擊跳轉到另外一個網頁，以前顯示在firebug的前網頁信息就會消失若是點擊此按鈕再跳轉到其餘網頁以前的網頁信息就會被保存在firebug中供調試用：以前操做的全部程序都會保存下來。

控制檯按鈕：最有用的按鈕。

控制檯介紹：

1向下箭頭：通常勾選：顯示JAVA SCRIPT錯誤、顯示XMLHTTPREQUESTS(顯示AJAX信息【參數、頭信息、響應狀態、HTML、JSON】用)、彈出自動補全列表（當在控制檯中輸入任意代碼會出現輔助提示信息以及一些簡單的判斷）如:

document.getElementById("div"),會自動打印null;

for(var i=0 ; i<5; i++){alert(i)},頁面中執行代碼5次；

經常使用控制檯語句：

console.log (控制檯輸出語句，alert每次執行會阻止後面代碼運行，調試時不方便)，例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
     var i = 0;
     setInterval(function(){
         i++;
         console.log(i);
     },1000)
    </script>
</head>
<body>

</body>
</html>

就會在控制檯循環打印i出來

console warn:警告信息

console error:錯誤信息

console group:分組（當前信息很是多的時候使用）方法以下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
    console.group("第一組");
        console.log(1);
    console.groupEnd();    
    </script>
</head>
<body>

</body>
</html>

很容易的就能夠區分開顯示的地方，調試的時候就不會出現混亂。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。