英文 | https://javascript.plainenglish.io/11-cool-chrome-devtools-tips-and-tricks-i-wish-i-knew-already-a9e2e078f78
Chrome浏覽器，作為前端開發者最親密的夥伴，相信你一定不陌生。我們可以用它來檢視網絡請求、分析網頁性能、調試最新的 JavaScript 功能……
除了這些，它還提供了很多強大但不常見的功能，可以大大提高我們的開發效率。
我們來看一下。
1.添加條件斷點
通過下面的代碼，我們希望食物的名字是🍫 當斷點被觸發時，我該怎麼做呢？
const foods = [
{
name: '🍔',
price: 10
},
{
name: '🍫',
price: 15
},
{
name: '🍵',
price: 20
},
]
foods.forEach((v) => {
// debugger
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('') // hsiftaf 你可能會做這樣的事情
// 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 在控制台中選擇目前頁面的元素是最常見的需求，但是有點太長了，我們可以使用 $ 和 $$ 來代替。
最後
感謝你的閱讀，如果你覺得有幫助的話，請記得點贊我，同時也期待你的關注。