這篇“javascript可以提升效率的chrome技巧有哪些”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“javascript可以提升效率的chrome技巧有哪些”文章吧。
創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括成縣網(wǎng)站建設(shè)、成縣網(wǎng)站制作、成縣網(wǎng)頁(yè)制作以及成縣網(wǎng)絡(luò)營(yíng)銷(xiāo)策劃等。多年來(lái)，我們專(zhuān)注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，成縣網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到成縣省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
在與后端接口聯(lián)調(diào)或排查線上BUG時(shí)，你是不是也經(jīng)常聽(tīng)到他們說(shuō)這句話：你再發(fā)起一次請(qǐng)求試試，我這邊看下為啥出錯(cuò)了！
重發(fā)請(qǐng)求，這有一種簡(jiǎn)單到發(fā)指的方式。
選中Network
點(diǎn)擊Fetch/XHR
選擇要重新發(fā)送的請(qǐng)求
右鍵選擇Replay XHR
不用刷新頁(yè)面，不用走頁(yè)面交互，是不是非常爽?。。?/p>
還是聯(lián)調(diào)或修BUG的場(chǎng)景，針對(duì)同樣的請(qǐng)求，有時(shí)候需要修改入?yún)?/strong>重新發(fā)起，有啥快捷方式？
選中Network
點(diǎn)擊Fetch/XHR
選擇Copy as fetch
控制臺(tái)粘貼代碼
修改參數(shù)，回車(chē)搞定
曾經(jīng)我總是通過(guò)改代碼或者手寫(xiě)fetch的方式處理，想想真是太傻了...
假如你的代碼經(jīng)過(guò)計(jì)算會(huì)輸出一個(gè)復(fù)雜的對(duì)象，且需要被復(fù)制下來(lái)發(fā)送給其他人，怎么辦？
使用copy函數(shù)，將對(duì)象作為入?yún)?zhí)行即可
以前我總是通過(guò)JSON.stringify(fetfishObj, null, 2)打印到控制臺(tái)，再手動(dòng)復(fù)制粘貼，這效率實(shí)在是太低了...
調(diào)試網(wǎng)頁(yè)時(shí)通過(guò)Elements面板選中元素后，如果想通過(guò)JS知道它的一些屬性，如寬、高、位置等怎么辦呢？
通過(guò)Elements選擇要調(diào)試的元素
控制臺(tái)直接用$0訪問(wèn)
偶爾咱們也會(huì)有對(duì)網(wǎng)頁(yè)截屏的需求，一屏還好，系統(tǒng)自帶的截屏或者微信截圖等都可以辦到，但是要求將超出一屏的內(nèi)容也截下來(lái)咋辦呢？
準(zhǔn)備好需要截屏的內(nèi)容
cmd + shift + p 執(zhí)行Command命令
輸入Capture full size screenshot 按下回車(chē)
如果要截取選中的部分元素呢？
答案也很簡(jiǎn)單，第三步輸入Capture node screenshot即可
調(diào)試元素時(shí)，在層級(jí)比較深的情況下，你是不是也經(jīng)常一個(gè)個(gè)展開(kāi)去調(diào)試？有一種更加快捷的方式
按住opt鍵 + click（需要展開(kāi)的最外層元素）
來(lái)看看這個(gè)場(chǎng)景，我猜你也一定遇到過(guò), 對(duì)某個(gè)字符串進(jìn)行了各種工序，然后我們想知道每一步執(zhí)行的結(jié)果，該咋辦？。
重慶分公司
重慶分公司
'fatfish'.split('').reverse().join('') // hsiftaf你可能會(huì)這樣做
// 第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ǎn)單的方式
使用$_引用上一次操作的結(jié)果，不用每次都復(fù)制一遍
// 第1步
'fatfish'.split('') // ['f', 'a', 't', 'f', 'i', 's', 'h']
// 第2步
$_.reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
// 第3步
$_.join('') // hsiftaf
有的同學(xué)喜歡chrome的白色主題，有的喜歡黑色，我們可以使用快捷鍵迅速切換兩個(gè)主題。
cmd + shift + p 執(zhí)行Command命令
輸入Switch to dark theme或者Switch to light theme進(jìn)行主題切換
$"和"$$"選擇器在控制臺(tái)使用document.querySelector和document.querySelectorAll選擇當(dāng)前頁(yè)面的元素是最常見(jiàn)的需求了，不過(guò)著實(shí)有點(diǎn)太長(zhǎng)了，咱們可以使用$和$$替代。
$i直接在控制臺(tái)安裝npm包你遇到過(guò)這個(gè)場(chǎng)景嗎？有時(shí)候想使用比如dayjs或者lodash的某個(gè)API，但是又不想去官網(wǎng)查，如果可以在控制臺(tái)直接試出來(lái)就好了。
Console Importer 就是這么一個(gè)插件，用來(lái)在控制臺(tái)直接安裝npm包。
安裝Console Importer插件
$i('name')安裝npm包
假設(shè)有下面這段代碼，咱們希望食物名字是?時(shí)才觸發(fā)斷點(diǎn)，可以怎么弄？
const foods = [
{
name: '?',
price: 10
},
{
name: '?',
price: 15
},
{
name: '?',
price: 20
},
]
foods.forEach((v) => {
console.log(v.name, v.price)
})這在大量數(shù)據(jù)下，只想對(duì)符合條件時(shí)打斷點(diǎn)條件將會(huì)非常方便。試想如果沒(méi)有條件斷點(diǎn)咱們是不是要點(diǎn)n次debugger？
以上就是關(guān)于“javascript可以提升效率的chrome技巧有哪些”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
