利用Js的console對象，在控制檯打印調式信息測試Js

一次偶然的機會，打開百度的時候按下了F12，而後就見控制檯裏面輸出了百度的招聘廣告，感受挺帥氣的，再而後就有了這篇博文。

既然能夠這樣在控制檯輸出信息，那之後再調試Js的時候不就能夠省去不少麻煩了嘛！避免不誤人子弟，特地使用for(var i in console)查看了下各類瀏覽器控制檯對console的支持，

結果以下：

IE 11 控制檯

log , info , warn , error , debug , assert , time , timeEnd , group , groupCollapsed , groupEnd , trace , clear , dir , dirxml , count , countReset , cd , select , profile , profileEnd

Firebug 控制檯

log , debug , info , warn , exception , assert , dir , dirxml , trace , group , groupCollapsed , groupEnd , profile , profileEnd , count , clear , time , timeEnd , timeStamp , table , error

Chrome 控制檯

memory , _commandLineAPI , debug , error , info , log , warn , dir , dirxml , table , trace , assert , count , markTimeline , profile , profileEnd , time , timeEnd , timeStamp , timeline , timelineEnd , group , groupCollapsed , groupEnd , clear

 

能夠看出，以上我測試的瀏覽器對 log , info , warn , error , debug 五個基本方法都是支持的，注意，我使用的是 IE 11，其餘版本我沒測試，而 Firefox 自己也是不帶控制檯的，須要加載Firebug 插件而且啓動它，才能console，不然就是Js報錯了。爲了使用起來更方便，能夠本身封裝一下，判斷一下瀏覽器對 console 的支持，不支持就只能使用原始的 alert 或者其餘方法了。

 

簡單用法：

console.log("日誌信息");
console.info("通常信息");
console.debug("調試信息");
console.warn("警告提示");
console.error("錯誤提示");

格式化輸出：

console.log("%d年%d月%d日", 2014, 5, 20);//日期格式輸出
console.log('%c有顏色的輸出信息', 'color:white; background-color:#0055CC');//格式輸出

輸出變量：

var who= 'you';
console.log('輸出變量 We support  ', you);//讀取變量

 

輸出數組：

var arr = [1, 2, 3, 4, 5]; console.log('數組：', arr);//輸出數組