JerryQu的小站

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

Read the rest of this entry »

今天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，应该会看到这样的画面：

Read the rest of this entry »

从Editplus转到Sublime Text2的同学，不知道有没觉得它少了个很有用的功能：view in browser（ctrl+b）。平时写点小demo时，那种一秒钟切浏览器看下效果，一秒后再切回来改下代码的爽快感，是我坚守Editplus多年的一大重要原因。

Editplus提供的ctrl+b功能，好用的原因有二：一是内置了webbrowser，切换时不用离开编辑器；二是对于本地调试的web站点，配置规则后自动将编辑的文件映射为URL来预览，这对预览php等服务端文件非常有用。Mac下的Coda，也有类似的预览功能，但我一直用不习惯它，暂不考虑。

Sublime Text2支持用Python编写插件，我很想自己动手解决这个问题，但估计短期内我没可能研究出如何创建webbrowser嵌进ST2里，于是打算偷点懒，直接调系统默认浏览器预览。下面是我研究出来的详细步骤（想直接使用插件的同学请直接看最后）：

Read the rest of this entry »

在我之前参与过的某产品上线后，我们经常会收到用户反馈的各种奇怪问题，很多都和浏览器环境有关，每次跟进起来费时费力。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--

最近改用mac后，最纠结是割舍不能用了数年的Editplus，一时间甚至有了装XP虚拟机继续用EP的213想法，每天茶不思饭不想，码也不想写了。这样过了大半个星期，期间尝试Coda、BBEditor等等各种号称Mac下最好用的编辑器后仍不满意，终于在快要放弃的时候遇到Sublime Text2，成功的解救了我。

关于它的介绍，网上已经有很多文章了，可以先了解下：

Sublime Text 2 入门及技巧
Sublime Text 2 实用快捷键[Mac OS X]

然后就可以动手了，直接去官网下载最新的安装包，支持win/mac/linux三大系统。再参考上面的文章换个icon；从自带的丰富配色里选一个自己看着顺眼的；体验下无比爽快的cmd(win下为ctrl，下同)+p实时文件切换功能；打开一些js、css或者php，cmd(ctrl)+r看看有什么；创建一个project；了解每个菜单项；熟悉下各种快捷键。。。这个过程可长可短，总之一定会让你眼前一亮～

Read the rest of this entry »

最近换了份工作，来到一个全新的前端团队。新团队有些同学可能之前全身心投入到业务开发中，对代码Review的必要性和基本流程了解不多，有滴同学可能还没听过CodeReview这个名词。

代码Review其实就是把代码贴出来让大家批斗的一个过程，对提高团队整体代码水平（如代码规范性、可维护性、设计合理性等）都有很大帮助。前端代码直接面向最终用户，代码Review更是应该作为一个专业前端团队必不可少的一环。

怎么组织一场代码Review呢？我觉得可以从下面几方面来考虑：

• 前置条件：一系列合理的规范文档。没有规范就没有Review标准，没有统一标准Review就变得随意、收益不明显、不可持续；
• 被Review的人：可以根据项目实际情况轮流担任。一般新同学被Review出来的问题会多点，但并不代表老同学的代码不需要被Review。代码Review本来就是一个互相纠正、互相学习的过程，每个人都有自己的亮点和不足；
• 被Review的代码：最好不要直接从Git/svn同步，而是让被Review者自己挑选合适的代码放上去。这个合适有两方面需要考虑：一是代码规模必须适量；二是要挑典型代码，去掉关联不大或功能类似的代码段；
• Review的形式和周期：考虑到实际情况，每次代码Review都指定至少一个主Review人，提前看代码并收集change set。然后召集组内成员在会议室看投影，一个个点来讨论change set，记录讨论过程与结论。这样做成本比较高，所以Review频率不要高于一周一次；
• Review平台：Review重要的是协作和交流、分享与学习，工具是其次。挑选一个合适的Review平台，不是要用工具取代人的职责，只是让Review代码能更方便，能归档查询所有Review历史。

特别说下Review平台。之前我们WED团队使用的是Trac下名为PeerReview的插件，由于Trac比较重量级，而且这边已经有现成的各种类似平台，再搭一套Trac有点重复建设。开源的Review系统试过几个，如groogle，感觉和理想中还差那么一些。于是自己花了几天时间，写了个简单的Review系统，下面是两张截图：

