1 //基本用法
 2     console.log('最常見用法
換行');
 3     console.error('輸出錯誤信息 會以紅色顯示');
 4     console.warn('打印警告信息 會以黃色顯示');
 5     console.info('打印一般信息');
 6     console.clear();//清空上面的console顯示
 7  
 8  
 9  
10     //進階用法
11     //console.assert(bool,”info”) 如果bool為false 打印出info 否則不打印
12     console.assert(false,'判斷為false才顯示的信息');
13     //傳入的對象或數組以表格方式顯示
14     console.table([['中國','美國'],['好']]);
15     //打印 調用鏈 fn2()調用fn1()，fn1()調用fn()
16     function fn(){ console.trace();    }
17     function fn1(){ fn(); }
18     function fn2(){ fn1(); }
19     fn2();
20     //格式化輸出
21     /*
22         console.log支持的格式標志有:
23         %s       占位符
24         %d 或 %i    整數
25         %f       浮點數
26         %o%O     object對象
27         %c       css樣式
28     */
29     console.log('%d + %d = %d',1,2,3);
30     //%o%O打印dom節點時就不一樣
31     console.log('%o',document.body);
32     console.log('%O',document.body);
33     // %c 后面的內容，增加css樣式
34     //附：console.log輸出的超鏈接會被自動識別并加上灰色字體顏色和下劃線的樣式，而這個無法用%c覆蓋
35     console.log('123 %c 456','font-size:36px;color:red;');
36     console.log('123 %c 4 http://www.google.com 56 %c 789','font-size:20px;color:#ff8400;','font-size：12px;color:#000');
37     //利用css樣式加載圖片
38     //沒法直接設置width和height樣式,line-height圖片高度,再調padding
39     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;');
40  
41  
42  
43     //高級用法
44     //計時，單位毫秒
45     console.time();
46     for(var i=0;i<100000;i++){
47         var j=i*i;
48     }
49     console.timeEnd();
50     //統計代碼或函數被調用了多少次
51     var fn_ = function(){ console.count('hello world'); }
52     for(var i=0;i<5;i++){
53         fn_();
54     }
55     //查看內存使用情況，是屬性，不帶括號
56     //console.memory;
57     //在瀏覽器開發者工具中使用
58     //分組輸出，可嵌套
59     console.group('分組1');
60     console.log('語文');
61     console.log('數學');
62         console.group('其他科目');
63         console.log('化學');
64         console.log('地理');
65         console.log('歷史');
66         console.groupEnd('其他科目');
67     console.groupEnd('分組1');

  var o = "u6e29u99a8u63d0u793auff1au8bf7u4e0du8981u8c03u76aeu5730u5728u6b64u7c98u8d34u6267u884cu4efbu4f55u5185u5bb9uff0cu8fd9u53efu80fdu4f1au5bfcu81f4u60a8u7684u8d26u6237u53d7u5230u653bu51fbuff0cu7ed9u60a8u5e26u6765u635fu5931 uff01^_^"
              , t = "u4e3au4e16u754cu5e26u6765u5faeu5c0fu800cu7f8eu597du7684u6539u53d8u3002u6b22u8fceu52a0u5165u652fu4ed8u5b9duff1a"
              , s = "https://job.alibaba.com/zhaopin/position_detail.htm?positionId=41641"
              , i = [t, " ", s].join("");
            /msie/gi.test(navigator.userAgent) ? (console.log(o),
            console.log(i)) : console.log("%c 你好啊 %c Copyright xa9 2004-%s
%c" + o + "
 %c" + i + "
 ", 'font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:64px;color:#00bbee;-webkit-text-fill-color:#00bbee;-webkit-text-stroke: 1px #00bbee;', "font-size:12px;color:#999999;", (new Date).getFullYear(), "color:#333;font-size:16px;", "font-size:12px;")

　　

總結

以上是生活随笔為你收集整理的console高级用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。