對不起！冷到你!

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

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

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

data:text/html,
test

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

鏈接：https://juejin.im/post/5ad1bce46fb9a028cc61a8c0

閱讀更多 前端圈 的文章

關鍵字: Chrome 粗暴 自動