javascript可以提升效率的chrome技巧有哪些

這篇“javascript可以提升效率的chrome技巧有哪些”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“javascript可以提升效率的chrome技巧有哪些”文章吧。

1#. 一鍵重新發(fā)起請(qǐng)求

在與后端接口聯(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è)面交互，是不是非常爽?。?！

2#. 在控制臺(tái)快速發(fā)起請(qǐng)求

還是聯(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的方式處理，想想真是太傻了...

3#. 復(fù)制JavaScript變量

假如你的代碼經(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í)在是太低了...

4#. 控制臺(tái)獲取Elements面板選中的元素

調(diào)試網(wǎng)頁(yè)時(shí)通過(guò)Elements面板選中元素后，如果想通過(guò)JS知道它的一些屬性，如寬、高、位置等怎么辦呢？

• 通過(guò)Elements選擇要調(diào)試的元素

• 控制臺(tái)直接用$0訪問(wèn)

5#. 截取一張全屏的網(wǎng)頁(yè)

偶爾咱們也會(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即可

6#. 一鍵展開(kāi)所有DOM元素

調(diào)試元素時(shí)，在層級(jí)比較深的情況下，你是不是也經(jīng)常一個(gè)個(gè)展開(kāi)去調(diào)試？有一種更加快捷的方式

• 按住opt鍵 + click（需要展開(kāi)的最外層元素）

7#. 控制臺(tái)引用上一次執(zhí)行的結(jié)果

來(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

8.# 快速切換主題

有的同學(xué)喜歡chrome的白色主題，有的喜歡黑色，我們可以使用快捷鍵迅速切換兩個(gè)主題。

• cmd + shift + p 執(zhí)行Command命令

• 輸入Switch to dark theme或者Switch to light theme進(jìn)行主題切換

9.# "$"和"$$"選擇器

在控制臺(tái)使用document.querySelector和document.querySelectorAll選擇當(dāng)前頁(yè)面的元素是最常見(jiàn)的需求了，不過(guò)著實(shí)有點(diǎn)太長(zhǎng)了，咱們可以使用$和$$替代。

10.# $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包

11.# Add conditional breakpoint條件斷點(diǎn)的妙用

假設(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)注億速云行業(yè)資訊頻道。