11 個很酷的 Chrome Devtools 技巧
Chrome瀏覽器，作為前端開發者最親密的伙伴，相信你一定不陌生。我們可以用它來查看網絡請求、分析網頁性能、調試最新的 JavaScript 功能……
除了這些，它還提供了很多強大但不常見的功能，可以大大提高我們的開發效率。
我們來看一下。
1.添加條件斷點
通過下面的代碼，我們希望食物的名字是?? 當斷點被觸發時，我該怎么做呢？
const foods = [
{
name: '??',
price: 10
},
{
name: '??',
price: 15
},
{
name: '??',
price: 20
},
]
foods.forEach((v) => {
console.log(v.name, v.price)
})
在數據量很大的情況下，使用條件斷點對開發工作很有幫助，大大提高效率。
2.在控制臺使用`$I`安裝npm包
有時候想用day.js或者lodash之類的API，又不想去官網查。如果你可以直接在控制臺上嘗試它會很好。
- 安裝控制臺導入器插件
- $i('name') 安裝 npm 包
3. 重新發送 XHR 請求
我們在工作中經常需要和后端開發人員一起調試接口。使用這個功能可以提高我們的對接效率。
只需要執行以下步驟：
- 選擇Network面板
- 點擊Fetch/XHR
- 選擇你要重新發送的請求
- 右鍵單擊并選擇重播XHR
4.快速切換主題顏色
有人喜歡chrome的白色主題，也有人喜歡黑色，我們可以通過快捷鍵在兩個主題之間快速切換。
- cmd + shift + p 執行命令命令
- 輸入“切換到深色主題”或“切換到淺色主題”來切換主題
5.在控制臺快速發送請求
對于同一個請求，有時需要修改輸入參數并重新發送，什么是捷徑？
只需要執行以下步驟：
- 選擇Network面板。
- 單擊Fetch/XHR。
- 選擇要重新發送的請求。
- 選擇 Copy as fetch 面板。
- 修改輸入參數并重新發送。
6. 復制 JavaScript 變量
我們如何將復雜的數據復制到剪貼板？
太奇妙了，您可以使用 Chrome 瀏覽器提供的復制功能來完成。
7. 在控制臺中獲取選中的 DOM 元素
當我們通過“元素”面板選擇一個元素時，如果我們想通過 JavaScript 打印它的一些屬性，比如寬度、高度、位置等，我們應該怎么做？
通過 Elements 面板選擇 DOM 元素。
使用 $0 訪問控制臺中的元素。
8.捕獲全尺寸屏幕截圖
如果我們要對一個多屏的頁面進行截圖，有什么好的辦法嗎？
功能強大的 Chrome 瀏覽器可以輕松做到這一點。
- 準備你要捕獲的頁面的內容
- CMD + Shift + P 執行命令
- Enter 捕獲全尺寸屏幕截圖并按 Enter
哇，這太酷了！！！
現在，有一個新問題，如果我們只想截取部分截圖頁面，我們應該做什么？
也很簡單，在第三步輸入“捕獲節點截圖”即可。
9.展開所有子節點
如何一次展開 DOM 元素的所有子節點？不是一個一個嗎？
你可以使用“元素”面板中的組合鍵“Alt + 單擊”一次展開所有子節點。
10.使用“$”引用上次執行的結果
我們看一下這個場景，我們對字符串進行了各種操作，然后我們想知道每一步的結果，我們應該怎么做呢？
'fatfish'.split('').reverse().join('')
你可能會做這樣的事情
// step 1
'fatfish'.split('') // ['f', 'a', 't', 'f', 'i', 's', 'h']
// step 2
['f', 'a', 't', 'f', 'i', 's', 'h'].reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
// step 3
['h', 's', 'i', 'f', 't', 'a', 'f'].join('') // hsiftaf
更簡單的方法
使用“$”獲取上一次操作的結果，無需每次都復制。
// step 1
'fatfish'.split('') // ['f', 'a', 't', 'f', 'i', 's', 'h']
// step 2
$_.reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
// step 3
$_.join('') // hsiftaf
11.使用“$”和“$$”快速選擇DOM元素
使用 document.querySelector 和 document.querySelectorAll 在控制臺中選擇當前頁面的元素是最常見的需求，但是有點太長了，我們可以使用 $ 和 $$ 來代替。
