你所不知道的 Chrome 控制檯調試技巧

前言

收集了一些工做中經常使用到的 Chrome 調試技巧，其餘大部分 Chrome 調試功能工具介紹已經在其餘的不少文章中介紹到了，這裏就不 DRY 了

Request blocking 阻塞請求

使用這個功能能夠攔截請求

大部分狀況是頁面執行完某個操做後，頁面就重定向了（好比登陸），這時就不方便調試了，下面這個工具很好的解決了這個問題

好比你想了解在頁面重定向以前，發去的登陸請求都作了什麼，使用操做以下圖所示：

Coverage 代碼覆蓋率

能夠觀察到代碼覆蓋率，哪些是沒用的，去除無用代碼，較少代碼體積

你須要點擊下圖的記錄按鈕進行記錄，而後你須要在頁面上進行一些交互操做（如點擊、鼠標移入等）

而後你會獲得下圖，紅色的部分是沒有用到的代碼佔比，綠色部分是用到的代碼佔比，你能夠點擊佔比進度條，到達指定源代碼區進行細緻查看

Changes 變化

顯示更改代碼的比較，你能夠經過這個工具觀察，你用控制檯修改過的代碼，就和 git 的 diff 功能相似，紅色表明刪除、綠色代碼新增

你若是點擊代碼裏的某一行，它會打開源代碼面板，你能夠在這裏進行修改、調試操做

Snippets 代碼片斷

通常在 console 裏能夠臨時運行代碼，可是書寫格式不太友好，並且一換行就執行了（固然你能夠 shift+enter 換行），這時，你又懶癌發做，不想打開代碼編輯器，你可使用 Snippets 這個工具，以下圖所示：

能夠像代碼編輯器同樣書寫，能夠格式化代碼、能夠斷點調試、也能夠單獨導出文件