還記得當初在學校學java時，用System.out.println("HelloWorld");打印了我人生的第一行代碼，
當時我就覺得我是最靚的仔
，
我就是能幹翻java的仔，直到畢業後我才知道，原來我只會打印HelloWorld。。。
爲了不僅僅只會打印HelloWorld，我把JavaScript中console學了一遍，現在我覺得我又是個最靚的仔了，呵呵
,
好了，接下來把JavaScript中console的一些用法分享給大家。
JavaScript 中 console 的用法
本文以谷歌瀏覽器爲主，因爲各大瀏覽器的輸出還是有差別的
一、使用較多的四個方法
可以用
\n換行
console.log('log\n最常見用法');
console.info('info\n打印一般信息');
console.warn('warn\n警告信息');
console.error('error\n錯誤信息');
谷歌Chrome瀏覽器控制檯輸出：
在谷歌瀏覽器控制檯輸出info信息我發現既然沒有小藍標，於是我忍痛打開了白給不要瀏覽器-Edge，然後輸出了一下，確實是有小藍標的，使用log和info輸出還是有區別的。這裏要提一下Edge瀏覽器，貌似最新版的Edge已經用谷歌內核了，作爲複製粘貼師的我，強忍不笑，
微軟Edge瀏覽器控制檯輸出：
二、用表格輸出對象或數組
用console.table();可以以表格的形式輸出對象或數組
Chrome控制檯輸出：
領取女友碼：
var girlfriendObj = {
'1號女嘉賓': '我漂亮',
'2號女嘉賓': '我年輕',
'3號女嘉賓': '我賢惠',
'4號女嘉賓': '我有錢'
};
console.log('控制檯：請選擇女友：');
console.table(girlfriendObj);
console.log('我：全都要');
console.log('控制檯：恭喜你答案正確，進入下一關！');
console.log('');
console.log('控制檯：女生來大姨媽你應該怎麼做?');
var girlfriendArr = ['多給她擁抱', '主動承擔家務', '逗她開心', '多喝熱水'];
console.table(girlfriendArr);
console.log('你：我選0、1、2');
console.log('控制檯：答案錯誤，你沒有女朋友！');
三、計算一段代碼使用的時間
可以使用
console.time();和console.timeEnd();來計算一段代碼執行需要的時間，
因爲他倆是男女關係，所以括號裏需要傳一個標記符，用於配對，
標記符必須擁有唯一的名字，而且開始和結束都要用同一個標記符
使用事例：
//1
console.time('找到女朋友需要多長時間');
for (var i = 0; i < 999999999; i++) {
;
}
console.timeEnd('找到女朋友需要多長時間');
//2
console.time('點個贊需要多少秒');
setTimeout(function () {
console.timeEnd('點個贊需要多少秒');
}, 1000);
四、清空控制檯輸出
console.clear('麻煩清理一下，我是程序猿，不需要女朋友');//清空控制檯,其實不用傳參數的
清理完畢後會提示控制檯被清除：
五、使用字符串替換
| 替換字符串 | 描述 |
|---|---|
| %o or %O | 打印 JavaScript 對象。在審閱器點擊對象名字可展開更多對象的信息。 |
| %d or %i | 打印整數。支持數字格式化。例如, console.log(“Foo %.2d”, 1.1) 會輸出有先導 0 的兩位有效數字: Foo 01。 |
| %s | 打印字符串。 |
| %f | 打印浮點數。支持格式化，比如 console.log(“Foo %.2f”, 1.1) 會輸出兩位小數: Foo 1.10 |
使用事例：
for (var i = 0; i < 5; i++) {
console.log(" 我的%s增加到了%d個！", "女朋友", i + 1);
}
Chrome控制檯輸出：
六、爲控制檯定義樣式
可以使用 %c 爲打印內容定義樣式：
使用格式：console.log(%c 文本, 樣式)；
切分樣式：console.log(%c 文本1 %c 文本2, 樣式1，樣式2)；
每一個%c依次對應括號後面傳的一個樣式；
以下的css樣式我試了下都可以用:
var myText = "%c my name is weianl";
var myStyle = `color:#fff;
font-size: 50px;
padding: 50px 100px;
line-height: 200px;
letter-spacing:200px;
background-color: #000;
background-image: linear-gradient(to right, red , yellow);
text-shadow: 5px 5px 5px #FF0000;
text-decoration:underline;
text-indent:100px;
text-transform:capitalize;
border-radius: 100px 0 100px 0;
`
console.log(myText, myStyle);
七、各大網站控制檯輸出的實現
①百度的輸出：
實現代碼：
var baiduText = `你在電腦前看這段文字，\n寫文字的人在百度等你。\nN年前你來到了這個世界，\nN年後你想改變世界。
\n期待你腳踏祥雲，\n與百度一起改變世界。`;
console.log(baiduText);
var hireText = `%c百度2020校園招聘簡歷提交：http://dwz.cn/XpoFdepe`;
var hireStyle = 'color:red';
console.log(hireText, hireStyle);
②京東的輸出：
實現代碼：
var jingdongText = `%c本頁面由 凹凸實驗室（JDC-體驗技術部） 負責開發，你可以通過 https://aotu.io 瞭解我們。
\n如果你對我們在做的事情也有興趣，歡迎加入 [email protected]（註明來自console）
\n本項目驕傲的使用了 凹凸實驗室 出品的Nerv框架，相關內容及生態你可以通過官網瞭解更多。\nhttps://nerv.aotu.io/`;
var jingdongStyle = `color:#6190E8`
console.log(jingdongText, jingdongStyle);
③簡書的輸出：
實現代碼：
var leftGrayStyle = `background-color: #606060;color:white;padding:1px 3px;border-radius:3px 0 0 3px;`;
var rightGreenStyle = `background-color: #42C02E;color:white;padding:1px 3px;border-radius:0 3px 3px 0;`;
var rightBlueStyle = `background-color: #1475B2;color:white;padding:1px 3px;border-radius:0 3px 3px 0;text-align: center;`;
console.log(`%c Environment %c production `, leftGrayStyle, rightGreenStyle);
console.log(`%c Platform %c shakespeare `, leftGrayStyle, rightBlueStyle);
console.log(`%c Version %c 1.1.0 `, leftGrayStyle, rightBlueStyle);
console.log(`%c Build Date %c 2020-05-26T17:46:19.130Z `, leftGrayStyle, rightBlueStyle);
④知乎的輸出：
實現代碼：
var zhihuText = `%c
_____ _____ _____ _____
/\\ \\ /\\ \\ /\\ \\ /\\ \\
/::\\____\\ /::\\ \\ /::\\ \\ /::\\ \\
/:::/ / \\:::\\ \\ /::::\\ \\ /::::\\ \\
/:::/ / \\:::\\ \\ /::::::\\ \\ /::::::\\ \\
/:::/ / \\:::\\ \\ /:::/\\:::\\ \\ /:::/\\:::\\ \\
/:::/____/ \\:::\\ \\ /:::/__\\:::\\ \\ /:::/__\\:::\\ \\
/::::\\ \\ /::::\\ \\ /::::\\ \\:::\\ \\ /::::\\ \\:::\\ \\
/::::::\\ \\ _____ ____ /::::::\\ \\ /::::::\\ \\:::\\ \\ /::::::\\ \\:::\\ \\
/:::/\\:::\\ \\ /\\ \\ /\\ \\ /:::/\\:::\\ \\ /:::/\\:::\\ \\:::\\____\\ /:::/\\:::\\ \\:::\\ \\
/:::/ \\:::\\ /::\\____\\/::\\ \\/:::/ \\:::\\____\\/:::/ \\:::\\ \\:::| |/:::/__\\:::\\ \\:::\\____\\
\\::/ \\:::\\ /:::/ /\\:::\\ /:::/ \\::/ /\\::/ |::::\\ /:::|____|\\:::\\ \\:::\\ \\::/ /
\\/____/ \\:::\\/:::/ / \\:::\\/:::/ / \\/____/ \\/____|:::::\\/:::/ / \\:::\\ \\:::\\ \\/____/
\\::::::/ / \\::::::/ / |:::::::::/ / \\:::\\ \\:::\\ \\
\\::::/ / \\::::/____/ |::|\\::::/ / \\:::\\ \\:::\\____\\
/:::/ / \\:::\\ \\ |::| \\::/____/ \\:::\\ \\::/ /
/:::/ / \\:::\\ \\ |::| ~| \\:::\\ \\/____/
/:::/ / \\:::\\ \\ |::| | \\:::\\ \\
/:::/ / \\:::\\____\\ \\::| | \\:::\\____\\
\\::/ / \\::/ / \\:| | \\::/ /
\\/____/ \\/____/ \\|___| \\/____/
知乎(zhihu.com)，招聘前端開發工程師 http://zhi.hu/BDXoD
`;
console.log(zhihuText, "height:12px;font-size:12px;line-height:15px;");
⑤天貓的輸出：
實現代碼：
var safetyStyle = `font-size:50px;
color:red;
-webkit-text-fill-color:red;
-webkit-text-stroke: 1px black;`;
console.log("%c 安全警告！", safetyStyle);
console.log('%c 此瀏覽器功能專供開發者使用。請不要在此粘貼執行任何內容，這可能會導致您的賬戶受到攻擊，給您帶來損失 ！', "font-size: 20px;color:#333");
var catText =` ::: :::
::::::: :::::
::::::::: ::::::::
:::::::::::::::::::::::::::::::::::::::::::
:::: ::: :::::::::::::::: ::: ::::
::: Smart :::::cool:::: Crazy :::
::::: ::: ::::::::::::::: ::: :::
:::::::::::::::::::::::::::::::::::::::::::
喵~ 加入我們吧 https://tb.cn/iS8NBOy`
console.log(catText);
因爲Console有很多方法，所以我這裏就說一下常用的和好玩的，想了解具體的可以去MDN看看：傳送門
==》over