本篇文章教你如何使用Chrome開發者工具，和網站的性能診斷。大部分內容都適用於Mozilla Firefox和Microsoft Edge開發者工具，這裏使用的Chome版本是當前最新版本 - 71.0.3578.80，使用電腦是Mac。
首先，在Chrome瀏覽器中打開「開發者工具」的三種方式：
- 點擊最右上方的「自定義及控制 Google Chrome」(三個垂直點) > 更多工具 > 開發者工具
- 快捷鍵方式: ⌘ + Option + I 鍵
- 選中頁面中任何元素，右擊 > 檢查
接下來，我們來看「開發者工具」中的各個面板。
Element(元素面板) - 網頁的佈局、DOM
通常開發者在「Element」面板中查看、修改網頁的DOM(文檔對象模型)。Element面板對開發者的幫助有以下三點:
- 檢查網頁上任何部分的DOM內容
- 瀏覽網頁的整體DOM結構和HTML
- 修改HTML/CSS的操作，直接應用到網頁，查看實際效果。這一點在開發和測試環節非常重要。
左邊欄，我們可以查看網頁的HTML和DOM樹結構中的任何一個元素，可以對元素進行編輯，並實時查看網頁的變化。在「Element」的右邊欄，我們可以查看HTML元素的樣式，並可以啓動/禁用元素的樣式。右邊欄的「Computed」是查看元素的最終樣式結果。「Event listeners」是元素的時間偵聽器。
「ELement」中最常使用的是：檢查網頁元素的HTML和DOM，以及樣式。最簡單的方式是，選中網頁中需要檢查的元素，右擊→檢查，彈出了「Element」面板，並會高亮顯示相應的HTML。另一種方式是，通過鼠標懸浮來查看HTML元素，同時還能顯示margin(綠色)和padding(黃色)的數據，然後通過面板瞭解HTML元素的更多信息。
Bonus tip: 在Style面板中，通過選中‘:hov’可以方便地查看HTML元素的懸浮交互樣式。
Toggle device toolbar - 檢查網頁的適配性
Chrome開發者工具還爲創建響應式網站，提供了「」(左上方)來模擬網頁在不同終端渲染的結果，比如: iPhone, iPad 和 Nexus...
Source - JS代碼調試
Chrome開發者工具中最常用的面板用於分析、調試和編輯網頁的JavaScript, HTML, CSS。「Sources」面板組織管理從網頁的域獲取各種資源，被壓縮的文件可以通過‘去混淆’來重新格式化展示出來，具體操作見下面的圖片：
另外，代碼也可以直接在「Source」面板修改。
「Sources」面板通過提供可用於設置“斷點”的內置調試器來啓用JavaScript調試。在斷點處，可以通過按'Esc'鍵在小窗口中打開console面板來調查各種變量的值。根標準調試器中一樣，可以使用諸如單步執行、單步執行和單步執行等各種選項。還包含的其他特性：
- 在任何錯誤發生時，啓用斷點
- 調用堆棧
- 各種類型的斷點，如事件偵聽器斷點(如單擊)或DOM斷點(如修改樹)。
Network - 瞭解請求和下載的資源文件並優化網頁加載性能
網絡面板記錄頁面上每個網絡操作的相關信息，包括詳細的耗時數據、HTTP 請求與響應標頭和 Cookie等等。每一個請求的參數(body、header、params)都會被記錄下來，並且可以使用網絡面板篩選需要查看的網絡請求。
網名面板有5個窗格組成:
- Controls: 可以控制 Network 面板的外觀和功能。
- Filters: 可以控制在 Requests Table 中顯示哪些資源。提示：按住 Cmd (Mac) 或 Ctrl (Windows/Linux) 並點擊過濾器可以同時選擇多個過濾器。
- Overview: 顯示了資源檢索時間的時間線。如果您看到多條豎線堆疊在一起，則說明這些資源被同時檢索。
- Requests Table: 列出了檢索的每一個資源。此表格按時間順序排序，最早的資源在頂部。點擊資源的名稱可以顯示更多信息。 提示：右鍵點擊 Timeline 以外的任何一個表格標題可以添加或移除信息列。
- Summary: 此窗格可以一目瞭然地告訴您請求總數、傳輸的數據量和加載時間。
捕捉屏幕截圖: Network 面板可以在頁面加載期間捕捉屏幕截圖。此功能稱爲幻燈片。點擊攝影機圖標可以啓用幻燈片。圖標爲灰色時，幻燈片處於停用狀態 (已停用幻燈片)。如果圖標爲藍色，則說明已啓用 (已啓用幻燈片)。
load事件的觸發:
- Overview 窗格中的紅色豎線表示事件。
- Requests Table 中的紅色豎線也表示事件。
- 在 Summary 窗格中，您可以看到事件的確切時間。
查看單個資源的詳細信息:
點擊資源名稱（位於 Requests Table 的 Name 列下）可以查看與該資源有關的更多信息。可用標籤會因您所選擇資源類型的不同而不同，但下面四個標籤最常見：
- Headers：與資源關聯的 HTTP 標頭。
- Preview：JSON、圖像和文本資源的預覽。
- Response：HTTP 響應數據（如果存在）。
- Timing：資源請求生命週期的精細分解。
Bonus tip: 右擊選中某個網絡請求，選中copy → copy as cURL，可以在終端粘貼copy的內容，用終端來訪問了。
Application - 使用應用面板檢查加載的所有資源
從 Application 面板檢查和管理存儲、數據庫與緩存。
- 查看和修改本地存儲與會話存儲。
- 檢查和修改 IndexedDB 數據庫。
- 對 Web SQL 數據庫執行語句。
- 查看應用緩存和服務工作線程緩存。
- 點擊一次按鈕即可清除所有存儲、數據庫、緩存和服務工作線程。
Console - 使用控制檯面板記錄診斷信息
控制檯面板可以被認爲是一個實驗性的遊樂場。 您可以運行任何類型的JavaScript代碼來訪問全局窗口變量。 控制檯面板還可用作所有類型錯誤（網絡和源代碼相關）的記錄器，並在網站或發生錯誤的源代碼中的行號顯示在一個位置。 此外，在調試期間，可以打開控制檯面板以檢查當前斷點處的局部變量的值。 控制檯面板公開一個對象“控制檯”，可用於以不同格式記錄信息。
擴展
Chrome開發者工具可以很容易地擴展爲不同的目的創建擴展，然後可以添加爲新的面板。例如，流行的devtools擴展包括AngularJS的擴展，React。有關擴展devtools的更多信息，請參閱谷歌開發人員網站上的這篇文章。
參考文章: