通過ChromeDevTools(開發者工具) 來了解 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 可以一目瞭然地看到頁面的請求總數、傳輸的資料總量、載入的時間。