console的高階用法，console.log帶顏色的字
阿新 • • 發佈：2018-12-15
先展示效果圖：
<!-- /** * @Author: Ding Jianlong * @Date: 2018-11-08 14:37:05 * @Last Modified by: Ding Jianlong * @Last Modified time: 2018-11-08 17:14:05 */ --> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>Ding Jianlong Html</title> <style> </style> </head> <body> <h2>請在開發者工具檢視console</h2> <script> //基本用法 console.log('最常見用法\n換行'); console.error('輸出錯誤資訊 會以紅色顯示'); console.warn('列印警告資訊 會以黃色顯示'); console.info('列印一般資訊'); console.clear();//清空上面的console顯示 //進階用法 //console.assert(bool,”info”) 如果bool為false 打印出info 否則不列印 console.assert(false,'判斷為false才顯示的資訊'); //傳入的物件或陣列以表格方式顯示 console.table([['中國','美國'],['好']]); //列印 呼叫鏈 fn2()呼叫fn1()，fn1()呼叫fn() function fn(){ console.trace(); } function fn1(){ fn(); } function fn2(){ fn1(); } fn2(); //格式化輸出 /* console.log支援的格式標誌有: %s 佔位符 %d 或 %i 整數 %f 浮點數 %o%O object物件 %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'); </script> </body> </html>
參考文章：
http://www.alloyteam.com/2013/11/console-log/
http://www.alloyteam.com/2013/11/console-log-2/