前端好幫手,請務必裝上這個 Chrome 外掛

語言: CN / TW / HK

回覆 交流 ,加入前端程式設計面試演算法每日一題群

面試官也在看的前端面試資料

chrome 瀏覽器上有很多外掛,我最喜歡的只有這一個,因為它解決了我工作中的很多麻煩。相信我,裝上它,你的工作會容易很多。

  • 後端不願意造資料的時候,我用它

  • 介面返回的資料不理想的時候,我用它

  • 測試邊界值的時候,我用它

  • 復現 bug 的時候,我用它

鐺~鐺~鐺~, 鐺!它就是 ajax-interceptor [1]

  1. 我是怎麼發現它的?

剛開始寫前後端分離專案時,我碰到了一個脾氣不太好的後端搭檔,他總是不願意配合造資料,於是我萌生了要寫一個響應攔截器的想法,在查資料實現的過程中,發現了這個外掛。到現在,我用這個外掛有2-3年了,真是愛不釋手啊!

  1. 作用

你可以用該外掛修改頁面上Ajax請求的返回結果。

用法

  1. 點選上面的chrome商店地址就能直接安裝。

  2. 開啟外掛

按鈕.png
  1. 介面介紹

修改後的介面:

操作介面.png
  1. 使用方法看影片教程:

注意事項

  1. 建議第一次安裝完重啟瀏覽器,或者重新整理你需要使用的頁面。

  2. 當你不需要使用該外掛時,建議把開關關上(外掛icon變為灰色),以免對頁面正常瀏覽造成影響。

  3. 該外掛只會在JS層面上對返回結果進行修改,即只會修改全域性的XMLHTTPRequest物件和fetch方法裡的返回值,進而影響頁面展現。而你在chrome的devtools的network裡看到的請求返回結果不會有任何變化

如何修改外掛新增標籤功能

作為資深使用者,我覺得唯一不好的一點就是,當攔截的請求過多的時候,介面上不能很容易的區分出每個請求,必須要點到url裡面檢視才能知道,急需要一個備註或者標籤的功能,所以我找到 原始碼 [2] ),自己加了一個。在iframe目錄下的main.js中,找到介面:

別忘了修改處理函式和刪除函式喲,修改之後重新構建新增到chrome 外掛中就行啦。最後介面就是上面這個樣子:

這樣是不是直觀一些?哈哈。

tips

要感謝當年那位同事,我為了自己方便也造了些輪子學到些東西(搞懂了nginx配置解決頁面重新整理404,寫nodeServer做請求轉發解決跨域等)。

瞭解了外掛能做的事情之後,我自己也寫了一些簡單的小外掛:

  • 比如隱藏指定頁面側邊欄和header 因為我不喜歡看廣告,還有不想被經過的人發現我在做什麼,所以我寫了這個:

  • 給另一半的生日驚喜 給他安裝一個外掛,在他生日當天開啟瀏覽器的第一時間,彈出這樣的畫面:

想想,還是挺浪漫的吧!

chrome extensions 幫助我更好的工作和生活,最重要的是學到了一些解決問題的新思路。檢視官方文件 chrome extensions 官方文件 [3] 開啟你的外掛開發之旅吧。

幫助他人就是幫助自己,好東西當然要分享給大家。如果大家有有趣的點子也希望分享給我,一起做有趣的事啊!希望文章能對你有所幫助。關注我,定能有一點點收穫!

關於本文

作者:程式媛最可愛

https://juejin.cn/po st/7049211255181017102

最後

歡迎關注「 三分鐘學前端 」,回覆「 交流 」自動加入前端三分鐘進階群,每日一道程式設計演算法面試題(含解答),助力你成為更優秀的前端開發!

號內回覆:

網路 」,自動獲取三分鐘學前端網路篇小書(90+頁)

JS 」,自動獲取三分鐘學前端 JS 篇小書(120+頁)

演算法 」,自動獲取 github 2.9k+ 的前端演算法小書

面試 」,自動獲取 github 23.2k+ 的前端面試小書

簡歷 」,自動獲取程式設計師系列的  120 套模版

》》面試官也在看的前端面試資料《《

“在看和轉發” 就是最大的