Chrome DevTools 調研筆記

時間 2019-11-09

標籤 chrome devtools 調研筆記欄目 Chrome 简体版

原文原文鏈接

1 說明

此篇文章針對Chrome DevTools經常使用功能進行調研分析。描述了每一個功能點能實現的功能、應用場景和詳細操做。javascript

2 Elements

2.1 功能

檢查和實時更新頁面的HTML與CSSjava

在 Elements 面板中檢查和實時編輯 DOM 樹中的任何元素。
在 Styles 窗格中查看和更改應用到任何選定元素的 CSS 規則。
在 Computed 窗格中查看和修改選定元素的框模型。

2.2 應用場景

開發過程當中編輯DOM節點
調試DOM節點的樣式
調試過程當中檢查和編輯框模型參數

2.3 操做

編輯DOM節點
- 　　打開控制檯，選定須要修改的DOM節點，雙擊選定元素，而後進行修改便可。

編輯樣式
- 　　打開控制檯，選定須要修改的DOM節點，在 Styles 窗格中實時編輯樣式屬性名稱和值。全部樣式都可修改，除了灰色部分（與 User Agent 樣式表同樣）。

　　　　　　　要編輯名稱或值，請點擊它，進行更改，而後按 Tab 或 Enter 保存更改。默認狀況下，您的 CSS 修改不是永久的，從新加載頁面時更改會丟失。　web

檢查和編輯框模型參數
- 使用 Computed 窗格檢查和編輯當前元素的框模型參數。框模型中的全部值都可修改，只需點擊它們便可。　　數據庫

3 Console

3.1 功能

打印日誌
執行測試代碼
測量和統計執行
異常和報錯處理

3.2 應用場景

輸出頁面代碼中須要輸出的日誌
能夠在瀏覽器控制檯測試代碼
檢測代碼的執行效率
輸出代碼中存在的異常和報錯信息

3.3 操做

3.3.1 經常使用API：

console.log() 輸出信息
console.info() 輸出信息
console.warn() 輸出警告信息
console.error() 輸出錯誤信息
console.group() 輸出一組信息，須要搭配console.groupEnd() 使用
console.groupEnd() 輸出一組信息，須要搭配console.gruop() 使用
console.time() 輸出代碼執行的時間，須要搭配console.timeEnd() 使用
console.timeEnd() 輸出代碼執行的時間，須要搭配console.time() 使用

4 Network

4.1 功能

測試網絡性能
分析網絡請求

4.2 應用場景

4.3 操做

4.3.1 記錄網絡請求

默認狀況下，只要Chrome DevTools在開啓狀態，DevTools會記錄全部的網絡請求，記錄都是在Network面板展現的。瀏覽器

4.3.2 中止記錄網絡請求

點擊Stop recording network log紅色圖標，當它變爲灰色時，表示DevTools不在記錄請求
快捷鍵：在Network面板下，Command+E(Mac)或者Ctrl+E(Windows,Linux)

4.3.3 清除網絡請求

4.3.4 跨頁面加載時，保留網絡請求記錄

當頁面重載或者頁面跳轉時，默認狀況下，Network面板下的網絡請求記錄表也是刷新的。若是想保留以前頁面的網絡請求數據，能夠勾選Preserve log。
經常使用的一個應用場景：登陸/註冊時會調用登陸/註冊API，開發者想查看這個接口返回的狀況，可是登陸/註冊成功後通常會跳轉到新的頁面，致使了Network面板的請求記錄被刷新從而看不到登陸/註冊接口返回的狀況。此時勾選上Preserve log，不管跳轉到那個頁面，都能在Network網絡請求記錄表中查看到以前接口返回的狀況。

4.3.5 頁面加載時捕獲屏幕截圖

捕獲屏幕截圖能夠分析在頁面加載的過程當中，用戶在不一樣的時間段內看到的網頁是什麼樣子的。
點擊Capture screenshots圖標開啓捕獲功能，當圖標變爲藍色表示已開啓，重載頁面便可看到不一樣時間的屏幕截圖。

捕獲屏幕截圖以後，能夠進行如下操做：緩存

