[轉] console.log的高級用法

//基本用法

console.log('最多見用法\n換行');

console.error('輸出錯誤信息 會以紅色顯示');

console.warn('打印警告信息 會以黃色顯示');

console.info('打印通常信息');

console.clear();//清空上面的console顯示

 

//進階用法

console.assert(false,'判斷爲false才顯示的信息');//console.assert(bool,」info」) 若是bool爲false 打印出info 不然不打印

console.table([['中國','美國'],['好']]);//傳入的對象或數組以表格方式顯示

function fn(){ console.trace();	}//打印 調用鏈 fn2()調用fn1()，fn1()調用fn()

function fn1(){ fn(); }

function fn2(){ fn1(); }

fn2();

 

 //格式化輸出

1. console.log支持的格式標誌有:
2.   %s 佔位符
3.   %d 或 %i 整數
4.   %f 浮點數
5.   %o%O object對象
6.   %c css樣式

console.log('%d + %d = %d',1,2,3);

//%o%O打印dom節點時就不同
console.log('%o',document.body);
console.log('%O',document.body);

// %c 後面的內容，增長css樣式
//附：console.log輸出的超連接會被自動識別並加上灰色字體顏色和下劃線的樣式，而這個沒法用%c覆蓋
console.log('123 %c 456','font-size:36px;color:red;');
console.log('123 %c 4 http://www.google.com 56 %c 789','font-size:20px;color:#ff8400;','font-size：12px;color:#000');
 
//利用css樣式加載圖片 //無法直接設置width和height樣式,line-height圖片高度,再調padding 
console.log('%c ','background-image:url("http://iyeslogo.orbrand.com/150902Google/005.gif");background-size:120% 120%;background-repeat:no-repeat;background-position:center center;line-height:60px;padding:30px 120px;');

 

 //高級用法

//計時，單位毫秒
    console.time();
    for(var i=0;i<100000;i++){
        var j=i*i;
    }
    console.timeEnd();
//統計代碼或函數被調用了多少次
    var fn_ = function(){ console.count('hello world'); }
    for(var i=0;i<5;i++){
        fn_();
    }
//查看內存使用狀況，是屬性，不帶括號
//console.memory;
//在瀏覽器開發者工具中使用
//分組輸出，可嵌套
    console.group('分組1');
    console.log('語文');
    console.log('數學');
        console.group('其餘科目');
        console.log('化學');
        console.log('地理');
        console.log('歷史');
        console.groupEnd('其餘科目');
    console.groupEnd('分組1');