Chrome開發者工具使用教程-主要功能簡介（一）

Chrome開發者工具是谷歌瀏覽器自帶的一款開發者工具，它可以給開發者帶來很大的便利。

主要作用有：

• 快速定位問題
• 查看站點頁面加載信息
• 在線頁面樣式調整
• 前端代碼調試
• 前端日誌分析
• 瀏覽器存儲查看
• 在線性能分析
• 等…

1.如何調出開發者工具

• 按F12鍵
• CTRL+SHIFT+I 或在頁面上右鍵，點擊“檢查”按鈕，如下圖：
  

2.面板功能簡介

• 元素（Elements）:
  用於查看或修改HTML元素的屬性、CSS屬性、監聽事件、斷點等。css可以即時修改，即時顯示。大大方便了開發者調試頁面
• 控制檯（Console）:
  控制檯一般用於執行一次性代碼，查看JavaScript對象，查看調試日誌信息或異常信息。還可以當作Javascript API查看用。例如我想查看console都有哪些方法和屬性，我可以直接在Console中輸入"console"並執行Sources:斷點調試JS。
• 資源（Sources）:
  用於查看頁面的HTML文件源代碼、JavaScript源代碼、CSS源代碼，此外最重要的是可以調試JavaScript源代碼，可以給JS代碼添加斷點等。
• 網絡（Network）:
  記錄當前頁面請求加載信息，並記錄各個請求資源信息（包括狀態、資源類型、大小、所用時間等），可以根據這個進行網絡性能優化。
• 性能（Performance）:
  用來對當前頁面進行性能分析。
• 內存（Memory）:
  用於分析當前頁面內存消耗。
• 應用（Application）:
  記錄網站加載的所有資源信息，包括存儲數據（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、緩存數據等。
• 安全（Security）:
  判斷當前網頁是否安全。
• 審計（Audits）:
  對當前網頁進行網絡利用情況、網頁性能方面的診斷，並給出一些優化建議。

後續博文會詳細講解在前端開發日常工作是如何使用Chrome開發者工具的。