11+ chrome高級調(diào)試技巧，學(xué)會效率直接提升666%
作者：前端胖頭魚
簡介：會一點點前端，曾在阿里當小二，美團燒開水，現(xiàn)在熱衷可視化領(lǐng)域。
來源：SegmentFault 思否社區(qū)
前言
chrome瀏覽器作為前端童鞋的老婆，相信你一定不陌生。調(diào)頁面、寫B(tài)UG、畫樣式、看php片少了它整個世界都不香了。
1#. 一鍵重新發(fā)起請求
在與后端接口聯(lián)調(diào)或排查線上BUG時，你是不是也經(jīng)常聽到他們說這句話：你再發(fā)起一次請求試試，我這邊看下為啥出錯了！
選中Network
點擊Fetch/XHR
選擇要重新發(fā)送的請求
右鍵選擇Replay XHR
2#. 在控制臺快速發(fā)起請求
選中Network
點擊Fetch/XHR
選擇Copy as fetch
控制臺粘貼代碼
修改參數(shù)，回車搞定
3#. 復(fù)制JavaScript變量
使用copy函數(shù)，將對象作為入?yún)?zhí)行即可
4#. 控制臺獲取Elements面板選中的元素
通過Elements選擇要調(diào)試的元素
控制臺直接用$0訪問
5#. 截取一張全屏的網(wǎng)頁
準備好需要截屏的內(nèi)容
cmd + shift + p 執(zhí)行Command命令
輸入Capture full size screenshot 按下回車
6#. 一鍵展開所有DOM元素
調(diào)試元素時，在層級比較深的情況下，你是不是也經(jīng)常一個個展開去調(diào)試？有一種更加快捷的方式
按住opt鍵 + click（需要展開的最外層元素）
7#. 控制臺引用上一次執(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
// 第1步
'fatfish'.split('') // ['f', 'a', 't', 'f', 'i', 's', 'h']
// 第2步
$_.reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
// 第3步
$_.join('') // hsiftaf
8#. 快速切換主題
cmd + shift + p 執(zhí)行Command命令
輸入Switch to dark theme或者Switch to light theme進行主題切換
9.# "$"和"$$"選擇器
10#. $i直接在控制臺安裝npm包
安裝Console Importer插件
$i('name')安裝npm包
11#. Add conditional breakpoint條件斷點的妙用
const foods = [
{
name: '??',
price: 10
},
{
name: '??',
price: 15
},
{
name: '??',
price: 20
},
]
foods.forEach((v) => {
console.log(v.name, v.price)
})
最后
評論
圖片
表情