i,unbug

Undeniable[Better:见贤思齐,闻庸自省. Unique:独立思索,志在远方. Genuine:谦逊真诚,宽以待人.]

支持打印http日志的代理node脚本工具,无需再等待fiddler for mac啦

Posted by on Jan 19, 2014 in Mobile Web App, Web | 0 comments

logproxy.js是一个基于nodejs实现代理服务并打印http日志的小工具.给移动前端开者带来诸多便利.

run:
node logproxy [listen port] [only log host,..]
eg.
1.start logproxy with default setting
node logproxy
2.listen on port 8088 and only log hosts — ‘c.163.com’ and every host matchs ‘126.com’
node logproxy 8088 c.163.com,*126.com

Snip20140119_71

Read More

如何不用翻墙可以享受Chrome for android的远程调试功能

Posted by on Jun 5, 2013 in Mobile Web App | 3 comments

Chrome for android的远程调试功能 出来已久了,但由于默认的DevTools使用的是appspot服务器,这在国内是需要翻越GWF行不通.

但Chrome自带的DevTools是有一个协议开启的,即”chrome-devtools://”.通过这个协议,我们就无需翻墙就可以调试了.

方法如下:

1.在你的http://localhost:9222页面 右键 你想调试的手机里的页面选择”复制连接地址”,

会得到类似这样的连接http://chrome-devtools-frontend.appspot.com/static/27.0.1453.90/devtools.html?ws=localhost:9222/devtools/page/351EAE82-5307-58D1-A50F-9C3F2E0C3FE0″

Snip20130605_3

2.然后将上面的地址的红色部分替换为“chrome-devtools://devtools/devtools.html”即可,例如

chrome-devtools://devtools/devtools.html?ws=localhost:9222/devtools/page/351EAE82-5307-58D1-A50F-9C3F2E0C3FE0″

Snip20130605_5

3.如果你像我一样喜欢用Canary,那通过最新版的chrome://inspect/ 命令调试更加方便了,点开会列出所有可调试的页面,包括你的外接android设备的Chrome for android里打开的页面,只需要点击列表里出现的连接后的”inspect”就可以了,注意,这个功能也是需要安装启动ADB的

Snip20130605_7

Read More

Android上当viewport的width大于device-width时出现文字无故折行的解决办法

Posted by on Apr 23, 2013 in Mobile Web App | 0 comments

有人遇到某些android机子使用了P标签后P标签没有适应宽度,解决办法多种但都不是什么好方法:不使用P标签,float:right,position:absolute或者加背景.

以上遭遇跟我遇到文字无故折行相似:

当你的viewport的width大于device-width时就出出现这个问题

<meta name="viewport" content="target-densitydpi=device-dpi,width=640" />

android设备device-width大多没有超过640,这时多数情况文字出现了折行,没有铺满.但debug看到文字所在的元素宽度是正常的.
值得一提的是article等html5新增元素如果出现了问题再刷新可能就正常了,但p元素却没有这么幸运.
对于这个问题,给文字所在元素加上背景图片就解决了,如果不用背景就加个background: url(‘about:blank’)或者background:(”);
试试过用background: rgba(0,0,0,0)并没有解决问题,对于这个结果我也非常的无奈,如果你遇到了相同的问题,有更好的办法,欢迎告诉我.

Read More

运用webkit绘制渲染页面原理解决iscroll4闪动的问题

Posted by on Sep 19, 2012 in CSS3, Mobile Web App, OPOA | 2 comments

已经有不少前端同行抱怨iScroll4的各种问题,我个人并不赞同将这些问题归咎于iScroll4,因为iScroll4进无论是touch事件的捕获,还是使用transform来处理滚动,以及将cubic-bezier应用到transition上实现高效的平滑滚动,这些原理我们都是已知的。更多原理细节可以参看[译]手把手教你编写iOS上Mobile Web App实现Fixed Position和模拟滚动 一文。此文则来解释另一个被很多人误解为iScroll4 造成的问题,那就是内容多的页面闪动的问题。现象表现为:

1.滑动过程中,滚动区内的元素在释放手指时出现细微闪动

2.图片缩放过程中释放手指时明显闪动

3.iOS上从mobile safari打开或第三方应用内打开后,切回主屏幕再切回页面时明显闪动

4.页面初始时闪动

大致这些情况下会有闪动,在ipad2,new ipad上会明显看得出。

下面就来分析产生的原因和解决办法:

Read More

在mobile safari中巧妙实现检测应用安装就打开,否则进App Store下载

Posted by on Sep 18, 2012 in Mobile Web App | 6 comments

*更新 iOS9的 Universal Links 更好的解决了这个问题,详看。 

首先看个网易的实际案例。

iOS6的Mobile Safari给前端开发者带来了什么  里已经提到iOS6的mobile safari将有智能应用通知标题(Smart App Banners)的功能,意在解决mobile safari里无法检测第三方应用安装状态的,通过这个功能,可以在页面中实现应用推荐类的需求。但目前来看,要实现这个需求只能在第三方应用中实现。思路也简单,第三方应用可以通过iOS的SDK提供的接口检测到对应的应用是否已经安装,然后在内嵌的UIWebView中打开的连接时追加参数如“?isinstalled=1”之类的参数供web页面获取来判断。web获知状态后可以提示给用户觖发的对应的应用的方案,如“打开应用”,“安装应用”等。

不过我们今天来说一种不借助第三方应用在mobile safari里就能实现跟上述类似的功能。

先来看看实现代码:

Read More
Page 1 of 212