Chrome(谷歌)控制檯，console實用教程
來源 | https://www.jianshu.com/p/24b9f50dc520
你們在調試程序的時候，常常會用到控制檯，在console下調試各類bug,在此整理了控制檯console的一些用法，但願可以幫到你，話很少說，上乾貨。
1、先簡單的介紹一下chrome的控制檯
1.Windows：
打開chrome瀏覽器，按f12就能夠輕鬆的打開控制檯（這裏着重介紹下mac的，其實都同樣，只是博主只有mac ?）
2.mac:打開chrome瀏覽器，按fn+ f12就能夠輕鬆的打開控制檯（原諒我在此給百度打了一下廣告，emmmm....我會考慮向他們收取廣告費的..）
2.mac:打開chrome瀏覽器，按fn+ f12就能夠輕鬆的打開控制檯（原諒我在此給百度打了一下廣告，emmmm....我會考慮向他們收取廣告費的..）
圖一
若是此時你發現你的控制檯並不向個人同樣在右面，不要緊，繼續往下看。
圖二
首先，看箭頭所指的地方有豎着的三個點，沒錯，就是他，請堅決果斷的點擊它。
圖三
這時你會發現，出來這麼個東西，重點觀察最裏面的小紅框中的幾個小方塊，從左依次往右，當你點擊第一個，會彈出一個窗口，以下：
圖四
這就是將控制檯做爲一個窗口向咱們展現，假如你關閉掉頁面後，再次打開依然會是彈出框樣式，此時沒必要驚慌，仔細發現，在這個彈出的頁的右上角，仍是有豎着的三個點，點擊它會出現上一個圖所示的狀況，而後咱們能夠再點擊第二個，會變成以下圖所示：
圖五
此時你會發現控制檯跑到左邊去了，這時候你應該有種恍然大悟的感受，是的，第三個第四個就是控制檯在下面和在右面（剩下的就不貼圖了，挺費事的）
介紹完控制檯，就該說一說console的用法了，終於能夠好好說話了！?
有小夥伴就問了爲啥不用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）一下，這時你發現控制檯已經清空了
2.你也能夠經過點擊左上角標出的標誌，也能夠清空控制檯
2、通常狀況下咱們用來輸入信息的方法主要是用到以下五個
console.log 用於輸出普通訊息javascript
console.info 用於輸出提示性信息html
console.error 用於輸出錯誤信息java
console.warn 用於輸出警示信息node
console.debug 用於輸出調試信息web
console
有小夥伴發現本身輸入一個console方法後，想換行結果運行了，此時確定一臉的懵逼?，告訴你一個小技巧，
shift+return(enter)就能夠換行啦，開不開心，意不意外！?chrome
3、其實console還提供了其餘的方法供咱們使用，咱們能夠在控制檯輸入console打印一下查看
4、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);
輸出以下：
5、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>
輸出以下：
6、console.group輸出一組信息的開頭，console.groupEnd結束一組輸出信息
例：
console.group('aaa');
console.warn('aaa.aaa');
console.groupEnd();
輸出以下：
7、console.assert對輸入的表達式進行斷言，只有表達式爲false時，才輸出相應的信息到控制檯
例：
let isDebug = false; console.assert(isDebug,'爲false時輸出的信息');
輸出以下：
8、console.count 統計代碼被執行的次數
例：
function myFunction () {
console.count('myFunction被執行的次數');
};
myFunction();
myFunction();
myFunction();
輸出以下：
9、console.dir 直接將該DOM結點以DOM樹的結構進行輸出，能夠詳細查對象的方法發展等等
例：
var myObject = {
name:'aa',
age:12,
sex:'man',
myFunc: function () {
cpnsole.log('hello');
}
};
console.dir(myObject);
輸出以下：
10、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');
輸出以下：
11、再說下使用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;");
輸出以下：