對不起！冷到你!

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

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

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

data:text/html,

是不是很神奇？！前提是非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() 這個東西， 還是很有用的。

作者：掘金5025

連結：https://juejin.im/post/5ad1bce46fb9a028cc61a8c0