Chrome開發者工具面板

network面板可以記錄頁面上的網路請求的詳情資訊，從發起網頁頁面請求request後分析http請求後得到的各個請求資源資訊（包括狀態、資源型別、大小、所用時間、request和response等），可以根據這個進行網路效能優化。

我把google官方**上介紹network面板的圖貼到這裡，該面板主要包括5大塊窗格(pane)：

controls控制network的外觀和功能。

filters控制requests table具體顯示哪些內容。

overview顯示獲取到資源的時間軸資訊。

requests table按資源獲取的前後順序顯示所有獲取到的資源資訊，點選資源名可以檢視該資源的詳細資訊。

summary顯示總的請求數、資料傳輸量、載入時間資訊。

其中requests table顯示如下資訊列：

controls窗格包括的功能有網路日誌錄製、日誌清理、捕獲螢幕、過濾器，檢視切換、保留日誌開關、cache開關、網路連線開關、網速閥值。

雙擊其中的截圖可以放大顯示，在放大的圖下方可以點選跳轉到上一幀或者下一幀。

單擊則可以檢視該幀**獲時的網路請求資訊，並且在overview上會有一條黃色豎線以標記該幀**獲的具體時間點。

domcontentloaded和load這兩個事件會高亮顯示。

domcontentloaded事件會在頁面上dom完全載入並解析完畢之後觸發，不會等待css、、子框架載入完成。

load事件會在頁面上所有dom、css、js、完全載入完畢之後觸發。

load事件同樣會在overview和requests table上用一條紅色豎線標記，在summary也會以紅色文字顯示確切的時間。

通過點選某個資源的name可以檢視該資源的詳細資訊，根據選擇的資源型別顯示的資訊也不太一樣，可能包括如下tab資訊：

針對上面4個tab進行詳細講解一下各個功能：

①檢視資源http頭資訊

在headers標籤裡面可以看到httprequest url、http method、status code、remote address等基本資訊和詳細的response headers

、request headers以及query string parameters或者form data等資訊。

②檢視資源預覽資訊

在preview標籤裡面可根據選擇的資源型別（json、、文字、js、css）顯示相應的預覽資訊。下圖顯示的是當選擇的資源是json格式時的預覽資訊。

③檢視資源http的response資訊

在response標籤裡面可根據選擇的資源型別（json、、文字、js、css）顯示相應資源的response響應內容。下圖顯示的是當選擇的資源是css格式時的響應內容。

④檢視資源cookies資訊

如果選擇的資源在request和response過程中存在cookies資訊，則cookies標籤會自動顯示出來，在裡面可以檢視所有的cookies資訊。

⑤分析資源在請求的生命週期內各部分時間花費資訊

在timing標籤中可以顯示資源在整個請求生命週期過程中各部分時間花費資訊，可能會涉及到如下過程的時間花費情況：

ttfb這個部分的時間花費如果超過200ms，則應該考慮對網路進行效能優化了，可以參見網路效能優化方案及裡面的相關參考文件。

在該資源的上方第乙個標記為綠色的資源就是該資源的發起者（請求源），有可能會有第二個標記為綠色的資源是該資源的發起者的發起者，以此類推。

在該資源的下方標記為紅色的資源是該資源的依賴資源。

Chrome開發者工具使用

elements 元素 允許我們從瀏覽器的角度看頁面，也就是說我們可以看到chrome渲染頁面所需要的的html css和dom document object model 物件。此外，還可以編輯這些內容更改頁面顯示效果。console 控制台 顯示各種警告與錯誤資訊，並且提供了shell用來和文件...

巧用chrome開發者工具

說明 截圖中的chrome版本為52，不同版本可能略有區別。開發時消除靜態資源快取不能立刻更新的困擾，勾選disable cache即可 切換顏色顯示格式 修改預設顏色顯示格式，在settings 控制台按f1 preferences elements color format 快速選中dom節點，...

chrome開發者工具使用

chrome 開發工具好，誰用誰知道。你可以 network 對於分析網路請求情況 檢視請求和響應的詳情特別有用 sources 展示了 載入的資源檔案。它的一大用處是在js除錯時設定斷點 還可以格式化壓縮後的js timeline 並不是指網路請求的載入時間，而是指 js 執行時間 頁面渲染時間，...