在前端項目開發中，chorme瀏覽器頗受青睞。打開網站，點擊F12，即可看到chorme開發者工具。我們可以藉助chorme開發者工具進行網頁調試，來查看網頁html代碼、css樣式、http請求、運行js等。
開發者工具面板上包含了Elements、Console、Sources、Network、Performance、Memory、Application、Security、Audits面板。
各面板的功能及使用說明如下：
Elements:
查找網頁源代碼，實時編輯DOM節點和CSS樣式，修改的效果會立即顯示在瀏覽器中，極大地方便了前端的調試。
Console:
輸出開發過程中的日誌信息，一般通過js命令行【console.log()】、【console.error()】可以輸出日誌。
Network:
從發起網頁頁面請求Request後分析HTTP請求後得到的各個請求資源信息（包括狀態、資源類型、大小、所用時間等），可以根據這個進行網絡性能優化。
Header：列出資源的HTTP頭信息，包括請求url、HTTP方法、響應狀態碼、請求頭和響應頭及它們各自的值、請求參數等等。
Preview：預覽面板，據你所選擇的資源類型（JSON、圖片、文本）顯示相應的預覽。
Response：顯示HTTP的Response信息，響應信息面板包含資源還未進行格式處理的內容。
cookie:顯示資源HTTP的Request和Response過程中的Cookies信息。
Timing：資源請求的詳細信息花費時間。
Sources:
斷點調試JS。見https://blog.csdn.net/cyyax/article/details/51242720
Performance：
它的作用就是記錄與分析應用程序運行過程中所產生的活動，更多的是用在性能優化方面。
Memory：
堆棧快照、JavaScript函數內存分配、隔離內存泄漏。
Application：
記錄網站加載的所有資源信息，包括存儲數據（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、緩存數據、字體、圖片、腳本、樣式表等。
Security：
可以去調試網頁安全和認證等問題，確保你的網站上實現HTTPS（判斷網頁安全性）。
Audits ：
對當前網頁進行網絡利用情況、網頁性能方面的診斷，並給出一些優化建議。比如列出所有沒有用到的CSS文件等。