前端請裝上這個 Chrome 插件
作者：程序媛最可愛?
原文：https://juejin.cn/post/7049211255181017102
Chrome 瀏覽器上有很多插件，我最喜歡的只有這一個，因為它解決了我工作中的很多麻煩。相信我，裝上它，你的工作會容易很多。
后端不愿意造數(shù)據(jù)的時候，我用它 接口返回的數(shù)據(jù)不理想的時候，我用它 測試邊界值的時候，我用它 復(fù)現(xiàn) bug 的時候，我用它
鐺～鐺～鐺～， 鐺！它就是ajax-interceptor[1]
我是怎么發(fā)現(xiàn)它的？
剛開始寫前后端分離項目時，我碰到了一個脾氣不太好的后端搭檔，他總是不愿意配合造數(shù)據(jù)，于是我萌生了要寫一個響應(yīng)攔截器的想法，在查資料實現(xiàn)的過程中，發(fā)現(xiàn)了這個插件。到現(xiàn)在，我用這個插件有2-3年了，真是愛不釋手啊！
作用
你可以用該插件修改頁面上Ajax請求的返回結(jié)果。
用法
點擊上面的chrome商店地址就能直接安裝。 打開插件
界面介紹 本身的界面：
修改后的界面：
使用方法看視頻教程： 這里以修改文章列表中第一篇文章的title為例
注意事項
建議第一次安裝完重啟瀏覽器，或者刷新你需要使用的頁面。 當你不需要使用該插件時，建議把開關(guān)關(guān)上（插件icon變?yōu)榛疑?，以免對頁面正常瀏覽造成影響。 該插件只會在JS層面上對返回結(jié)果進行修改，即只會修改全局的XMLHTTPRequest對象和fetch方法里的返回值，進而影響頁面展現(xiàn)。而你在chrome的devtools的network里看到的請求返回結(jié)果不會有任何變化
如何修改插件添加標簽功能
作為資深用戶，我覺得唯一不好的一點就是，當攔截的請求過多的時候，界面上不能很容易的區(qū)分出每個請求，必須要點到url里面查看才能知道，急需要一個備注或者標簽的功能，所以我找到源碼[2]?，自己加了一個。在iframe目錄下的main.js中，找到界面：
別忘了修改處理函數(shù)和刪除函數(shù)喲，修改之后重新構(gòu)建添加到chrome 插件中就行啦。最后界面就是上面這個樣子：
這樣是不是直觀一些？哈哈。
tips
要感謝當年那位同事，我為了自己方便也造了些輪子學到些東西(搞懂了nginx配置解決頁面刷新404，寫nodeServer做請求轉(zhuǎn)發(fā)解決跨域等)。
了解了插件能做的事情之后，我自己也寫了一些簡單的小插件：
比如隱藏指定頁面?zhèn)冗厵诤蚳eader 因為我不喜歡看廣告，還有不想被經(jīng)過的人發(fā)現(xiàn)我在做什么，所以我寫了這個：
給另一半的生日驚喜 給他安裝一個插件，在他生日當天打開瀏覽器的第一時間，彈出這樣的畫面：
想想，還是挺浪漫的吧！
chrome extensions 幫助我更好的工作和生活，最重要的是學到了一些解決問題的新思路。查看官方文檔chrome extensions 官方文檔[3]開啟你的插件開發(fā)之旅吧。
參考資料
ajax-interceptor:https://chrome.google.com/webstore/detail/ajax-interceptor/nhpjggchkhnlbgdfcbgpdpkifemomkpg?hl=zh-CN
[2]源碼:https://github.com/YGYOOO/ajax-interceptor/blob/master/README-zh.md
[3]chrome extensions 官方文檔:https://developer.chrome.com/docs/extensions/whatsnew/
最后
如果你覺得這篇內(nèi)容對你挺有啟發(fā)，我想邀請你幫我三個小忙：
點個「在看」，讓更多的人也能看到這篇內(nèi)容（喜歡不點在看，都是耍流氓 -_-）
歡迎加我微信「qianyu443033099」拉你進技術(shù)群，長期交流學習...
關(guān)注公眾號「前端下午茶」，持續(xù)為你推送精選好文，也可以加我為好友，隨時聊騷。
