通過Chrome DevTools(開發者工具) 來了解 Chrome 瀏覽器，提高開發效率。
console 面板
打開 console 面板的快捷鍵： Windows：Control + Shift + J
Mac：Command + Option + J
首先來看下 console 有哪些方法：
一、console.clear()：顧名思義，就是清空控制台
二、console.log()，console.info()，console.warn()，console.error()
使用占位符：
支持使用逗號分割參數，不需要每個參數都單獨打印。
占位符：%s
占位符 %s 所在的位置會替換成其所在字符串的后面的參數，有幾個占位符就會替換幾個參數。
占位符 %c
占位符參數之后的若干參數屬於占位符的配置參數。
其余的占位符有：
三、console.time() 和 console.timeEnd()
time 和 timeEnd 一般放在一起使用，傳入一個參數用來標識起始位置用於統計時間：
會打印出來中間代碼的執行時間。
四、console.count()
計數，可以用來統計某個函數的執行次數，也可以傳入一個參數，並且根據傳入的參數分組統計調用的次數。
五、console.trace()
用於追蹤代碼的調用棧，不用專門斷點去看了。
六、console.table()
console.table() 方法可以將復合類型的數據轉為表格顯示。
七、console.dir()
按便於閱讀和打印的形式將對象打印
輸出DOM結構
八、console.assert()
斷言，用來進行條件判斷。當表達式為 false 時，則顯示錯誤信息，不會中斷程序執行。
可以用於提示用戶，內部狀態不正確（把那個說假話的揪出來）
九、console.group()，console.groupEnd()
分組輸出信息，可以用鼠標 折疊 / 展開
十、$ 選擇器
$_ 可以記錄上次計算的結果，直接用於代碼執行。
$0，$1 ..... $4
代表最近5個審查元素選中過DOM節點。
$ 和 $$
$(selector) 是原生 document.querySelector() 的封裝
$$(selector) 返回的是所有滿足選擇條件的元素的一個集合，是 document.querySelectorAll() 的封裝。
$x 將所匹配的節點放在一個數組里返回。
$x('//li') // 所有的 li
$x('//p') // 所有的 p
$x('//li//p')、$x('//li[p]') // 所有的 li 下的 p
keys()，values()
跟 ES6 對象擴展方法，Object.keys() 和 Object.values() 相同
keys(obj)，values(obj)
copy() 可以直接將變量復制到剪切板 copy(temp1)
與 Save global variable 結合使用神器
Element 面板
打開 Element 面板： Windows：Control + Shift + C
Mac：Command + Option + C
一、css調試：
style 選中目標節點，element 面板，查看 style -> :hov，選擇對應的狀態即可。
computed 有時候樣式覆蓋過多，查看起來很麻煩，可以使用 computed
點擊某個樣式可以直接跳轉至對應 css 定義
調整某個元素的數值
選中想要更改的值，按方向鍵上下就可以 + / - 1個單位的值
alt + 方向鍵 可以 x 10 調整單位值
Ctrl + 方向鍵 可以 x 100 調整單位值
shift + 方向鍵 可以 / 10 調正單位值
html 調試 選中節點，直接按鍵盤 H 可以直接讓元素 顯示 / 隱藏 ，不用手動敲樣式了，
效果等同 visibility: hidden，還是要占據盒模型空間的。(輸入法為英文)
將某個元素存儲到全局臨時變量中
選中節點，右鍵，Store as global variable（在 network 面板中也能用，尤其是篩選接口的返回值很方便）
滾動到某個節點
如果頁面很長，想找一個文本節點的顯示位置又不想手動滑動可以試試 Scroll into view
選中節點，右鍵，選擇 Scroll into view
DOM斷點
可以監聽到 DOM 節點的變更(子節點變動 / 屬性變更 / 元素移除)，並斷點至變更 DOM 狀態的 js 代碼行
Network 面板
打開 Network 面板的快捷鍵：Windows：Control + Shift + I
Mac：Command + Option + I
按區域划分大概分為如下幾個區域：
1、Controls 控制 Network 功能選項，以及一些展示外觀。
2、Filters 控制 Requests Table 中顯示哪些類型的資源。
tips：按住 Cmd (Mac) 或者 Ctrl ( Windows / Linux ) 並點擊篩選項可以同時選擇多個篩選項。
3、Overview 此圖表顯示了資源檢索時間的時間線。如果看到多條豎線堆疊在一起，則說明這些資源同時檢索。
4、Requests Table 此表格列出了檢索的每一個資源。默認情況下，此表格按時間順序排序，最早的資源在頂部，
點擊資源的名稱可以顯示更多信息。如：右鍵點擊 Timeline 以外的任何一個表格標題可以添加或移除信息列。
5、Summary 可以一目了然地看到頁面的請求總數、傳輸的數據總量、加載的時間。