google chrome一共提供了8大組工具：
elements: 允許我們從瀏覽器的角度看頁面，也就是說我們可以看到chrome渲染頁面所需要的的html、css和dom(document object model)物件。此外，還可以編輯這些內容更改頁面顯示效果；
network: 可以看到頁面向伺服器請求了哪些資源、資源的大小以及載入資源花費的時間，當然也能看到哪些資源不能成功載入。此外，還可以檢視http的請求頭，返回內容等；
sources: 主要用來除錯js；
profiles: 分析web應用或者頁面的執行時間以及記憶體使用情況；
resources: 對本地快取（indexeddb、web sql、cookie、應用程式快取、web storage）中的資料進行確認及編輯；
audits: 分析頁面載入的過程，進而提供減少頁面載入時間、提公升響應速度的方案；
console: 顯示各種警告與錯誤資訊，並且提供了shell用來和文件、開發者工具互動。
tips:
想要檢視元素：hover 等樣式時 可如圖選中對應狀態
Chrome開發者工具詳解 1
這些按鈕的功能點如下 通過js 或者命令列console.log console.warn console.error 可以將日誌資訊輸出到控制台 注 當需要換到下一行而不是回車的時候，請按shift enter。在上一小節，我們已經看到可以在控制台輸入js表示式點選enter即可得到表示式的值，當...
Chrome開發者工具使用
elements 元素 允許我們從瀏覽器的角度看頁面，也就是說我們可以看到chrome渲染頁面所需要的的html css和dom document object model 物件。此外，還可以編輯這些內容更改頁面顯示效果。console 控制台 顯示各種警告與錯誤資訊，並且提供了shell用來和文件...
巧用chrome開發者工具
說明 截圖中的chrome版本為52，不同版本可能略有區別。開發時消除靜態資源快取不能立刻更新的困擾，勾選disable cache即可 切換顏色顯示格式 修改預設顏色顯示格式，在settings 控制台按f1 preferences elements color format 快速選中dom節點，...