鼠標懸浮在一張圖片上時，該圖片四周會出現一個黃色的邊框，同時，在Overview和Waterfall窗口裏面也分別有一條黃色的豎線，這條黃色的豎線表示這張圖片的捕獲時間
點擊某一張圖片，能夠過濾掉在這張圖片捕獲以後發生的全部請求
雙擊圖片，能夠放大該圖片

4.3.6 禁用瀏覽器緩存

在http請求的過程當中，有些資源在頁面初次加載以後會被緩存到瀏覽器中，也就是那些狀態碼爲304的資源。爲了儘量準確地模擬用戶第一次加載咱們網頁時的情景，須要禁用瀏覽器緩存，這樣，每個請求都是從服務端傳送過來的，較爲準確地反應出網頁初次加載的實際狀況安全

4.3.7 模擬網速條件

在Network Throttling下拉框中能夠選擇不一樣的網絡條件進行模擬，如2G、3G、4G、WiFi等。性能優化

除了選中已有的網絡選項，也能夠自定義網速相關條件：打開Network Throttling菜單，選擇Custom > Add。服務器

另外一種模擬狀況較爲特殊，就是無網絡。利用service workers，PWA(Progressive Web Apps)在無網絡的狀況下依然可使用。模擬這種無網絡環境，直接勾選Offline便可。cookie

提示：開發者會看到Network左側有個警告圖標，這個圖標就是提示開發者當前處於模擬網絡條件下。

4.3.8 手動清除瀏覽器緩存、cookies

在網絡請求記錄表裏面右鍵，選擇Clear Browser Cache或Clear Browser Cookies。

4.3.9 根據屬性過濾

點擊漏斗圖標使其顏色變爲藍色，而後就能夠對網絡請求表中的數據進行進一步的過濾。
在輸入框中能夠輸入一些字符串、域、大小、狀態碼、媒體類型等等。

4.3.10 根據類型過濾

這裏是能夠多選的：按住Command(Mac)鍵或Ctrl(Windows,Linux)鍵，而後單擊不一樣的類型，如點擊JS和Img，則過濾出js文件和圖片。顯然，All不與其餘類型共存，選擇All的時候不能再選某一個具體類型。

4.3.11 查看請求記錄

Name：文件的名字或者資源的標識符
Status：HTTP狀態碼
Type：請求資源的MIME類型
Initiator：如下對象或處理能夠發起一個請求
Parse：Chrome的HTML解析器
Redirect：HTTP重定向
Script：js函數
Other：一些別的處理或操做，好比經過連接導航到一個頁面，或者是在瀏覽器的地址欄輸入一個地址而後回車
Size：響應頭大小+響應體大小
Time：總的持續時間，從發起請求到資源下載完成
Waterfall：每個請求活動的不一樣階段的可視化展現

4.3.12 Headers：查看請求頭、響應頭以及請求參數

在列Name下，點擊某個請求的URL，能夠查看到請求、響應的詳細內容。

默認狀況下，請求、響應頭是按照字母表順序顯示的http頭部的名字，若是想按照實際接收的順序顯示，點擊上圖中的view source，反之點擊上圖中的view parsed。
在Headers選項卡中也可查看請求的參數，下圖橙色方框部分。也有view source和view parsed，另外還有參數編碼格式（view URL encoded）和解碼格式（view decoded）。

Preview：查看響應體的預覽

Response：查看響應體

Cookies：查看cookies

4.3.13 Timing：查看請求在各個階段對應的時間

Queueing：瀏覽器會在如下狀況對請求進行排隊：
- 有更高優先級的請求
- 在這個域下，已經有6個TCP鏈接了，達到Chrome最大限制數量。此條規則僅適用在HTTP/1.0和HTTP/1.1
Stalled：Queueing中的任何一個因素髮生都會致使該請求被拖延
Proxy negotiation：瀏覽器與代理服務器協商消耗的時間
DNS Lookup：瀏覽器對請求的IP地址進行DNS查找所消耗的時間
Initial conncection：發起鏈接所消耗的時間
Request sent：請求發送消耗的時間
Waiting (TTFB)：瀏覽器等待響應的時間，TTFB表示 Time To First Byte
Content Download：資源下載所消耗的時間

4.3.14 查看請求的發起對象和依賴對象

按住Shift鍵，而後鼠標懸浮在某個請求上，該請求的發起對象由綠色標誌，該請求的依賴對象由紅色標誌。

