chrome瀏覽器身為前端童鞋的老婆，相信你一定不陌生。调页面、写BUG 、画样式、看php片少了它整個世界都不香了。
不相信？一起來看看我們的老婆有多厲害....
在與後端接口聯調或排查線上BUG時，你是不是也常聽到他們說這句話：你再發起一次請求試試，我這邊看下為啥出錯了！
重發請求，這有一種簡單到髮指的方式。
選取Network
點擊Fetch/XHR
選擇要重新傳送的請求
右鍵選擇Replay XHR
不用刷新頁面，不用走頁面交互，是不是非常爽！ ！ ！
還是聯調或修BUG的場景，針對同樣的請求，有時候需要修改入參重新發起，有啥快捷方式？
選取Network
點選Fetch/XHR
選擇Copy as fetch
控制台貼上程式碼
修改參數，回車搞定
曾經我總是透過改程式碼或手寫fetch的方式處理，想想真是太傻了...
假如你的程式碼經過計算會輸出一個複雜的對象，且需要被複製下來發送給其他人，怎麼辦？
使用copy函數，將对象作為入參執行即可
以前我總是透過JSON.stringify(fetfishObj, null, 2)列印到控制台，再手動複製貼上，這效率實在是太低了...
偵錯網頁時透過Elements面板選取元素後，如果想透過JS知道它的一些屬性，如宽、高、位置等怎麼辦呢？
透過Elements選擇要調試的元素
控制台直接用$0訪問
偶爾咱們也會有對網頁截圖的需求，一屏還好，系統自帶的截圖或者微信截圖等都可以辦到，但是要求將超出一屏的內容也截下來咋辦呢？
準備好需要截圖的內容
cmd + shift + p執行Command指令
輸入Capture full size screenshot按下回車
如果要截取選取的部分元素呢？
答案也很簡單，第三步輸入Capture node screenshot即可
調試元素時，在層級比較深的情況下，你是不是也常常一個個展開去調試？有一種更快捷的方式
按住opt鍵+ click（需要展開的最外層元素）
來看看這個場景，我猜你也一定遇到過, 對某個字符串進行了各種工序，然後我們想知道每一步執行的結果，該咋辦？ 。
'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 
更簡單的方式
使用$_引用上一次操作的結果，不用每次都複製一遍
// 第1步'fatfish'.split('') // ['f', 'a', 't', ' f', 'i', 's', 'h']
// 步驟2$_.reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
// 步驟3$_.join('') // hsiftaf
有的同學喜歡chrome的白色主題，有的喜歡黑色，我們可以使用快捷鍵迅速切換兩個主題。
cmd + shift + p執行Command指令
輸入Switch to dark theme或Switch to light theme進行主題切換
$ "和" $$ "選擇器在控制台使用document.querySelector和document.querySelectorAll選擇當前頁面的元素是最常見的需求了，不過著實有點太長了，咱們可以使用$和$$替代。
$i直接在控制台安裝npm套件你遇到過這個場景嗎？有時候想使用例如dayjs或lodash的某個API ，但又不想去官網查，如果可以在控制台直接試出來就好了。
Console Importer 就是這麼一個插件，用來在控制台直接安裝npm套件。
安裝Console Importer外掛
$i('name')安裝npm包
假設有下面這段程式碼，咱們希望食物名字是?時才觸發斷點，可以怎麼弄？
const foods = [
{
name: '?',
price: 10
},
{
name: '?',
price: 15
},
{
name: '?',
price: 20
},
]
foods.forEach((v) => {
console.log(v.name, v.price)
})這在大量資料下，只想在符合條件時打斷點條件將會非常方便。試想如果沒有條件斷點咱們是不是要點n次debugger？
（學習影片分享：web前端開發、程式設計基礎影片）
以上就是11個可以提升效率的chrome調試技巧的詳細內容，更多請關注php中文網其它相關文章！