說明：截圖中的chrome版本為52，不同版本可能略有區別。
開發時消除靜態資源快取不能立刻更新的困擾，勾選disable cache即可
切換顏色顯示格式
修改預設顏色顯示格式，在settings（控制台按f1）>preferences>elements>color format
快速選中dom節點，滑鼠選中的dom節點，可以看到chrome將其賦值為$0，因此在控制台直接敲出$0就可以得到，不用去輸繁瑣的css選擇器，而且$1 - $4記錄了你最近選過的4個dom節點。
chrome預設提供了一些選擇dom的函式
開啟乙個chrome空白頁（確保$沒有被js使用），測試如下
斷點可以編輯，比如在for迴圈中可以編輯進入斷點的條件。
全域性搜尋（ctrl+shift+f），快速找到**
美化**，方便除錯
chrome中有專門寫**的地方（位置在sources>snippets），這裡寫的**不會丟失，任何頁面都可以執行，非常方便。
Chrome開發者工具使用
elements 元素 允許我們從瀏覽器的角度看頁面，也就是說我們可以看到chrome渲染頁面所需要的的html css和dom document object model 物件。此外，還可以編輯這些內容更改頁面顯示效果。console 控制台 顯示各種警告與錯誤資訊，並且提供了shell用來和文件...
Chrome開發者工具面板
network面板可以記錄頁面上的網路請求的詳情資訊，從發起網頁頁面請求request後分析http請求後得到的各個請求資源資訊 包括狀態 資源型別 大小 所用時間 request和response等 可以根據這個進行網路效能優化。我把google官方 上介紹network面板的圖貼到這裡，該面板主...
chrome開發者工具使用
chrome 開發工具好，誰用誰知道。你可以 network 對於分析網路請求情況 檢視請求和響應的詳情特別有用 sources 展示了 載入的資源檔案。它的一大用處是在js除錯時設定斷點 還可以格式化壓縮後的js timeline 並不是指網路請求的載入時間，而是指 js 執行時間 頁面渲染時間，...