4.3.15 查看加載事件

DevTools在多個地方顯示了DOMContentLoaded和load事件發生時對應的時間。DOMContentLoaded事件對應紫色的線，load事件對應紅色的線

4.3.16 查看請求的總數量和總大小

這裏的數據表示DevTools打開之後被記錄的請求所對應的數據，若是有些請求在DevTools打開以前已經發生了，這些請求的數據是不計算在這裏面的。

5 Sources

5.1 功能

頁面資源查找
實現代碼編輯同步到本地功能
調試javascript

5.2 應用場景

查找頁面所請求的資源列表
開發或調試過程當中，能夠實如今瀏覽器上修改代碼自動同步到本地文件
開發過程當中，可使用經過console.log()來查找或修正代碼中的錯誤，可是使用「斷點」的方式能夠大大提高速度，也更有效。

5.3 操做

實時編輯代碼功能

該功能能夠一邊修改並保存到本地文件中，在sources工做組中右鍵點擊」 Add folder to workspace 」將本地文件夾添加到該工做組中，在添加進來的文件夾中打開你想要編輯的文件，或者在文件上右鍵點擊」 Map to File System Resource… 「,也能夠「Ctrl+o」打開搜索面板再打開文件。編輯以後按Ctrl+s保存，在本地文件中也會被修改。

調試javascript（斷點）

斷點讓您能夠暫停執行中的代碼，並對暫停時刻的全部變量值進行檢查。

檢查點擊 Event Listener Breakpoints 將該部分展開。選中click複選框、當選中click複選框時，就是在全部的click事件上設置了一個基於事件的斷點。當點擊任何DOM節點，而且該節點具備click處理程序時，Devtools會自動暫停在該節點click處理程序的第一行。

注：這不過是 DevTools 提供的衆多斷點類型中的一種。應使用的斷點類型取決於您要調試的問題類型。

通過點擊

能夠一步一步調試代碼。

單步調試代碼

跳過調試代碼

腳本繼續執行，直至到達您設置了斷點的代碼行。

6 Application

6.1 功能

記錄網站加載的全部資源信息，包括存儲數據（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）,緩存數據、字體、圖片、腳本、樣式表等。

6.2 應用場景

查看頁面的local Storage。
查看頁面的Session Storage
查看和刪除頁面的cookie
查看頁面的資源
清除全部存儲、數據庫、緩存和服務工做線程。

6.3 操做

6.3.1 查看頁面的local Storage。

雙擊鍵或值能夠修改相應的值。
雙擊空白單元格能夠添加新條目。
點擊對應的條目，而後按 Delete 按鈕能夠刪除該該條目。只需點擊一次按鈕，便可從 Clear storage 窗格擦除全部本地存儲數據。
若是您使用一種能夠建立、刪除或修改條目的方式與頁面交互，則不會看到這些更改實時更新。點擊 refresh 按鈕能夠查看您的更改。

6.3.2 查看頁面的Session Storage。

Session Storage 窗格與 Local Storage 窗格的工做方式相同。參閱上面的Local Storage部分

6.3.3 查看和刪除頁面的cookie

查看與 Cookie 有關的詳細信息，例如名稱、值、網域和大小，等等。
刪除單個 Cookie、選定網域的 Cookie 或全部網域的所有 Cookie。
- 　　使用 Cookies 窗格能夠查看和刪除 Cookie。您沒法修改 Cookie 值。

爲每一個 Cookie 提供瞭如下字段：

能夠經過多種方式刪除 Cookie：

選擇 Cookie 並按 Delete 按鈕能夠刪除相應 Cookie。
按 Clear 按鈕能夠刪除指定組的全部 Cookie。

6.3.4 查看頁面的資源

使用 Application 面板的 Frames 窗格能夠按框架組織頁面的資源。

6.3.5 清除全部存儲、數據庫、緩存和服務工做線程。

有時，您只須要擦除給定源的全部數據。利用 Application 面板上的 Clear Storage 窗格，您能夠選擇性地註銷服務工做線程、存儲和緩存。要清除數據，只需啓用您想要擦除的組件旁的複選框，而後點擊 Clear site data。操做將清除 Clear storage 標籤下所列源的全部數據。