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