大家在除錯程式的時候，經常會用到控制檯，在console下除錯各種bug,在此整理了控制檯console的一些用法，希望能夠幫到你，話不多說，上乾貨
一、先簡單的介紹一下chrome的控制檯
1.Windows：開啟chrome瀏覽器，按f12就可以輕鬆的開啟控制檯（這裡著重介紹下mac的，其實都一樣，只是博主只有mac ?） 2.mac:開啟chrome瀏覽器，按fn+ f12就可以輕鬆的開啟控制檯（原諒我在此給百度打了一下廣告，emmmm....我會考慮向他們收取廣告費的..）
有小夥伴就問了為啥不用alert除錯程式呢，設想一下，如果有一個陣列，裡面有超多的元素，但是你想知道這些元素都有哪些具體的值，如果此時用alert，那你真的會被自己整哭的，因為alert阻斷執行緒執行，你不點選alert框的確定按鈕下一個alert就不會出現。那如果用console呢？下面我們來做個測試：
let arr = [
{name:'張三',age:13},
{name:'李四',age:14},
{name:'王五',age:15},
{name:'小明',age:16},
{name:'小華',age:17},
];
for (let item of arr) {
console.log(item);
};
複製程式碼執行一下程式碼，發現要比alert好多了有木有~
注意：剛開啟控制檯的時候，我們會發現控制檯裡有其他的東西，比如百度的彩蛋，其實就是招聘資訊，這時我們並不想看到這些，怎麼？你想看到嗎？不，你不想... 那如何清除呢？ 1.在控制檯輸入console.clear()或者直接輸入clear(),執行（enter）一下，這時你發現控制檯已經清空了
二、一般情況下我們用來輸入資訊的方法主要是用到如下五個
- console.log 用於輸出普通訊息
- console.info 用於輸出提示性資訊
- console.error 用於輸出錯誤資訊
- console.warn 用於輸出警示資訊
- console.debug 用於輸出除錯資訊
- 有小夥伴發現自己輸入一個console方法後，想換行結果執行了，此時肯定一臉的懵逼?，告訴你一個小技巧，
shift+return(enter)就可以換行啦，開不開心，意不意外！?
三、其實console還提供了其他的方法供我們使用，我們可以在控制檯輸入console列印一下檢視
四、console物件的上面5種方法，都可以使用printf風格的佔位符。不過，佔位符的種類比較少，只支援字元（%s）、整數（%d或%i）、浮點數（%f）和物件（%o）四種
例：
console.log('%d年%d月%d日',2011,3,26);
console.log('圓周率是%f',3.1415926);
複製程式碼輸出如下：
%o佔位符，可以用來檢視一個物件內部情況
let dog = {
name:'金毛',
color:'黃色',
};
console.log('%o',dog);
複製程式碼輸出如下：
五、console.dirxml用來顯示網頁的某個節點（node）所包含的html/xml程式碼
例：
<body>
<table id="mytable">
<tr>
<td>A</td>
<td>A</td>
<td>A</td>
</tr>
<tr>
<td>bbb</td>
<td>aaa</td>
<td>ccc</td>
</tr>
<tr>
<td>111</td>
<td>333</td>
<td>222</td>
</tr>
</table>
</body>
<script type="text/javascript">
window.onload = function ()
{
var mytable = document.getElementById('mytable');
console.dirxml(mytable);
}
</script>
複製程式碼輸出如下：
六、console.group輸出一組資訊的開頭，console.groupEnd結束一組輸出資訊
例：
console.group('aaa');
console.warn('aaa.aaa');
console.groupEnd();
複製程式碼輸出如下：
七、console.assert對輸入的表示式進行斷言，只有表示式為false時，才輸出相應的資訊到控制檯
例：
let isDebug = false;
console.assert(isDebug,'為false時輸出的資訊');
複製程式碼輸出如下：
八、console.count 統計程式碼被執行的次數
例：
function myFunction () {
console.count('myFunction被執行的次數');
};
myFunction();
myFunction();
myFunction();
複製程式碼輸出如下：
九、console.dir 直接將該DOM結點以DOM樹的結構進行輸出，可以詳細查物件的方法發展等等
例：
var myObject = {
name:'aa',
age:12,
sex:'man',
myFunc: function () {
cpnsole.log('hello');
}
};
console.dir(myObject);
複製程式碼輸出如下：
十、console.time 計時開始,console.timeEnd 計時結束
例：
// 用console.time來統計例項化1000000個物件所需時間
console.time('Array initialie');
var array = new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
array[i] = new Object();
};
console.timeEnd('Array initialie');
複製程式碼輸出如下：
十一、再說下使用console.log的一些技巧
- 指定輸出文字的樣式
- 利用控制檯輸出圖片
例：
// text
console.log('%c 你看 ','color:red;font-size:5em;background-color:yellow');
// 3D Text
console.log("%c3D Text"," text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em");
// Rainbow Text
console.log('%cRainbow Text ', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');
// Colorful CSS
console.log("%cColorful CSS","background: rgba(252,234,187,1);background: -moz-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%,rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: -webkit-gradient(left top, right top, color-stop(0%, rgba(252,234,187,1)), color-stop(12%, rgba(175,250,77,1)), color-stop(28%, rgba(0,247,49,1)), color-stop(39%, rgba(0,210,247,1)), color-stop(51%, rgba(0,189,247,1)), color-stop(64%, rgba(133,108,217,1)), color-stop(78%, rgba(177,0,247,1)), color-stop(87%, rgba(247,0,189,1)), color-stop(100%, rgba(245,22,52,1)));background: -webkit-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: -o-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: -ms-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: linear-gradient(to right, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#f51634', GradientType=1 );font-size:5em");
// 輸出動態圖
console.log("%c ", "background: url(http://g.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=7408a51e88d4b31cf0699cbfb2e60b49/c9fcc3cec3fdfc03aca05de5d73f8794a5c22696.jpg) no-repeat center;padding-left:640px;padding-bottom: 242px;");
複製程式碼輸出如下：