裝上這個(gè)Chrome插件，相當(dāng)巴適

• 后端不愿意造數(shù)據(jù)的時(shí)候，我用它
• 接口返回的數(shù)據(jù)不理想的時(shí)候，我用它
• 測試邊界值的時(shí)候，我用它
• 復(fù)現(xiàn) bug 的時(shí)候，我用它

鐺～鐺～鐺～， 鐺！它就是ajax-interceptor

https://link.juejin.cn/?target=https%3A%2F%2Fchrome.google.com%2Fwebstore%2Fdetail%2Fajax-interceptor%2Fnhpjggchkhnlbgdfcbgpdpkifemomkpg%3Fhl%3Dzh-CN

我是怎么發(fā)現(xiàn)它的？

剛開始寫前后端分離項(xiàng)目時(shí)，我碰到了一個(gè)脾氣不太好的后端搭檔，他總是不愿意配合造數(shù)據(jù)，于是我萌生了要寫一個(gè)響應(yīng)攔截器的想法，在查資料實(shí)現(xiàn)的過程中，發(fā)現(xiàn)了這個(gè)插件。到現(xiàn)在，我用這個(gè)插件有2-3年了，真是愛不釋手啊！

作用

你可以用該插件修改頁面上Ajax請求的返回結(jié)果。

用法

點(diǎn)擊上面的chrome商店地址就能直接安裝。

打開插件

界面介紹

本身的界面：

修改后的界面：

使用方法看視頻教程：

https://chrome.google.com/webstore/detail/ajax-interceptor/nhpjggchkhnlbgdfcbgpdpkifemomkpg?hl=zh-CN

注意事項(xiàng)

• 建議第一次安裝完重啟瀏覽器，或者刷新你需要使用的頁面。
• 當(dāng)你不需要使用該插件時(shí)，建議把開關(guān)關(guān)上（插件icon變?yōu)榛疑悦鈱撁嬲g覽造成影響。
• 該插件只會在JS層面上對返回結(jié)果進(jìn)行修改，即只會修改全局的XMLHTTPRequest對象和fetch方法里的返回值，進(jìn)而影響頁面展現(xiàn)。而你在chrome的devtools的network里看到的請求返回結(jié)果不會有任何變化

如何修改插件添加標(biāo)簽功能

作為資深用戶，我覺得唯一不好的一點(diǎn)就是，當(dāng)攔截的請求過多的時(shí)候，界面上不能很容易的區(qū)分出每個(gè)請求，必須要點(diǎn)到url里面查看才能知道，急需要一個(gè)備注或者標(biāo)簽的功能，所以我找到源碼 )，自己加了一個(gè)。

在iframe目錄下的main.js中，找到界面：

別忘了修改處理函數(shù)和刪除函數(shù)喲，修改之后重新構(gòu)建添加到chrome 插件中就行啦。最后界面就是上面這個(gè)樣子：

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

tips

要感謝當(dāng)年那位同事，我為了自己方便也造了些輪子學(xué)到些東西(搞懂了nginx配置解決頁面刷新404，寫nodeServer做請求轉(zhuǎn)發(fā)解決跨域等)。了解了插件能做的事情之后，我自己也寫了一些簡單的小插件：

比如隱藏指定頁面?zhèn)冗厵诤蚳eader

因?yàn)槲也幌矚g看廣告，還有不想被經(jīng)過的人發(fā)現(xiàn)我在做什么，所以我寫了這個(gè)：

給另一半的生日驚喜

給他安裝一個(gè)插件，在他生日當(dāng)天打開瀏覽器的第一時(shí)間，彈出這樣的畫面：

想想，還是挺浪漫的吧！

▽加我微信,交個(gè)朋友
長按/掃碼添加↑↑↑