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

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

1#. 一鍵重新發起請求

在與后端接口聯調或排查線上BUG時，你是不是也經常聽到他們說這句話：你再發起一次請求試試，我這邊看下為啥出錯了！

重發請求，這有一種簡單到發指的方式。

• 選中Network

• 點擊Fetch/XHR

• 選擇要重新發送的請求

• 右鍵選擇Replay XHR

不用刷新頁面，不用走頁面交互，是不是非常爽！！！

2#. 在控制臺快速發起請求

還是聯調或修BUG的場景，針對同樣的請求，有時候需要修改入參重新發起，有啥快捷方式？

• 選中Network

• 點擊Fetch/XHR

• 選擇Copy as fetch

• 控制臺粘貼代碼

• 修改參數，回車搞定

曾經我總是通過改代碼或者手寫fetch的方式處理，想想真是太傻了...

3#. 復制JavaScript變量

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

• 使用copy函數，將對象作為入參執行即可

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

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

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

• 通過Elements選擇要調試的元素

• 控制臺直接用$0訪問

5#. 截取一張全屏的網頁

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

• 準備好需要截屏的內容

• cmd + shift + p 執行Command命令

• 輸入Capture full size screenshot 按下回車

如果要截取選中的部分元素呢？

答案也很簡單，第三步輸入Capture node screenshot即可

6#. 一鍵展開所有DOM元素

調試元素時，在層級比較深的情況下，你是不是也經常一個個展開去調試？有一種更加快捷的方式

• 按住opt鍵 + click（需要展開的最外層元素）

7#. 控制臺引用上一次執行的結果

來看看這個場景，我猜你也一定遇到過, 對某個字符串進行了各種工序，然后我們想知道每一步執行的結果，該咋辦？。

'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.# 快速切換主題

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

• cmd + shift + p 執行Command命令

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

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

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

10.# $i直接在控制臺安裝npm包

你遇到過這個場景嗎？有時候想使用比如dayjs或者lodash的某個API，但是又不想去官網查，如果可以在控制臺直接試出來就好了。

Console Importer 就是這么一個插件，用來在控制臺直接安裝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)
})

這在大量數據下，只想對符合條件時打斷點條件將會非常方便。試想如果沒有條件斷點咱們是不是要點n次debugger？

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

新聞名稱：javascript可以提升效率的chrome技巧有哪些
新聞來源：http://www.yijiale78.com/article6/jcesog.html

成都網站建設公司_創新互聯，為您提供網站收錄、自適應網站、云服務器、建站公司、微信小程序、靜態網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