ABP全称是Adblock Plus，是一个基于预设规则过滤Web广告的浏览器扩展，支持Firefox、Chrome和Safari，是我必装扩展之一。一般的，装完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也经常给平时开发带来困扰。另外，老六的文章也提到扩展对页面性能的影响，例如导致瀑布图发生很大的变化。所以大家平时开发中遇到灵异问题时，可以禁用所有扩展，排除扩展的影响再试试。
本文链接：http://www.imququ.com/post/adblockplus_and_fed.html
--EOF--
今天Miller兄分享了一个很好的工具Weinre(WEb INspector REmote)，可以在一个Webkit下远程调试另一个Webkit里的网页，典型应用就是在桌面浏览器里调试iPhone、iPad等移动设备上的Safari。刚好之前小强有类似需求，这里就简单介绍下它的基本用法。
首先，去这里下载Weinre的最新版。这个目录有两个zip包，下载那个weinre-jar-x.x.x.zip就好了，解压得到weinre.jar，随便找个目录放。那个mac包可以忽略，它只是把jar打包成一个图标巨难看的app，还不如直接用jar方便。
然后打开终端，进到weinre目录，运行下列命令，以指定端口和要绑定的ip启动weinre服务（假设java环境变量已经配好）：
java -jar weinre.jar --httpPort 1070 --boundHost -all-
接着打开基于webkit的浏览器，输入http://<your-ip>:1070，应该会看到这样的画面：
- (5) Comments
- Tags: debugger, webkit
今天我神奇的发现，现阶段基于webkit内核的浏览器（Chrome、Safari等），通过document.domain，可以将domain设置到最后一级（最后一个点之后的内容）。举例说明：
- www.qgy18.com可以设置domain为“com”，不能是“cn”等其它内容；
- www.aoao.org.cn可以设置domain为“cn”，不能是“com”等其它内容；
- www.imququ.com.（注意后面的.）可以设置domain为“”，不能是“com”、“cn”等等其它内容；
这能干嘛呢？显然，只要两个域名有同样的domain，就可以轻易的跨域通讯了。那么在webkit下，只要两个域名后缀一样，例如都为com或者都为空，通过这种方式可以轻松跨域了。
我把这个问题发在QWrap群里讨论，有人说这是Webkit内核的一个feature，用来方便开发者实现跨大域。我认为这是bug，因为，虽说很少有人会把自己的网站domain设置为com，但是对于黑客来说，他如果在你网站做这件事情，那你的网站跟他的站点就成一家人了，这种行为也不容易被发现。
- (8) Comments
- Tags: webkit
从Editplus转到Sublime Text2的同学，不知道有没觉得它少了个很有用的功能：view in browser（ctrl+b）。平时写点小demo时，那种一秒钟切浏览器看下效果，一秒后再切回来改下代码的爽快感，是我坚守Editplus多年的一大重要原因。
Editplus提供的ctrl+b功能，好用的原因有二：一是内置了webbrowser，切换时不用离开编辑器；二是对于本地调试的web站点，配置规则后自动将编辑的文件映射为URL来预览，这对预览php等服务端文件非常有用。Mac下的Coda，也有类似的预览功能，但我一直用不习惯它，暂不考虑。
Sublime Text2支持用Python编写插件，我很想自己动手解决这个问题，但估计短期内我没可能研究出如何创建webbrowser嵌进ST2里，于是打算偷点懒，直接调系统默认浏览器预览。下面是我研究出来的详细步骤（想直接使用插件的同学请直接看最后）：
- (13) Comments
- Tags: Sublime
随着智能手机的普及，大家已经习惯随手拍点照片传网上了。有时候传上去的照片方向会不对，甚至还有脑袋朝下的情况。为此，各大微博不约而同的给照片增加左右旋转的功能。这样能解决问题，但我们是否能更进一步，自动选择正确的照片方向呢？刚好最近我们有类似的场景，本文就讨论下这个问题。
实际上，数码设备拍摄照片时，会把许多属性附加在照片文件里，这些属性构成了大家常说的Exif信息。访问我的相册会发现照片下也有对应的Exif信息。Exif中有个Orientation字段，用来存放照片方向，这就是我们需要的，看下它的定义：
- (8) Comments
- Tags: Exif, JavaScript
什么是浏览器模式和文本模式？
经常使用IE开发者工具的同学，肯定见过浏览器模式和文本模式，对于这两个名词，综合相关文档解释如下：
浏览器模式（Browser Mode），用于切换IE针对该网页的默认文本模式、对不同版本浏览器的条件注释解析、决定请求头里userAgent的值。它在浏览器发出请求之前就已经确定，网站没有办法修改这个值。它代表的是用户以何种浏览器访问网站。IE9支持下列浏览器模式：
| userAgent | 默认文本模式 | |
|---|---|---|
| IE7 | MSIE 7.0 | IE7标准 |
| IE8 | MSIE 8.0 && Trident/4.0 | IE8标准 |
| IE9 | MSIE 9.0 && Trident/5.0 | IE9标准 |
| IE9兼容性 | MSIE 7.0 && Trident/5.0 | IE7标准 |
（IE9兼容性模式与IE7模式的区别是：前者在UA里加上了Trident版本，后者和IE7完全一致无Trident标识；IE8中，IE9兼容性模式对应为IE8兼容性模式，UA里Trident版本为4.0，其他没变化。另，IE8中没有IE9模式）
- (2) Comments
- Tags: IE
事情经过是这样的：今天某同学用Matrix滤镜实现了IE下的一个旋转效果，但在IE6、7下页面样式全部被搞乱掉，滤镜之后的CSS样式完全没生效。剥离无关代码后类似于这样：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jerry Qu's HTML document</title>
<style type="text/css">
#img {
filter:progid:DXImageTransform.Microsoft.Matrix(M11=-0.707,M12=-0.707,M21=0.707,M22=-0.707,SizingMethod='auto expand');
}
body {color:red;}
</style>
</head>
<body>
<img id="img" src="http://st.imququ.com/uploads/2011/07/ququ_1_1_1.jpg" />这行文字应该是红色的。
</body>
</html> 用IE6或7打开这个页面，可以看到滤镜之后定义的样式没有生效。
- (5) Comments
- Tags: IE滤镜
上一篇博客提到09年初WED团队开发的浏览器环境检测工具时，忘记说这个是aoao同学的创意了。不过没关系，据说他又在秘密规划新版本了，再据说新版要增加的DNS解析时间计算已经开发完成，点上面那个链接就可以抢先体验。。。
好吧，参加过11年Velocity大会的同学应该都知道facebook那个算DNS解析时间的方法了，像我这种穷人家孩子参加不起VC大会的，主办方很厚道的提供有PPT可供观看。看完PPT觉得不过瘾，还是来动手实战下吧。
首先看原理：
a <= <random number> t1 http://a-doppler.facebook.com/test_pixel?HTTP1.0&t=1&size=0k t2 http://a-doppler.facebook.com/test_pixel?HTTP1.1&t=2&size=0k t3 http://a-doppler.facebook.com/test_pixel?HTTP1.1&t=3&size=0k t4 http://a-doppler.facebook.com/test_pixel?HTTP1.1&t=4&size=10k t1 = DNS + New Connection +RTT t2 = New Connection + RTT t3 = RTT 10k /(t4–t3)~TCP bandwidth
（来源：《MobilePerformanceVelocity2011.pdf》 by DavidWei.）
在我之前参与过的某产品上线后，我们经常会收到用户反馈的各种奇怪问题，很多都和浏览器环境有关，每次跟进起来费时费力。09年初，JK和Miller开发了一个页面工具用来排查浏览器环境相关问题，挺好用的。这个工具在我的小站也存放了一份，去掉了无关内容并改了一些提示文字，版权属于原作者。可以通过这个地址来访问：
http://qgy18.imququ.com/browser-doctor/
-----分割线-----
对于跟进用户反馈这个事情，再多说点。有时候用户在论坛或微博抱怨自己啥啥功能用不了，但这个问题没办法复现，也没有其他人反馈，要怎么解决呢？如果能联系到用户并且用户配合，能用上面的工具跑出结果来当然最好了；联系不上呢？那得从侧面下手：
如果有截图，大概扫一眼可以排查样式是否加载失败和样式兼容性问题，也可以排查缺少字体、缩放文本、调整DPI等常见问题。有些截图还能看到当时使用的浏览器，这就可以把问题定位到某个浏览器的某个版本。如果图上没浏览器，根据一些元素例如表单的默认样式差异，也差不多可以定位OS和浏览器类型。看截图还可以判断页面内容是否加载正常，例如页面上空了一块，那就要考虑是不是Ajax请求失败，或者被用户浏览器当广告屏蔽了一部分内容等等情况。
如果没截图，或者截图提供的信息太有限，那么可以设法确定用户身份，根据用户唯一标识和提交反馈的时间点，可以拿到web server访问日志，access log一般都有记userAgent，这就可以确认用户的OS和浏览器信息。还可以根据连续的日志还原用户操作流程，排查特定分支下出现的bug。有时候用户某个功能不能用是因为他的网络运营商劫持了某个域名造成的，服务器根本就没有他的访问日志。
我遇到的用户反馈的奇怪问题，大部分都是代码bug，剩下小部分问题就各种原因了，有页面被运营商篡改的；有浏览器设置不当或系统组件被破坏如msxml3.dll被反注册的；还有国内各种Shell把IE改坏的等等。
每件事背后都有它发生的原因，能通过种种蛛丝马迹成功解决用户的疑难杂症还是非常有幸福感的，虽说很多时候让用户“Ctrl+F5”、“换台电脑试试”同样能解决问题。
本文链接：http://www.imququ.com/post/browser-doctor.html
--EOF--
今天看到某大牛之前写的某段代码里，用到了"| 0"这种写法将字符串取整。这本来没什么，很多人都这样做，但他那段代码里处理的是一个时间戳。如：
"1325239449538" | 0;
结果是-1905444926，这显然不是我们想要的。这个问题产生的原因是：A | B是将A、B先ToInt32再运算，返回结果是32位符号型整数。只要A超过2147483647，也就是231-1，就杯具了。
另一个常用的parseInt函数也容易发生杯具，如：
parseInt(0.0000001);
在大部分浏览器上，结果是1（新版firefox会得到0），这也显然不符合预期。原因是parseInt(A)第一步会执行ToString(A)。上面的例子中，0.0000001会转成"1e-7"，后面的事情应该都知道的。
本文链接：http://www.imququ.com/post/89.html
--EOF--
- (4) Comments
- Tags: JavaScript
- Entries (RSS)
- PPanda sftp如何同步本地文件夹呢？
- dron 嗯！太有用了，终于完美找回 EditPlus 的感觉了。
- 袁源 还真的是这样。其实挺佩服微软的呀～就是都太不完善了
- 三水清 类似功能可以使用fiddler，http://ming.sinaapp.com/?p=218
- 呆呆 非常感谢~话说我现在想把weinre变成一个服务器，就是我在电脑上修改了，手机上访问可以直接，不知道[...]
- 夜 困扰了我好几天的问题，不过最后还是让我解决了，要早让我看见这个文章该多好啊，那我也不用烦恼那么久了~[...]
- hoowolf 非常感谢你的工作！！！
- welefen 恩，去年我们在新首页导航精准下线的时候也遇到过，当时还做了对用户影响的数据评估和分析。
- 唠叨下 我们这边测试的时候是在刚做完 preload 后的系统上测试的，就跟刚装完操作系统后一样干净。怎么说[...]
- gust 我是在ubuntu11.10环境下
- gust 想用google浏览器的话可以这样 webbrowser.get('/usr/bin/google[...]
- jin 怎么zenCoding的缩写设置呢，类似editplus下的acp配置
- Jerry Qu @Feather，确实Shadow是基于Weinre封装的。在我这里也很慢，因为它连的是http:/[...]
- Feather 谢谢分享，其实Adobe的Shadow产品貌似也是用这个原理来做的，不过shadow封装好，比较方便[...]
- i am bug 感谢屈屈！