今天給大家分享一些使用“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內存泄露
- 打開開發者工具並且切換到Profiles面板裏；
- 在頁面執行一個能引起內存泄露的操作；
- 點擊“Take Snapshot”來執行一個堆快照；
- 重複執行步驟 2 和步驟 3 三次；
- 選擇最後一個堆快照；
- 將過濾器從“所有對象”改爲“快照 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
-END-