Chrome 瀏覽器作為前端童鞋的老婆，相信你一定不陌生。調(diào)頁面、寫B(tài)UG、畫樣式、看php片少了它整個世界都不香了。
該文章轉(zhuǎn)自微信公眾號“奇舞精選”的原創(chuàng)文章《11 個 Chrome 高級調(diào)試技巧，學會效率直接提升 666%》
不信？一起來看看我們的老婆有多厲害….
1#. 一鍵重新發(fā)起請求
在與后端接口聯(lián)調(diào)或排查線上BUG時，你是不是也經(jīng)常聽到他們說這句話：你再發(fā)起一次請求試試，我這邊看下為啥出錯了！
重發(fā)請求，這有一種簡單到發(fā)指的方式。
選中 Network點擊 Fetch/XHR選擇要重新發(fā)送的請求 右鍵選擇 Replay XHR
不用刷新頁面，不用走頁面交互，是不是非常爽?。?！
2#. 在控制臺快速發(fā)起請求
還是聯(lián)調(diào)或修BUG的場景，針對同樣的請求，有時候需要修改入?yún)?/strong>重新發(fā)起，有啥快捷方式？
選中 Network點擊 Fetch/XHR選擇 Copy as fetch控制臺粘貼代碼 修改參數(shù)，回車搞定
曾經(jīng)我總是通過改代碼或者手寫fetch的方式處理，想想真是太傻了…
3#. 復制JavaScript變量
假如你的代碼經(jīng)過計算會輸出一個復雜的對象，且需要被復制下來發(fā)送給其他人，怎么辦？
使用 copy函數(shù)，將對象作為入?yún)?zhí)行即可
以前我總是通過JSON.stringify(fetfishObj, null, 2)打印到控制臺，再手動復制粘貼，這效率實在是太低了…
4#. 控制臺獲取Elements面板選中的元素
調(diào)試網(wǎng)頁時通過Elements面板選中元素后，如果想通過JS知道它的一些屬性，如寬、高、位置等怎么辦呢？
通過 Elements選擇要調(diào)試的元素控制臺直接用 $0訪問
5#. 截取一張全屏的網(wǎng)頁
偶爾咱們也會有對網(wǎng)頁截屏的需求，一屏還好，系統(tǒng)自帶的截屏或者微信截圖等都可以辦到，但是要求將超出一屏的內(nèi)容也截下來咋辦呢？
準備好需要截屏的內(nèi)容 cmd + shift + p執(zhí)行Command命令輸入 Capture full size screenshot按下回車
如果要截取選中的部分元素呢？
答案也很簡單，第三步輸入Capture node screenshot即可
6#. 一鍵展開所有DOM元素
調(diào)試元素時，在層級比較深的情況下，你是不是也經(jīng)常一個個展開去調(diào)試？有一種更加快捷的方式
按住 opt鍵 + click（需要展開的最外層元素）
7#. 控制臺引用上一次執(zhí)行的結(jié)果
來看看這個場景，我猜你也一定遇到過, 對某個字符串進行了各種工序，然后我們想知道每一步執(zhí)行的結(jié)果，該咋辦？。
'fatfish'.split('').reverse().join('')?//?hsiftaf
你可能會這樣做
//?第1步
'fatfish'.split('')?//?['f',?'a',?'t',?'f',?'i',?'s',?'h']
//?第2步
['f',?'a',?'t',?'f',?'i',?'s',?'h'].reverse()?//?['h',?'s',?'i',?'f',?'t',?'a',?'f']
//?第3步
['h',?'s',?'i',?'f',?'t',?'a',?'f'].join('')?//?hsiftaf
更簡單的方式
使用$_引用上一次操作的結(jié)果，不用每次都復制一遍
//?第1步
'fatfish'.split('')?//?['f',?'a',?'t',?'f',?'i',?'s',?'h']
//?第2步
$_.reverse()?//?['h',?'s',?'i',?'f',?'t',?'a',?'f']
//?第3步
$_.join('')?//?hsiftaf
8.# 快速切換主題
有的同學喜歡chrome的白色主題，有的喜歡黑色，我們可以使用快捷鍵迅速切換兩個主題。
cmd + shift + p執(zhí)行Command命令輸入 Switch to dark theme或者Switch to light theme進行主題切換
9.# “$“和”$$“選擇器
在控制臺使用document.querySelector和document.querySelectorAll選擇當前頁面的元素是最常見的需求了，不過著實有點太長了，咱們可以使用$和$$替代。
10.# $i直接在控制臺安裝npm包
你遇到過這個場景嗎？有時候想使用比如dayjs或者lodash的某個API，但是又不想去官網(wǎng)查，如果可以在控制臺直接試出來就好了。
Console Importer 就是這么一個插件，用來在控制臺直接安裝npm包。
安裝 Console Importer插件$i(‘name’)安裝npm包
11.# Add conditional breakpoint條件斷點的妙用
假設(shè)有下面這段代碼，咱們希望食物名字是🍫時才觸發(fā)斷點，可以怎么弄？
const?foods?=?[
??{
????name:?‘🍔’,
????price:?10
??},
??{
????name:?‘🍫’,
????price:?15
??},
??{
????name:?‘🍵’,
????price:?20
??},
]
foods.forEach((v)?=>?{
??console.log(v.name,?v.price)
})
這在大量數(shù)據(jù)下，只想對符合條件時打斷點條件將會非常方便。試想如果沒有條件斷點咱們是不是要點n次debugger？
