elements （元素）允許我們從瀏覽器的角度看頁面，也就是說我們可以看到chrome渲染頁面所需要的的html、css和dom(document object model)物件。此外，還可以編輯這些內容更改頁面顯示效果。
console（控制台）顯示各種警告與錯誤資訊，並且提供了shell用來和文件、開發者工具互動。
sources（資源面板）主要用來除錯js。
network（網路）可以看到頁面向伺服器請求了哪些資源、資源的大小以及載入資源花費的時間，當然也能看到哪些資源不能成功載入。此外，還可以檢視http的請求頭，返回內容等。
memory（記憶體）分析web應用或者頁面的執行時間以及記憶體使用情況。
security（安全）通過該面板你可以去除錯當前網頁的安全和認證等問題並確保您已經在你的**上正確地實現https。
audits（審計）分析頁面載入的過程，進而提供減少頁面載入時間、提公升響應速度的方案。
chrome開發者工具使用
chrome 開發工具好，誰用誰知道。你可以 network 對於分析網路請求情況 檢視請求和響應的詳情特別有用 sources 展示了 載入的資源檔案。它的一大用處是在js除錯時設定斷點 還可以格式化壓縮後的js timeline 並不是指網路請求的載入時間，而是指 js 執行時間 頁面渲染時間，...
巧用chrome開發者工具
說明 截圖中的chrome版本為52，不同版本可能略有區別。開發時消除靜態資源快取不能立刻更新的困擾，勾選disable cache即可 切換顏色顯示格式 修改預設顏色顯示格式，在settings 控制台按f1 preferences elements color format 快速選中dom節點，...
Chrome開發者工具面板
network面板可以記錄頁面上的網路請求的詳情資訊，從發起網頁頁面請求request後分析http請求後得到的各個請求資源資訊 包括狀態 資源型別 大小 所用時間 request和response等 可以根據這個進行網路效能優化。我把google官方 上介紹network面板的圖貼到這裡，該面板主...