Chrome控制檯，console實用教程

時間 2019-12-05

原文原文鏈接

你們在調試程序的時候，常常會用到控制檯，在console下調試各類bug,在此整理了控制檯console的一些用法，但願可以幫到你，話很少說，上乾貨javascript

1、先簡單的介紹一下chrome的控制檯

1.Windows：打開chrome瀏覽器，按f12就能夠輕鬆的打開控制檯（這裏着重介紹下mac的，其實都同樣，只是博主只有mac 😝） 2.mac:打開chrome瀏覽器，按fn+ f12就能夠輕鬆的打開控制檯（原諒我在此給百度打了一下廣告，emmmm....我會考慮向他們收取廣告費的..） html

若是此時你發現你的控制檯並不向個人同樣在右面，不要緊，繼續往下看

首先，看箭頭所指的地方有豎着的三個點，沒錯，就是他，請堅決果斷的點擊它

這時你會發現，出來這麼個東西，重點觀察最裏面的小紅框中的幾個小方塊，從左依次往右，當你點擊第一個，會彈出一個窗口，以下

這就是將控制檯做爲一個窗口向咱們展現，假如你關閉掉頁面後，再次打開依然會是彈出框樣式，此時沒必要驚慌，仔細發現，在這個彈出的頁的右上角，仍是有豎着的三個點，點擊它會出現上一個圖所示的狀況，而後咱們能夠再點擊第二個，會變成以下圖所示

此時你會發現控制檯跑到左邊去了，這時候你應該有種恍然大悟的感受，是的，第三個第四個就是控制檯在下面和在右面（剩下的就不貼圖了，挺費事的） 介紹完控制檯，就該說一說console的用法了，終於能夠好好說話了！😂

有小夥伴就問了爲啥不用alert調試程序呢，設想一下，若是有一個數組，裏面有超多的元素，可是你想知道這些元素都有哪些具體的值，若是此時用alert，那你真的會被本身整哭的，由於alert阻斷線程運行，你不點擊alert框的肯定按鈕下一個alert就不會出現。那若是用console呢？下面咱們來作個測試：java

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好多了有木有~ node

注意：剛打開控制檯的時候，咱們會發現控制檯裏有其餘的東西，好比百度的彩蛋，其實就是招聘信息，這時咱們並不想看到這些，怎麼？你想看到嗎？不，你不想... 那如何清除呢？ 1.在控制檯輸入console.clear()或者直接輸入clear(),運行（enter）一下，這時你發現控制檯已經清空了 web

2.你也能夠經過點擊左上角標出的標誌，也能夠清空控制檯

2、通常狀況下咱們用來輸入信息的方法主要是用到以下五個

console.log 用於輸出普通訊息
console.info 用於輸出提示性信息
console.error 用於輸出錯誤信息
console.warn 用於輸出警示信息
console.debug 用於輸出調試信息
有小夥伴發現本身輸入一個console方法後，想換行結果運行了，此時確定一臉的懵逼😳，告訴你一個小技巧，shift+ return(enter)就能夠換行啦，開不開心，意不意外！😝

3、其實console還提供了其餘的方法供咱們使用，咱們能夠在控制檯輸入console打印一下查看

4、console對象的上面5種方法，均可以使用printf風格的佔位符。不過，佔位符的種類比較少，只支持`字符（%s）`、`整數（%d或%i）`、`浮點數（%f）`和`對象（%o）`四種

例：chrome

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代碼

例：ui

<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;");
複製代碼