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

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自带的"打开可过滤项目"菜单查看过滤记录，一目了然：

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

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

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

• 开始使用 Vagrant (Aug 23, 2015)
• 搭建 ngrok 服务实现内网穿透 (Apr 19, 2015)
• Chrome 32 开发者工具的几个变化 (Jan 19, 2014)
• Genymotion：超赞的安卓虚拟机 (Nov 28, 2013)
• 打造 Mac 下的完美开发环境 (Oct 09, 2013)
• 如何在 Mac 下使用 Fiddler (Sep 13, 2013)
• 看懂 Fiddler 的瀑布图 (Sep 04, 2013)
• firebug1.12 更新 (Aug 29, 2013)
• [小Tip]用好浏览器的控制台 (Aug 11, 2013)
• firebug1.10更新 (Jul 16, 2012)