工欲善其事必先利其器——web調試工具firebug

時間 2019-11-25

標籤工欲善其事必先利其器 web 調試工具 firebug 欄目 HTML 简体版

原文原文鏈接

1、Firebug工具簡介

firebug是firefox下的一款開發類插件。firebug集html查看和編輯，JavaScript控制檯，網絡情況監視器於一體，是開發JavaScript，css，html和ajax的得力助手。javascript

YSlow是插件。css

2、Firebug應用

一、禁用標籤

下拉菜單啓用禁用標籤。html

二、查看頁面元素快捷鍵

ctrl+shift+c快捷鍵java

三、html編輯

雙擊元素或者右鍵「編輯HTML」進入編輯頁面，在編輯頁面再點"編輯"便可退出。jquery

四、css字體大小

方向鍵調1個單位ajax

ctrl+方向鍵調0.1個單位算法

shift+方向鍵調10個單位瀏覽器

五、評估頁面下載速度

網絡標籤頁：能夠看到請求的時間，大小，地點，和狀態。緩存

200表明從服務器完整加載。304表明未按預期修改文檔，因此從本地緩存加載。服務器

點擊每一個請求能夠查看詳情詳情：包括請求頭，返回結果，cookie等。

六、Ajax監聽

網絡面板下的XHR就是用來監聽ajax請求的。

輸入firebug，參數中wd就表明輸入的參數即firebug。

七、javascript控制檯

7.一、點運行執行js代碼

右邊面板中輸入js代碼，點運行便可執行。

7.2控制檯命令

控制檯預置了不少命令。最經常使用的console.log()簡單的記錄日誌；此外還有

console.info()在消息前面顯示信息圖標。

console.debug()記錄調試信息。

console.warn()在消息前面顯示警告圖標。

console.error()在消息前面顯示錯誤圖標,而且附上行號的超連接。

這些命令會用不一樣的顏色和符號標識出來以下。

7.3tab鍵補全提醒

好比輸入con，按下tab鍵瀏覽器會給出提醒方便補全代碼。

7.四、4種佔位符

以下輸出某年某月某日，%d表明整數。

有點相似c語言的格式化，控制檯有4種佔位符。

%d 整數
%f 浮點數
%s 字符串
%o 對象

應用：可使用佔位符格式化日誌輸出：

好比要輸出2016年04月22日，能夠在月份前加上%s字符串佔位符，這樣傳入參數也須要加引號以下。

7.5日誌多時歸類分組

使用console.group()和console.groupEnd()來分組。

7.六、console.dir()顯示一個對象的全部屬性和方法

console.dir(console);

dir顯示一個對象全部的屬性和方法,很是方便。

7.七、時間跟蹤

經過console.time()和console.timeEnd()記錄代碼運行時間，優化代碼和算法。

可是我屢次執行的實際耗時並不同。

7.八、js代碼調試

腳本中顯示全部的代碼，包括index.html和jquery代碼。

設置斷點，刷新頁面，當執行到斷點處的js代碼時，頁面再也不執行，等待操做。

經過監控面板能夠看變量值。

經過堆棧面板(Call true)點擊其中函數查看調用者。

經過斷點米娜包查看全部的斷點列表。

能夠經過4個圖標來操做，從左到右分別是：繼續(F8)，單步進入(F11)，單步跳過(F10)，單步退出(shift+F11)。

刪除斷點：

在斷點處單擊或者在斷點面板中取消勾選，或直接點右邊的紅色x刪除斷點。

經過console.trace()能夠在控制檯看出函數是怎樣被調用的。

<script type="text/javascript">
    $(document) .ready(function(){
        var el=$("h1 span").first();
        var i=9;

        var interval=setInterval(function(){

            console.trace();
            el.html(i);
            i--;
            if(i<0){
                clearInterval(interval);
            }
        },1000);
    });
</script>