【譯】12個Chrome DevTools小技巧

本文采用意譯，這是原文

1.元素拖拽

在Elements面板，你能夠對元素進行任意拖拽操做

2.獲取當前選中元素

在Elements面板選中一個元素以後，在Console中輸入$0能夠獲取到選中元素的引用

若是你使用jQuery，那麼輸入$($0)，能夠獲取當前元素的jQuery對象並使用相關API

3.在Console面板中使用最近一次操做值

在Console面板中，使用$_變量引用上一次操做返回值

4.添加樣式和改變狀態

在Elemetns面板的Styles面板中，有兩個頗有用的按鈕

第一個，你能夠爲你選擇的元素添加新樣式

第二個，若是選擇元素樣式有僞類，你能夠任意觸發它的僞類樣式

5.改變樣式並保存

在Elemetns面板的Styles面板中，你能夠對選擇的元素樣式進行修改，而後點擊文件名，進行保存操做

這個技巧不適用於使用了+選擇器和element.style樣式內容

6.爲選中的元素截圖

在Elements標籤中，選擇一個元素，按下cmd-shift-p（windows則爲ctrl-shift-p）組合鍵，搜索並選擇Capture node screenshot進行保存操做

7.使用CSS選擇器查找元素

在Elements面板中，按下cmd-f（windows則爲ctrl-p）組合鍵，顯示查詢框

你能夠輸入字符串去在整個頁面查找，或者輸入css選擇器去查找

8.Console的代碼換行

在Console面板中調試多行代碼時，使用shift-enter組合鍵進行換行，enter鍵將直接執行代碼

9.定位

在調試器面板中：

• cmd-o（windows則爲ctrl-o）組合鍵，會列出當前頁面加載的資源，選擇即定位該資源
• cmd-shift-o（windows則爲ctrl-shift-o）組合鍵，會列出當前選中文件的符號列表（屬性，方法，類等等）
• ctrl-g對當前選中文件代碼行進行定位

10.監聽表達式

把須要監聽的變量添加至監聽表達式列表中，避免在程序中反覆的console.log同一個變量進行debug

11.XRH/Fetch調試

找到並打開XHR/Fetch Breakpoints面板，添加須要攔截的請求url

12DOM調試

在Elements面板中，對選中的元素右鍵，啓用Break on -> subtree modifications，任何改變該元素子節點內容的js操做將會被攔截