對不起！冷到你!

整理印象筆記的時候發現了這些零零碎碎的冷門知識......

注意！！這是一篇自娛自樂的沒什麼養分的文章（敲黑板！！！）

1.你知道瀏覽器的地址欄能運行HTML代碼嘛？

data:text/html,<div id="J_test">test</div>
複製代碼

是否是很神奇？！前提是非IE內核的瀏覽器才能這麼玩哦。

2.你知道全部的元素ID都是全局變量嘛？

兩種方式輸出的東西是同樣的。僅限終端調試！！實際的代碼中,仍是乖乖的該寫什麼寫什麼吧。

3.你知道console.log能變變變變顏色嘛？

利用%c讓你從一堆調試信息中找到重點！

4.簡單粗暴的debugger瞭解一下

只要把debugger寫到代碼裏，瀏覽器運行的時候就會自動自動停在那裏，簡單粗暴，用完的記得刪掉......汗

對於私有函數和匿名函數之外的函數，在控制檯中輸入 debug(funcName) 能夠幫助你快速定位到要調試的函數哦。

var Test = function () {
	this.func1 = function () {
		console.log('debug test')
	}
}
var test = new Test()
debug(test.func1)
test.func1()
複製代碼

5.console.table聽過沒？

把對象輸出成表格，仍是有點小用的。

6.console.time() 和 console.timeEnd() 測試耗時

想要知道某段代碼消耗了多長時間？ console.time() 和 console.timeEnd() 來幫助你！

7.你可能都沒有注意到chrome的這個小按鈕

美化壓縮後的代碼，一步到位！

8.使人頭疼的垂直居中translateY來幫忙

/* 垂直居中 */
.vertical-center {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
/* 水平居中 */
.horizontal-center {
    position: relative;
    left: 50%;
    transform: translateX(-50%); 
}
複製代碼

9.想知道你的代碼被執行了幾回嘛？

emmmm......console.count() 這個東西，仍是頗有用的。

可是！！！！用完記得刪掉，省得上線後由於一句 console.count 阻斷代碼的執行，切記切記！！