[小Tip]ABP扩展对前端开发的影响

2028次阅读  |  发布于5年以前

ABP全称是Adblock Plus,是一个基于预设规则过滤Web广告的浏览器扩展,支持 Firefox(Adblock Plus版)、Chrome(Adblock Plus版 | Adblock版) 和 Safari(Adblock版),是我必装扩展之一(注:Adblock Plus和Adblock是两个不同的东西,但是原理相似,本文不做区分)。一般的,装完ABP都会订阅一些定期更新的过滤规则源,例如最常见的chinalist+ easylist。它的过滤原理是屏蔽掉匹配规则的请求,隐藏掉匹配规则的元素等。然而,它也会给平时开发带来些灵异事件。

某次一同学说他写的Jsonp代码,有些电脑上是好的,有些电脑上发不出请求,很奇怪。看代码发现他请求的是alimama的接口,再看下ABP的chinalist 规则,基本上非ali站对alimama的请求都被block了,原因大家应该都知道。类似的例子我也遇到过:一次写统计demo,用了pv.html结尾的url, 发现请求一直没发出去,追查下去发现list有这么一条:http://*/pv.。还有,某网站的焦点图我就从来没见到过,就因为那个id和class 都等于 focus 的div也中招了。

简单总结下,开发过程中遇到类似于请求发不出去、页面元素显示不出来,甚至离奇错位的情况,可以检查下是不是有内容被ABP干掉了。检查方法除了在过滤规则list搜 索关键字,还可以用ABP自带的"打开可过滤项目"菜单查看过滤记录,一目了然:

mpic

如果你网站的正常内容被ABP干掉了,可以把被过滤项目换成看上去不那么Ad的名称,或者与对应规则维护人联系试试。要检测是否安装类似ABP扩展的方法也很容易,创 建一个class为"adbanner"的固定大小绝对定位div放进页面,再看看元素是否被移除、被隐藏、高宽是否正常就可以了,这里有DEMO。

Firefox下的另一个扩展NoScript也经常给平时开发带来困扰。另外,老六的文章也提到扩展对页面性能的影响,例如导致瀑布图发生很大的变化。所以大家平时 开发中遇到灵异问题时,可以禁用所有扩展,排除扩展的影响再试试。

专题「开发工具」的其他文章 »

Copyright© 2013-2020

All Rights Reserved 京ICP备2023019179号-8