前端快速除錯工具Chrome瀏覽器
阿新 • • 發佈：2018-12-13
通常前端開發過程中使用最多的除錯工具大概就是Chrome瀏覽器了，雖然Chrome只是一款瀏覽器，但是要了解使用Chrome所有的開發除錯技術也是很難的。
基礎介紹
在Chrome瀏覽器中，用F12開啟控制檯後，一名優秀的前端工程師需要儘量保證自己對裡面95%以上的操作和內容都很熟悉。Chrome的除錯面板主要包括裝置模擬、Elements、Console、Sources、Memory、Security、Network、Application、Audits、Performance這些內容，如圖所示。簡單介紹下各個tab對應的作用。
| 箭頭 | 用來選擇DOM元素，點選啟用後，將滑鼠移動到頁面的位置，Elements視窗游標會自動移動到相應的程式碼段 |
| 裝置模擬器 | 裝置模擬不僅可以讓Chrome模擬移動端瀏覽器和桌面瀏覽器中開啟頁面的情況，而且還可以模擬移動端常見的不同機型大小和解析度情況下載入頁面的顯示結果，或者自己新增特定模擬裝置的螢幕來模擬顯示效果。 |
| Elements | 用於閱讀DOM結構和DOM樣式的內容及規則，或者新增阻塞DOM渲染的斷點功能來檢視頁面的渲染細節。 |
| Console | 檢視控制檯輸出的內容或者直接執行某部分JavaScript指令碼的執行命令 |
| Sources | 通過Sources我們可以瀏覽網站載入的所有靜態目錄資源（HTML文件，CSS，JS，圖片），同時可以進行資源內容的檢視閱讀和指令碼的斷點除錯。 |
| Memory | 用來記錄Chrome瀏覽器的記憶體使用情況 |
| NetWork | 常用於檢視頁面內容載入的網路請求情況，如請求的返回碼、型別、大小、消耗時間、網頁資源載入時序圖等。 |
| Application | 用於檢視Chrome瀏覽器的快取情況，主要包括HTTP檔案快取、Application Cache、ServiceWorker快取物件、LocalStorage、SessionStorage、IndexDB、WebSQL、Cookies、Cache Storage等快取空間中的情況。 |
| Security | 用於管理網站安全證書，例如，在HTTPS的網站下面我們可以通過它來檢視網站使用的證書內容。 |
| Audits | 可以根據目前頁面文件載入和指令碼執行情況給出當前前端頁面的部分優化建議，這對於前端頁面的優化具有極其重要的借鑑意義。 |
| Performance（Timeline） | 最為強大的工具，按時間順序展示頁面載入過程及後續過程的網路請求、頁面渲染過程、JS執行時長、頁面幀率、CPU/GPU使用情況等。 |