Read the rest of this entry »

调试代码是每个程序开发者必须熟练掌握的技能，前端开发也不例外。只要你的浏览器不是太陈旧，按下F12就能看到各种调试控制台。这里不打算讲具体项目中如何调试代码，而是介绍下如何在Opera桌面版里远程调试Opera Mobile中的页面。

先下载最新的Opera Mobile Emulator，装好运行，再打开Opera桌面版（版本不要太低），通过热键（Ctrl+Shift+I）或右键点击“检查元素”，激活Opera调试工具Dragonfly。接下来分别在Dragonfly和Opera Mobile（在地址栏输opera:debug敲回车）配置远程调试。

Read the rest of this entry »

几天前MS发布了IE10 Platform Preview 2，又有一些新东西可以玩了。

首先是setImmediate Api。这个函数类似于setTimeout，但是强大了不止一点点。一般setTimeout的精度在16ms左右，也就是说就算写setTimeout(0)，每次循环无法突破16ms，当然setTimeout(0)一般有其他用途，这里就不深入了。在HTML5里，setTimeout的精度被缩小到了4ms，fps提高了4倍。那setImmediate精度能到多少？写个简单的例子测试下：

var d1 = new Date();
var i = 0;
var f = function(e){
	if(i > 100000) {
		alert(new Date() - d1);
	} else {
		i++;
		document.body.innerHTML = i;
		msSetImmediate(f);
	}
};
f();

异步将零到十万依次打印出来，在我2年前的本本上只用了16S的时间，也就是这个例子中setImmediate大约0.16ms执行一次，fps超过6000，简直让人难以置信！接着测试IE10 Test Driver上快速排序的例子，setImmediate和16ms的setTimeout也有40多倍的差距，非常暴力。虽然目前还不知道这个函数的实现原理，但可以预见的是一旦普及，浏览器能做的事情更多了。

Read the rest of this entry »

用过Editplus的同学基本都会对它的轻巧与强大赞不绝口。我这样用了3年以上的，早已是离不开它了。无论是在几万行文本里执行复杂正则替换；还是一次打开几百个文本修改编码；或者在结构层次很复杂的目录中批量查找，它都能轻松胜任。

但是这么好用的软件有一个我无法忍受的缺陷：自带的资源管理器非常难用，分开显示目录和文件，还无法同时展开多个目录。Editplus到现在还没支持真正意义上的插件，一直以来都很郁闷。

今天突然想到，自己实现个界面，树状结构显示目录，贴边显示在Editplus窗体旁，就能解决这个困扰我好久的问题。考虑到实现成本，打算用几年前接触过的C#试一下。还算顺利，现在已经实现一个基本可用的版本。

Read the rest of this entry »

今天firefox4正式版提前泄漏，标志着几大浏览器又一次更新换代总算完成。除了更现代的UI，更快的性能，更好的标准支持度外，还有些好玩的东西。

首先是IE9的跳转列表（jump list）。这本来是win7提供给传统应用程序用的，可以让用户快速完成一些任务。现在网页也可以用，在页头定义这些格式的meta信息用IE9打开就行：

<meta content="网站名称" name="application-name" />
<meta content="name=任务名;action-uri=对应链接;icon-uri=icon图片" name="msapplication-task" />
... ...
<meta name="msapplication-navbutton-color" content="black"/>

我的博客也加上了这个功能，效果就是右边那样，对应的代码可以查看源文件。如果给每个任务单独设计icon可能要好看一些。

IE9在处理pinned网页与普通网页相比有不少变化，前者看起来更像一个app。前进后退按钮的颜色是根据favicon自动算的，也可以由页面来指定，相关细节可以查看这篇文章。

其他浏览器想要支持这个功能其实并不难，就看浏览器厂商愿不愿意了。还有人写了个Chrome插件，可以将网页jump list信息提出来以Chrome插件常见的形式来展现。

再说说出来没多久的Opera11.10。大家都知道Opera有个快速拨号的功能，现在各浏览器都拿过去用，Opera就是这样一直被模仿，一直在创新。新版Opera允许网站自定义这个快速拨号。

Read the rest of this entry »