Archive for 1月, 2012年

事情经过是这样的:今天某同学用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打开这个页面,可以看到滤镜之后定义的样式没有生效。

Read the rest of this entry »

上一篇博客提到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.)

Read the rest of this entry »

在我之前参与过的某产品上线后,我们经常会收到用户反馈的各种奇怪问题,很多都和浏览器环境有关,每次跟进起来费时费力。09年初,JKMiller开发了一个页面工具用来排查浏览器环境相关问题,挺好用的。这个工具在我的小站也存放了一份,去掉了无关内容并改了一些提示文字,版权属于原作者。可以通过这个地址来访问:

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--

关于我

JerryQu,当前从事前端开发,@中国北京
这里是我随便记录东西的地方~
需要找我,我的联系方式在这里»
查找QGYWebIM相关信息,请点这里»

  • 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 感谢屈屈!