前端調試效率低？試試這10個「Chrome開發者工具」使用技巧

摘要：今天給你們分享一些使用「Chrome開發者工具」的小技巧。包括調試，優化頁面渲染速度等。但願能提高Web開發人員的工做效率。

今天給你們分享一些使用「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

 

 

-END-