相信大多數web開發者日常使用的瀏覽器都少不了chrome，而且F12調出DevTools也成了很常見的操作。DevTools這個東西真的是web前端開發人員的利器，學習它的文檔有很多，所以在這裡我只列出一些實用但卻可能不被大眾所熟知的技巧。

清空緩存並硬性重新加載頁面

在打開DevTools的時候，鼠標長按地址欄上的刷新按鈕，會獲得三個分別不同的刷新選項：正常重新加載，硬性重新加載，清空緩存並硬性重新加載。最後一個選項對付緩存特別有用。

模擬網絡限速

在建立或更新網站時，必須確保在不同連接條件下提供足夠性能，通常是在低帶寬和高延遲環境中測試。

通過設置頁面的訪問速度，可以查看在不同網絡狀況下，頁面的加載展示情況。

點擊"Network"面板並進入"Throttling"下拉菜單，然後點擊"Add custom profile..."即可添加自定義網絡控制選項。

直接編輯網頁（非source code）

在打開的DevTools的console裡輸入如下命令：

document.designMode = "on"

就可以直接修改網頁上的內容了。

另外，下面的抓屏演示也展示瞭如何清空console的內容，方法如下：

在console中輸入clear()或是按 Ctrl+L(Win / Linux)，Cmd+K（Mac）。

以cURL命令形式複製一個或所有請求

cURL是一種用於進行HTTP事物的命令行工具。

在 Requests Table 中右鍵點擊某個資源，將鼠標懸停在"Copy"上，然後選擇"Copy as cURL"，複製"Network"面板檢測到的所有資源的cURL請求的字符串。

如果要獲取所有檢測到的資源，選擇"Copy ALL as cURL"。

PS.這個操作可能會把個人隱私信息複製出去，比如登錄後的cookie。

DOM元素上設置斷點

不僅可以給JS的code上設置斷點調試，還可以在DOM元素上設置斷點。

當腳本是關於插入、修改、刪除DOM的時候在相應的DOM設置斷點就可以觀察到到底發生了什麼。

在"Elements"面板中右鍵一個元素，在菜單中選擇"Break on..."，然後依據情況選擇其一。

DOM元素設置斷點有三種類型：

• 子樹修改：在移除、添加當前所選節點的子項或更改子項內容時觸發。在子節點屬性發生變化或對當前所選節點進行任何更改時不會觸發。

• 屬性修改：在當前所選節點上添加或移除屬性時，或屬性值發生變化時觸發。

• 節點移除：在移除當前選定的節點時觸發。

在XHR上中斷及在觸發事件時中斷

在XHR上可通過兩種方法設置斷點：當任意XHR達到XHR生命週期的特定階段（readystatechange、load等）或XHR的網址與特定字符串匹配時。

使用"Sources"面板上的"Event Listener Breakpoints"窗格可在觸發特定事件（例如，click）或事件類別（例如，任意mouse事件）時中斷。

添加或移除動態樣式（偽類）

可以在元素上手動設置動態偽類選擇器（例如 ：active、：focus、：hover、：visited）。

可以通過兩種方式在元素上設置動態狀態：

• 在"Elements"面板內右鍵點擊某個元素，然後從菜單中選擇目標偽類，將其啟用或停用。

• 在"Elements"面板中選擇元素，然後在"Styles"窗格中點擊:hov按鈕，使用複選框啟用或停用當前選定元素的選擇器。

檢查和刪除Cookie

從"Application"面板檢查和刪除 Cookie。

快捷鍵參考

• 標籤頁和窗口快捷鍵

• 功能快捷鍵

• 地址欄快捷鍵

• 網頁快捷鍵

• 鼠標快捷鍵

最後，如果大家有什麼DevTools實用的小技巧，歡迎補充。