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：每當腳本遍歷該元素的子元素並修改它們時，調試器會自動停止，讓您檢查出問題所在。
