平常使用 chrome 開發者工具的頻率很高，但從來沒有完整的了解過開發者工具中的面板。最近想深入學習一下前端的效能優化，發現使用開發者工具除錯是必不可少的步驟，花了兩天時間梳理一下面板的功能，覺得收穫還挺多。
日常的工作是做 h5 開發，看 官方文件 的時候，學習到了不少協助開發的功能，用腦圖梳理了一下。
本文是個人在學習 官方文件 時的功能梳理，這裡只簡單介紹了各個面板的基礎功能，建議系統的看一遍官方文件中的文章，對於開發與除錯有很大的幫助。
Chrome開發者工具使用
elements 元素 允許我們從瀏覽器的角度看頁面，也就是說我們可以看到chrome渲染頁面所需要的的html css和dom document object model 物件。此外，還可以編輯這些內容更改頁面顯示效果。console 控制台 顯示各種警告與錯誤資訊，並且提供了shell用來和文件...
巧用chrome開發者工具
說明 截圖中的chrome版本為52，不同版本可能略有區別。開發時消除靜態資源快取不能立刻更新的困擾，勾選disable cache即可 切換顏色顯示格式 修改預設顏色顯示格式，在settings 控制台按f1 preferences elements color format 快速選中dom節點，...
Chrome開發者工具面板
network面板可以記錄頁面上的網路請求的詳情資訊，從發起網頁頁面請求request後分析http請求後得到的各個請求資源資訊 包括狀態 資源型別 大小 所用時間 request和response等 可以根據這個進行網路效能優化。我把google官方 上介紹network面板的圖貼到這裡，該面板主...