Chrome的騷操作二
代碼塊Snippets的使用
在source面板裏添加代碼塊Snippets，不刪除的話可以一直保存，隨時運行使用。每次添加新的代碼塊是點擊+ New snippets， 如下圖所示，寫了一段計算數組數字的總和，然後用[ctrl] + [enter] (Mac： [⌘] + [enter] ) 來運行它就可以了。
console中的’$’
$0~$4
在 Chrome 的 Elements 面板中， $0 是對我們當前選中的 html 節點的引用。$1 是對上一次我們選擇的節點的引用，$2 是對在那之前選擇的節點的引用，等等。一直到 $4。
$0
$1.appendChild($0)
先選中一個html節點，然後在控制檯輸入$0就可以引用這個節點
再選中另一個html節點，輸入$0,這個時候引用的是你當前的節點
我們要使用剛剛第一個引用的節點就輸入$1就可以了
$
$在 console 中就是對這一大串函數 document.querySelector 的別名,有點類似以前的jQuery裏面的選擇器
$$
$$就更加厲害了，還能節省更多的時間，因爲它不僅執行 document.QuerySelectorAll並且它返回的是：一個節點的 數組 ，而不是一個 Node list。本質上來說 Array.from(document.querySelectorAll(‘div’)) === $$(‘div’)
$_
$_ 是對上次執行的結果的引用
$i 使用 npm 插件
在 Dev Tools 裏面來使用 npm 插件！有時你只是想玩玩新出的 npm 包，現在不用再大費周章去建一個項目測試了，只需要在 Chrome插件:Console Importer 的幫助之下，快速的在 console 中引入和測試一些 npm 庫。這個引入的插件只是暫時的，如果你刷新頁面，那麼是要重新安裝的。（PS：不是所有網站都支持在控制檯安裝npm包）
$i('moment')
moment().format('MMMM Do YYYY, h:mm:ss a');
$i('react')
React.createElement('div')
console篇
console.assert()
當我們傳入的第一個參數爲 假 時，console.assert 打印跟在這個參數後面的值，不用if判斷爲假的條件
var value = null
var key = '123'
console.assert(value, 'value is null');
console.assert(key, 'key is 123');
console.log({})
可以打印多個變量，增強閱讀體驗哦~
const name = 'ww'
const num = 22
const obj = {a:1,b:3}
const time = new Date()
console.log({name,obj,num,time});
console.table()
如果有一個 數組 (或者是 類數組 的對象，或者就是一個 對象 )需要打印，你可以使用 console.table 方法將它以一個漂亮的表格的形式打印出來。它不僅會根據數組中包含的對象的所有屬性，去計算出表中的列名，而且這些列都是可以 縮放 甚至 還可以排序!!!
const arr1 = [1,2,3,4,5,5]
const obj1 = {a:1,b:3,c:9}
console.table(arr1);
console.table(obj1);
table 和 {} 的配合
const str = 'shhdhd'
const number = 1737373
console.table({str, number});
console.dir()
查看這個節點所關聯到的真實的js對象、屬性等
$0
console.dir($_)
console.time()與console.timeEnd()
console.time('first');
setTimeout(() => console.timeEnd('first'),2000)
給logs 加上時間戳
打開 Commands 菜單, 輸入 timestamps後， 選擇 show timestamps
然後log前面都會加上時間戳
如果要關掉這個時間戳，只要再打開command面板，輸入timestamps，選擇Hide timestamps 就可以了
給console.log 加上 CSS 樣式
第一個參數加上 %c 那麼 console.log 的第二個參數就變成了CSS 規則。
這個估計很多人都知道吧，(*^▽^*)
console.log('%chello world!','color:#fff;background:green;font-size:40px')
預知還有何騷操作，且看下篇文章
參考：https://juejin.im/book/5c526902e51d4543805ef35e
公衆號
歡迎大家關注我的公衆號： 石馬上coding，一起成長
