Web開發工具系列（1）---Firebug中的console API

JohnLui 發布于2019-08-20 11:42 / 1638人閱讀

摘要：本文主要探討中的使用。不同的瀏覽器中行為可能會有所不同。代碼測試運行了次和用來顯示代碼的運行時間。測試計算運行性能代碼測試介紹的具體網址一篇相關的博文

前言

我個人一直在使用Firefox瀏覽器進行開發，并且經常使用Firebug進行一些簡單的調試，但是一直限于使用簡單的console.log()查看輸出，或者查看Ajax運行時的Http請求和Cookie等。為了更好的掌握工具使用技巧，我希望最近騰出時間仔細探究下Firebug的使用。因此，本文將是“Web 開發工具”系列中的第一篇。

本文主要探討Firebug中console的使用。firebug給所有當前加載的頁面添加了一個console全局對象，這個對象包含各種方法，可以幫助我們通過console API 輸出JavaScript代碼執行時的信息。相比alert()，console對象輸出不會停止代碼運行，而alert()必須點擊彈出窗口才能繼續觀察結果。例如通過for循環觀察一個較大數組的輸出，在循環體內使用alert無疑會是件很頭疼的事，因為你要連續點擊很多次，用console.log()則沒有這種顧慮：

console對象的方法

1) console.log(obiect[,object,object…]):這無疑是最常用的方法，用來輸出參數代表的值，參數可以是任何字符串、數字和JavaScript對象，輸出時以空格間隔多個變量。與alert()函數類似，console.log()也可以接受換行符n以及制表符t。console.log()語句所打印的調試信息可以在瀏覽器的調試控制臺中看到。不同的瀏覽器中console.log()行為可能會有所不同。

2) 與console.log()功能類似的console.debug()/console.info()/console.warn()/console.error()都會輸出參數內容，但是輸出時顯示的圖標不同。
代碼：

var a = new Array(),b = new Date(), c = 1;
console.info(a, b, c);//顯示info圖標
console.error(a, b, c);//顯示錯誤圖標
console.warn(a, b, c);//顯示警告圖標
console.debug(a, b, c);//不顯示圖標

輸出：

console對象的上面5種方法，都可以使用C語言printf風格的占位符。不過，占位符的種類比較少，只支持字符（%s）、整數（%d或%i）、浮點數（%f）和對象（%o）四種。
代碼：

console.log("%d年%d月%d日",2011,3,26);
console.log("圓周率是%f",3.1415926);

輸出：

%o占位符，可以用來查看一個對象內部情況。
代碼：

var dog = {}; dog.name = "大毛"; dog.color = "黃色";
 console.log("%o", dog);

結果：

3) console.assert(expression[,object]):參數是表達式或者對象，判斷內部是否為true，我認為會經過一個布爾類型轉換。如果轉換結果是真就不輸出，為假就輸出判斷結果。最好只輸入一個參數，多個參數時判斷結果很奇怪。連續多次執行assert()方法，會一次性輸出總的斷言失敗數，不指出是哪一個失敗。
測試實例：

//除console.assert(a)外的斷言都是失敗的
var a = new Array(),b = new Date(), c = 0;
console.assert();//無參數
console.assert(c);//數值0
console.assert(a);//數組對象
console.assert(null);//null

輸出結果：

4）console.clear()：無參數，清空console窗口。
5） console.dir(object)：輸出對象的所有特性，包括方法和屬性; 直接將該DOM結點以DOM樹的結構進行輸出。
代碼：

//輸出console的所有方法和屬性
console.dir(console);

6）console.dirxml()：用來顯示網頁的某個節點（node）所包含的html/xml代碼。
代碼

    /*zhangzhang
        
        
    
    */

測試：

7）console.trace()：追蹤函數的調用軌跡
代碼：

function add(a, b) {
  console.trace();
  return a + b;
}
function add3(a, b) {
  return add2(a, b);
}
function add2(a, b) {
  return add1(a, b);
}
function add1(a, b) {
  return add(a, b);
}
var x = add3(1, 1);

測試：

8）console.group(object[, object, ...])和console.groupEnd()：分組顯示。
代碼：

    console.group("第一組信息");
　　　　console.log("第一組第一條");
　　　　console.log("第一組第二條");
　　console.groupEnd();
　　console.group("第二組信息");
　　　　console.log("第二組第一條");
　　　　console.log("第二組第二條");
    console.groupEnd();

測試：

9）console.count(): 統計調用count()的那行代碼被執行的次數。
代碼：

  
      
      
    JS Performance

測試：運行了100次

10）console.time(name)和console.timeEnd(name)：用來顯示代碼的運行時間。
測試：

11）console.profile()：計算運行性能
代碼：

  
      
      
    JS Performance

測試：

Reference：

firebug介紹的具體網址：
http://getfirebug.com/wiki/in...
一篇相關的博文：
http://www.ruanyifeng.com/blo...

云服務器 GPU云服務器 webrtc web開發api 系列1 亞馬遜web服務開發人員api 1對1 api

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80702.html

前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0
客戶端數據存儲 --- web storage From 《高程3》

摘要：的目的就是取代進行大量的本地數據存儲，其中不能進行跨會話存儲，這可以使用彌補。刪除由指定的名值對兒。使用方法存儲數據使用屬性存儲數據使用方法讀取數據使用屬性讀取數據一般來說，對存儲空間大小的限制都是以每個源協議域和端口為單位的。前言本文首先介紹web storage和Cookie的對比，解釋web storage的優勢；隨后指出怎樣使用插firebug插件的擴展firestorag...

wangbinke 2019-08-21 14:37 評論0 收藏0
客戶端數據存儲 --- web storage From 《高程3》

摘要：的目的就是取代進行大量的本地數據存儲，其中不能進行跨會話存儲，這可以使用彌補。刪除由指定的名值對兒。使用方法存儲數據使用屬性存儲數據使用方法讀取數據使用屬性讀取數據一般來說，對存儲空間大小的限制都是以每個源協議域和端口為單位的。前言本文首先介紹web storage和Cookie的對比，解釋web storage的優勢；隨后指出怎樣使用插firebug插件的擴展firestorag...

wfc_666 2019-08-01 15:50 評論0 收藏0
錯誤檢測（1）------try-catch語句 From 《高程3》

摘要：類型的錯誤會在數值超出相應范圍時觸發。最常發生類型錯誤的情況，就是傳遞給函數的參數事先未經檢查，結果傳入類型與預期類型不相符。捕獲錯誤的目的在于避免瀏覽器以默認方式處理它們而拋出錯誤的目的在于提供錯誤發生具體原因的消息。 0 前言目前讀到了《高程3》的錯誤檢測部分，現在先挖一個坑，關于錯誤檢測應該寫三篇總結：firebug檢測錯誤和輸出信息；try-catch錯誤捕獲；常見錯誤種類。...

UnixAgain 2019-08-21 14:38 評論0 收藏0