前端好幫手,請務(wù)必裝上這個 Chrome 插件
?chrome 瀏覽器上有很多插件，我最喜歡的只有這一個，因?yàn)樗鉀Q了我工作中的很多麻煩。相信我，裝上它，你的工作會容易很多。
- 后端不愿意造數(shù)據(jù)的時候，我用它
- 接口返回的數(shù)據(jù)不理想的時候，我用它
- 測試邊界值的時候，我用它
- 復(fù)現(xiàn) bug 的時候，我用它
鐺～鐺～鐺～， 鐺！它就是ajax-interceptor[1]
- 我是怎么發(fā)現(xiàn)它的？
剛開始寫前后端分離項(xiàng)目時，我碰到了一個脾氣不太好的后端搭檔，他總是不愿意配合造數(shù)據(jù)，于是我萌生了要寫一個響應(yīng)攔截器的想法，在查資料實(shí)現(xiàn)的過程中，發(fā)現(xiàn)了這個插件。到現(xiàn)在，我用這個插件有2-3年了，真是愛不釋手??！
- 作用
你可以用該插件修改頁面上Ajax請求的返回結(jié)果。
用法
點(diǎn)擊上面的chrome商店地址就能直接安裝。
打開插件
按鈕.png- 界面介紹
本身的界面：
修改后的界面：
操作界面.png- 使用方法看視頻教程：
這里以修改文章列表中第一篇文章的title為例
注
- 建議第一次安裝完重啟瀏覽器，或者刷新你需要使用的頁面。
- 當(dāng)你不需要使用該插件時，建議把開關(guān)關(guān)上（插件icon變?yōu)榛疑?，以免對頁面正常瀏覽造成影響。
- 該插件只會在JS層面上對返回結(jié)果進(jìn)行修改，即只會修改全局的XMLHTTPRequest對象和fetch方法里的返回值，進(jìn)而影響頁面展現(xiàn)。而你在chrome的devtools的network里看到的請求返回結(jié)果不會有任何變化
如何修改插件添加標(biāo)簽功能
作為資深用戶，我覺得唯一不好的一點(diǎn)就是，當(dāng)攔截的請求過多的時候，界面上不能很容易的區(qū)分出每個請求，必須要點(diǎn)到url里面查看才能知道，急需要一個備注或者標(biāo)簽的功能，所以我找到源碼[2] )，自己加了一個。在iframe目錄下的main.js中，找到界面：
別忘了修改處理函數(shù)和刪除函數(shù)喲，修改之后重新構(gòu)建添加到chrome 插件中就行啦。最后界面就是上面這個樣子：
這樣是不是直觀一些？哈哈。
tips
要感謝當(dāng)年那位同事，我為了自己方便也造了些輪子學(xué)到些東西(搞懂了nginx配置解決頁面刷新404，寫nodeServer做請求轉(zhuǎn)發(fā)解決跨域等)。
了解了插件能做的事情之后，我自己也寫了一些簡單的小插件：
- 比如隱藏指定頁面?zhèn)冗厵诤蚳eader 因?yàn)槲也幌矚g看廣告，還有不想被經(jīng)過的人發(fā)現(xiàn)我在做什么，所以我寫了這個：
- 給另一半的生日驚喜 給他安裝一個插件，在他生日當(dāng)天打開瀏覽器的第一時間，彈出這樣的畫面：
想想，還是挺浪漫的吧！
chrome extensions 幫助我更好的工作和生活，最重要的是學(xué)到了一些解決問題的新思路。查看官方文檔chrome extensions 官方文檔[3]開啟你的插件開發(fā)之旅吧。
幫助他人就是幫助自己，好東西當(dāng)然要分享給大家。如果大家有有趣的點(diǎn)子也希望分享給我，一起做有趣的事?。∠Ｍ恼履軐δ阌兴鶐椭?。關(guān)注我，定能有一點(diǎn)點(diǎn)收獲！
奇妙的知識
嵌入的 iframe 又不能訪問了？還有這些你不知道的事[4]
package-lock.json 需要提交到 git ？[5]
關(guān)于本文
?https://juejin.cn/post/7049211255181017102
“在看和轉(zhuǎn)發(fā)”就是最大的支持?