你不知道的console

@拭目以待:首發于你不知道的console

在代碼執行不如意的情況下,最常用的就是使用debuger 和 console.log();然而關于console,比想像的更強大。

  • 使用不同的方法來區分信息的不同
console.log('日志');
console.info('信息');
console.error('錯誤');
console.warn('警告');
  • 通過占位符對信息進行編輯
console.log('字符=> %s', 'baukh');
console.log('%d年%d月%d日', 2017, 3, 10);
console.log('浮點數=> %f', 3.1415926);
console.log('對象=> %o', {'name': 'baukh', age: '30'});
console.log('%c更改顏色與背景', 'background:#aaa;color:#bada55');
  • 打印樹狀結構
console.group('山西省');
console.log('太原市');
console.log('運城市');
console.groupEnd(); 

console.group('陜西省');
console.log('西安市');
console.log('咸陽市');
console.groupEnd();
  • 以目錄形式顯示Object
var o = {name:'baukh', age: 30}
console.dir(o);
  • 顯示函數在棧內的調用軌跡
function add(a,b){
    console.trace();
    return a+b;
}
var x = add3(1,1);
function add3(a,b){return add2(a,b);}
function add2(a,b){return add1(a,b);}
function add1(a,b){return add(a,b);}
  • 計時器,接受一個參數作為標識
console.time('統計計時'); 
    for(var i=0; i< 500; i++){
}
console.timeEnd('統計計時');

需要注意的是, .time()與.timeEnd() 的參數相同的情況下,所計算的值才為 .time() 與 .timeEnd() 之間代碼執行所用的時間。

  • 將數據打印成表格
var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]]
console.table(people);

該博文知識點來源自 MDN

@拭目以待

個人站點:www.lovejavascript.com
表格管理插件:gridmanager.lovejavascript.com && github地址
QQ交流群 (452781895):How To Make Love
微信公眾賬號:loveJavascript

《野生前端工程師》專輯中所有文章均為@拭目以待 原創,轉載請注明出處。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 工廠模式類似于現實生活中的工廠可以產生大量相似的商品,去做同樣的事情,實現同樣的效果;這時候需要使用工廠模式。簡單...
    舟漁行舟閱讀 7,854評論 2 17
  • 不支持上傳文件,所以就復制過來了。作者信息什么的都沒刪。對前端基本屬于一竅不通,所以沒有任何修改,反正用著沒問題就...
    全棧在路上閱讀 2,001評論 0 2
  • 單例模式 適用場景:可能會在場景中使用到對象,但只有一個實例,加載時并不主動創建,需要時才創建 最常見的單例模式,...
    Obeing閱讀 2,110評論 1 10
  • AlexGuo前言 對於一個沒有學習過正統營銷管理的人來說,這集滿有料的 如果你比較忙,推薦你看比較下面的幾個標題...
    GuoAlex閱讀 1,418評論 0 1
  • 青旅,就是「青年旅舍」。 二十歲上下的旅行者,誰沒有住青旅的時候呢?看到青旅,通常會出現關鍵詞包括:性價比,交朋友...
    小極聊旅行閱讀 12,420評論 2 3