原文鏈接：[幾個非常實用的 Chrome Devtools 技巧](https://fe32.top/articles/skill001/
關於 Chrome 瀏覽器，如果你是一名前端開發者，相信對此並不陌生，我們可以用它來查看 網絡請求、分析網頁性能、調試 JavaScript 功能 等。
除了這些，它還提供了很多強大但不常見的功能，可以大大提高我們的開發效率，這裏分享幾個實用的技巧（持續更新）。
正文
控制枱導入器
有時候想用某些庫的 API，但又懶得去官網查，可以直接在控制枱嘗試。
要先安裝 Console Importer，否則會報如下錯誤：
安裝插件後，重啓瀏覽器即可體驗效果。
添加條件斷點
通過下面的代碼，希望當食物的名字是 雞太美 時 觸發斷點，該如何實現呢？
const persons = [
{
name: '蔡徐坤',
age: 25
},
{
name: '菜虛鯤',
age: 23
},
{
name: '雞太美',
age: 24
},
]
persons.forEach((v) => {
// debugger
console.log(v.name, v.age)
})在數據量很大的情況下，使用 條件斷點 對開發工作很有幫助，大大提高效率。
使用 “$” 引用上次執行的結果
類似下面的場景，如果你對字符串進行了各種操作後，又想知道每一步的結果，該怎麼做呢？
'ikun1997'.split('').reverse().join('') // 7991nuki你可能會這樣做:
// step 1
'ikun1997'.split('') // ['i', 'k', 'u', 'n', '1', '9', '9', '7']
// step 2
['i', 'k', 'u', 'n', '1', '9', '9', '7'].reverse() // ['7', '9', '9', '1', 'n', 'u', 'k', 'i']
// step 3
['7', '9', '9', '1', 'n', 'u', 'k', 'i'].join('') // 7991nuki
使用 “$” 獲取上一次操作的結果，無需每次都複製。
// step 1
'ikun1997'.split('') // ['i', 'k', 'u', 'n', '1', '9', '9', '7']
// step 2
$_.reverse() // ['7', '9', '9', '1', 'n', 'u', 'k', 'i']
// step 3
$_.join('') // 7991nuki
展開所有子節點
如何一次展開 DOM 元素的所有子節點，聰明的你會一個個的展開嗎？
當然使用 Alt + 單擊 一次展開所有子節點啦 ~
在 gif 中 顯而易見，點擊一次只展開了一個子節點，Alt + 單擊 則展開所有子節點。
使用 “$” 和 “$$” 快速選擇 DOM 元素
使用 document.querySelector 和 document.querySelectorAll 在控制枱中選擇當前頁面的元素是最常見的需求，單詞太長，我們可以使用 $** 和 **$$ 來代替。
在控制枱中獲取選中的 DOM 元素
當你通過 Elements 面板 選擇一個元素時，如果想用 JavaScript 打印它的一些屬性，比如寬度、高度、位置等，可以使用 $0 訪問控制枱中的元素。
在控制枱重新發送請求
對於同一個請求，有時需要重新發送，這時可以這樣做:
1.選擇 Network 面板 中的 Fetch/XHR
2.選中要重新發送的請求，Replay XHR
在控制枱發送修改參數後的請求
對於同一個請求，有時需要 修改某些參數 並重新發送，這時可以這樣做:
1.選擇 Network 面板 中的 Fetch/XHR
2.選中要重新發送的請求，Copy as fetch
3.修改參數併發送
捕獲屏幕截圖
1.打開控制枱，執行 Ctrl + Shift + P / Command+Shift +P
2.輸入指令 capture，會有三個選項
這裏有常用幾種截取方式：Capture full size screenshot（截取全屏） 、Capture area screenshot（截取自選區域）、Capture node screenshot(截取選中節點) 、Capture screenshot(截取當前範圍) 。
這裏只展示部分截取效果：
Capture full size screenshot :
Capture node screenshot :
結語
這是一篇將持續收集的 Chrome Devtools 的帖子，如果你有不錯的點子，歡迎在評論區分享喔🌹！
