本節大綱

• 查看 HTML / CSS 程式碼 -「Elements」分頁
• 追蹤通訊狀況 -「Network」分頁
• 程式 Debug -「Sources」分頁
• 確認 Storage / Cookie 內容 -「Application」分頁
• Log 確認 / 物件操作等等 … -「Console」分頁

前言

各個瀏覽器內建的開發者工具，是在撰寫 JavaScript 時不可或缺的強大工具，所以對於一個前端工程師來講，更是要如何熟用才行。故以下用個簡單的清單，列出目前很多人使用的 Google Chrome 開發者工具的功能說明。

• Elements：是用來確認 HTML / CSS 程式碼
• Network：追蹤瀏覽器的通訊狀況
• Sources：程式碼除錯 (可以設定中斷點與變數監控等等 ...)
• Timeline：查看程式效能
• Profiles：查看及蒐集 JavaScript 使用的 CPU / 記憶體等等資訊
• Application：確認 Cookie / Storage 等等內容
• Audits：可透過列表顯示頁面分析、最佳化提示
• Console：控制台 (常用來確認變數資訊、顯示錯誤訊息等等 ...)

查看 HTML / CSS 程式碼 -「Elements」分頁

• 這個頁面很常使用，用來查看 HTML & Css 樣式，而且方便的是如果直接修改樣式，修改的結果會直接反應到頁面上，在調整 Css 樣式時非常方便。
• 特別是點擊 Select an element in the page to inspect it 時，會直接選取到當下頁面所選擇到的元素，接著右側的 style 分頁就會立即顯示所選元素目前套用的樣式。
  

追蹤通訊狀況 -「Network」分頁

• 這個頁面很常使用，去呼叫 API 時的通訊狀況，根據 status 回應的 200、401、404、500 不同，可以很快地知道 API 的呼叫狀況，這些數字待未來再來個別探討。
• 中間的 Timeline 是會顯示下載的時間，也可以透過者裡觀察，在下載時有沒有變慢，近一步追蹤其原因。
• 如果更要追蹤 API 詳細的資訊，點擊該 API 時，可透過 Headers、Response 來查看。