一個很酷的Chrome DevTools技巧清單

Chrome DevTools提供了一套令人驚艷的工具，幫助您進行Web平台的開發。這裡有一些您可能還不知道的小貼士。

• 在Elements面板中拖放
• 在Console中參考當前選中的元素
• 使用上一個操作的值在Console中
• 添加CSS並編輯元素狀態
• 查找CSS屬性的定義位置
• 將修改後的CSS保存到文件
• 截取單個元素的屏幕截圖
• 使用CSS選擇器查找元素
• 在Console中使用Shift+Enter
• 清除Console
• 前往…
• Watch Expression
• XHR/Fetch調試
• DOM修改的調試

如果您對Chrome DevTools還不熟悉，可以查看Chrome DevTools概述。

在Elements面板中拖放

在Elements面板中，您可以拖放任何HTML元素並更改其在頁面中的位置。

在Console中參考當前選中的元素

在Elements面板中選擇一個節點，然後在控制台中輸入$0來引用它。

提示：如果您正在使用jQuery，您可以輸入$($0)以訪問該元素上的jQuery API。

在Console中使用上一個操作的值

使用$_來引用在Console中執行的上一個操作的返回值。

添加CSS並編輯元素狀態

在Elements面板中有兩個非常有用的按鈕。

第一個按鈕允許您添加一個新的CSS屬性，可以選擇任何選擇器，但預填當前選中的元素。

第二個按鈕允許您觸發選中元素的狀態，這樣您可以看到它處於活動狀態、懸停狀態或焦點狀態時應用的樣式。

查找CSS屬性的定義位置

在Elements面板中cmd-click（Windows上的ctrl-click）一個CSS屬性，DevTools將指向定義該屬性的位置，在Source面板中顯示。

將修改後的CSS保存到文件

點擊您編輯的CSS文件名。檢查器將其打開到Sources面板中，然後您可以保存其中應用的實時編輯。

這個技巧不適用於使用”+”添加的新選擇器，也不適用於element.style屬性，只適用於修改的現有選擇器。

截取單個元素的屏幕截圖

選擇一個元素，然後按cmd-shift-p（或Windows上的ctrl-shift-p）打開命令菜單，選擇Capture node screenshot。

使用CSS選擇器查找元素

按下cmd-f（Windows上的ctrl-f）在Elements面板中打開搜索框。

您可以在其中輸入任何字符串來匹配源代碼，或者您也可以使用CSS選擇器讓Chrome為您生成圖像。

在Console中使用Shift+Enter

要在Console中編寫跨越多行的命令，按shift-enter。

一旦準備就緒，按Enter執行腳本的末尾。

清除Console

您可以使用Console頂部左側的Clear按鈕清除控制台，也可以按ctrl-l或cmd-k。

前往…

在Sources面板中：

• cmd-o（Windows上的ctrl-o）顯示頁面加載的所有文件。
• cmd-shift-o（Windows上的ctrl-shift-o）顯示當前文件中的符號（屬性、函數、類）。
• ctrl-g 跳轉到特定行。

Watch Expression

將您將在調試會話期間多次檢查的變量名稱或表達式添加到Watch Expression列表中。

XHR/Fetch調試

從調試器打開XHR/Fetch Breakpoints面板。

您可以設置它在發送任何XHR / Fetch調用時中斷，或只在特定調用上中斷。

DOM修改的調試

右鍵單擊一個元素並啟用Break on Subtree Modifications：每當腳本遍歷該元素的子元素並修改它們時，調試器會自動停止，讓您檢查出問題所在。

tags: [“Chrome DevTools”, “tips and tricks”]