你所不知道的10個“Chrome開發者工具”使用技巧

　　今天給大家分享一些使用“Chrome開發者工具”的小技巧。包括除錯，優化頁面渲染速度等。希望能提升Web開發人員的工作效率。

　　1，開啟Shadow DOM顯示

　　瀏覽器對例如Video、Password等元件進行了封裝，無法檢視到元件的詳細程式碼，不利於除錯。幸好，通過配置能夠在元素標籤器中顯示被隱藏的元件程式碼。

　　實現：Settings → General → Elements → Show user agent shadow DOM

　　2，在控制檯快速選擇元素,

　　在Chrome Dev Tools 控制檯中還可以通過$變數來選擇DOM元素：

• $：Chrome控制檯中原生支援類jQuery的選擇器。用$加上熟悉的css選擇器就能選擇DOM節點。
• $0 ~ $4：最近選擇過的5個DOM節點。$0會返回最近一次點選的DOM結點。以此類推，$1返回的是上上次點選的DOM節點。最多可以儲存5個，如果不滿5個，則返回undefined。

　　3，多行插入符編輯內容

　　在Sources編輯框中，按住Ctrl（Cmd for Mac），在要編輯的地方點選滑鼠，可以設定多個插入符。按下Ctrl + U 撤銷編輯，快速輸入，快速刪除。

　　4，使用”3步快照”技術來找出JavaScript記憶體洩露

　　1，開啟開發者工具並且切換到Profiles皮膚裡；

　　2，在頁面執行一個能引起記憶體洩露的操作；

　　3，點選“Take Snapshot”來執行一個堆快照；

　　4，重複執行步驟 2 和步驟 3 三次；

　　5，選擇最後一個堆快照；

　　6，將過濾器從“所有物件”改為“快照 1 和 2 之間的物件”；

　　現在應該已經可以看到一組新的洩露物件的集合，選擇其中的一個然後檢視是什麼導致的記憶體洩露。

 

　　5，強制改變元素狀態

　　實現：

• Elements皮膚右側Styles標籤 → Toggle Element State
• Elements皮膚左側右擊 → Force element state

　　6，快速查詢檔案&搜尋特定字串

　　實現：Sources皮膚下 Ctrl+P（Cmd+P for mac）

　　開發者工具支援在原始碼中搜尋特定的字串的功能，這種搜尋方式不但能區分大小寫，還支援正規表示式。

　　實現：Sources皮膚下 Ctrl + Shift + F（Cmd + Shift + F for mac）

　　7，多列內容選擇&匹配相同選項

　　實現：

　　多列內容選擇：按住Alt鍵，當滑鼠箭頭變為“+”號後，點選滑鼠

　　匹配相同選項：選中需要匹配的元素，快捷鍵Ctrl + D（Cmd + D for mac）

　　8，改變顏色模式&自定義調色盤

　　開發者工具支援在rgba、hsl和hexadecimal來回切換顏色模式和實時編輯預覽頁面顏色。

　　實現：

　　改變顏色模式：Shift + 點選滑鼠

　　自定義調色盤：點選樣式區域顏色前面的小方塊

　　9，裝置模式&移動模擬

　　開發者工具能夠模擬不同移動裝置，快速測試移動端的使用者體驗，解決除錯困難的問題。

• 通過模擬不同的螢幕大小和解析度來測試響應式的設計效果， 也可以模擬Retina 螢幕；
• 使用網路模擬器來評估你的站點的效能，並且不會影響到其他選項；
• 視覺化並審查 CSS 樣式；
• 準確模擬裝置輸入，比如觸控事件、地理位置以及裝置螢幕朝向。

　　裝置模式的另一個很酷的功能是模擬移動裝置的感測器，例如觸控螢幕和加速計，甚至可以更改你的地理位置。

　　實現：Esc鍵 → Emulation → Enable emulation → Sensors

　　10，Workspace編輯本地檔案

　　Workspace把開發者工具變成了一個真正的IDE。將Sources選項卡中的檔案和本地專案中的檔案進行匹配，直接編輯和儲存，不必複製/貼上到編輯器。

　　實現：Source左側皮膚下右擊 → Add Folder to worksapce