chrome 開發工具好，誰用誰知道。
你可以：
network 對於分析網路請求情況、檢視請求和響應的詳情特別有用
sources 展示了**載入的資源檔案。
它的一大用處是在js除錯時設定斷點
還可以格式化壓縮後的js**
timeline 並不是指網路請求的載入時間，而是指 js 執行時間、頁面渲染時間，點選底部的 record 可以錄製頁面上執行的內容。
主要是做效能優化的，包括檢視cpu執行時間與記憶體占用
對於優化前端頁面、加速網頁載入速度很有用。
點選 run 按鈕，就可以開始分析頁面，分析完了就可以看到分析結果了
它也可以分析出頁面上的樣式表中有哪些css是沒有使用的
這就是 js 控制台了，前端除錯用的最多的地方。可以直接執行 js **，或者是chrome開放的控制台api。
如console：
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面板的圖貼到這裡，該面板主...