Chrome DevTools 調研筆記

本文轉載自查看原文 2017-07-03 15:53 2578 Chrome

1 說明

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

2 Elements

2.1 功能

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

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

2.2 應用場景

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

2.3 操作

編輯DOM節點
- 　　打開控制台，選定需要修改的DOM節點，雙擊選定元素，然后進行修改即可。

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

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

檢查和編輯框模型參數
- 使用 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即可。

提示：開發者會看到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 標簽下所列源的所有數據。