Google瀏覽器如今是Web開發者所使用的最受歡迎的網頁瀏覽器。伴隨每六個星期一次的發布週期和不斷擴大的強大的開發功能，Chrome變成了一個必須掌握的工具。大多數前端開發者可能熟悉關於chorme的許多特點，例如使用console和debugger線上編輯CSS。在這篇文章中，我們將分享15個很酷的技巧，讓你能夠更好的改善工作流程。看完這些技巧你會驚訝又興奮的發現是不是很像Sublime Text。

1 說明

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

2 Elements

2.1 功能

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

在 Elements 面板中檢查和即時編輯DOM 樹中的任何元素。
在 Styles 窗格中檢視和變更套用到任何選定元素的 CSS 規則。
在 Computed 窗格中檢視和修改選取元素的方塊模型。

2.2 應用場景

#在開發過程中編輯DOM節點

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

2.3 操作

DOM節點

　　
開啟控制台，選定需要修改的DOM節點，雙擊選定元素，然後進行修改即可。

#編輯樣式

#　　開啟控制台，選定需要修改的DOM節點，在 Styles 窗格中即時編輯樣式屬性名稱和

值。所有樣式均可修改，除了灰色部分（與

　　　　　　　要編輯名稱或值，請點選它，進行更改，然後按
Tab 或 Enter 儲存變更。
CSS 修改不是永久的，重新載入頁面時變更會遺失。
檢查和編輯框模型參數

#使用

Computed 窗格檢查和編輯目前元素的框模型參數。框模型中的所有值均可修改，只需點擊它們即可。

3.1 功能
列印日誌

執行測試程式碼

#測量與統計執行

異常與報錯處理
在輸出頁面程式碼中需要輸出的日誌
可以在瀏覽器控制台測試程式碼
#檢測程式碼的執行效率
輸出程式碼中存在的例外和錯誤訊息

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 標籤下所列來源的所有資料。