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

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

創(chuàng)新互聯(lián)服務(wù)項目包括成縣網(wǎng)站建設(shè)、成縣網(wǎng)站制作、成縣網(wǎng)頁制作以及成縣網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，成縣網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到成縣省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

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#. 復(fù)制JavaScript變量

假如你的代碼經(jīng)過計算會輸出一個復(fù)雜的對象，且需要被復(fù)制下來發(fā)送給其他人，怎么辦？

• 使用copy函數(shù)，將對象作為入?yún)?zhí)行即可

以前我總是通過JSON.stringify(fetfishObj, null, 2)打印到控制臺，再手動復(fù)制粘貼，這效率實在是太低了...

4#. 控制臺獲取Elements面板選中的元素

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

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

• 控制臺直接用$0訪問

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

偶爾咱們也會有對網(wǎng)頁截屏的需求，一屏還好，系統(tǒng)自帶的截屏或者微信截圖等都可以辦到，但是要求將超出一屏的內(nèi)容也截下來咋辦呢？

• 準(zhǔn)備好需要截屏的內(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é)果，不用每次都復(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的白色主題，有的喜歡黑色，我們可以使用快捷鍵迅速切換兩個主題。

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

• 輸入Switch to dark theme或者Switch to light theme進行主題切換

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

在控制臺使用document.querySelector和document.querySelectorAll選擇當(dāng)前頁面的元素是最常見的需求了，不過著實有點太長了，咱們可以使用$和$$替代。

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？

以上就是關(guān)于“javascript可以提升效率的chrome技巧有哪些”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。