i,unbug

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

如何不用翻墙可以享受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

今晚作者失眠,为了不浪费生命,决定与大家分享MIHTool的开发心得

Posted by on Mar 17, 2013 in Lounge | 7 comments

#MIHTool#今晚作者失眠,为了不浪费生命,决定与大家分享MIHTool的开发心得.
首先,MIHTool是作者希望前端移动小组能有一个查看Webkit debug borders以便优化前端移动项目的工具,原本打算请客户端开发同事做,后来作者花了半天时间调研后一意孤行的亲手开发,边学OC边开发,是的,作者的OC非常不专业可以说很槽糕.不到一个星期左右MIHTool 1.0版就出来了,之后几乎每个星期发布一个版本,之所以每个星期仅仅是单纯的因为苹果AppStore审核周期7天左右罢了.

Read More

Chrome beta for Android 新版带来与PC端接近完整的开发者与实验室功能

Posted by on Mar 7, 2013 in Web | 1 comment

我们知道,Chrome在地址栏打开chrome://chrome-urls/ 即可获得大量利于开发者调试与跟踪的功能,其中chrome://flags/ 包含大量即将支持”来自未来的web特性”的选项,如WebGL切换,SPDY等…其中包括显示页面FPS和”合成渲染层边框”即MIHTool重要功能之一的”显示页面合成渲染层(Compositing Render Layers)”.

Screenshot_2013-03-07-10-48-34

Read More

Chrome全平台更至 22版本后,给前端调试带了几个令人兴奋的实用功能

Posted by on Oct 9, 2012 in Web App | 2 comments

Chrome全平台已经更新版版本 22.0.1229.79,给前端调试带了几个令人兴奋的功能:

1.Elements面板,右键元素节点选择“Scroll Into View”,可以在页面视图中快速定位到当前节点

2.Elements面板,右键元素节点选择“Break on…”则可以监听元素子元素变化,属性变化,节点被移除时触发断点debug

3.Elements面板,右键元素节点选择“Force Element State”则可以应用元素的“:active,:hover,:focus,:vistied”状态,同时这些状态是可以组合使用而且保持着的

4.Elements面板,选中元素节点,在右则的样式版本中点击“+”号,就可以依元素的选择器生成对应的样式,生成优先级“ID选择器>类别选择器>标记选择器”

同是在上图中,我们也可以看到“鼠标”形状的按钮,就是在样式列表中显示当前元素对应的鼠标四个状态样式的,这个功能早期版本一直有的。

Read More

os x升级10.8.2后VirtualBox完全挂掉的临时解决办法

Posted by on Sep 21, 2012 in Lounge | 3 comments

更新,VirtualBox 4.2.1 for OS X 已经放出,专门解决了这个BUG啦!

昨天升级OS X到10.8.2后VirtualBox无法运行了,只要一运行就弹出“VT-x is being used by another hypervisor。。。”的错误信息。在网上找了好久,发现跟我遇到相同问题的人大把,但只有Ivy Bridge的机子有问题。目前只能等待VirtualBox更新了,我本以为这是一个严重的BUG,认为今天Oracle就会发布更新,可我错了,连一个DEV版都没有找到。但很多人像我一样在虚拟机里运行window或者其他系统是为了工作的,因此只能临时性解决了:
1.转到Fusion .先用VitualBox将目前的虚拟电脑导出成 .ova格式,再在Fusion里导入。

2.转到Parallels .安装后按向导将VirtualBox里的虚拟电脑自动转换过去即可。

以上两种办法都可以试用一段时间,希望这断时间内VirtualBox发布更新版解决此BUG。

如果想跟进相关消息可以查看以下帖子:

1.https://discussions.apple.com/message/19623146#19623146

2.https://discussions.apple.com/thread/4314420?start=0&tstart=0

3.https://forums.virtualbox.org/viewtopic.php?f=8&t=51331

4.https://www.virtualbox.org/ticket/10965#comment:11

5.https://discussions.apple.com/thread/4314420?start=0&tstart=0

6.http://news.ycombinator.com/item?id=4546808

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 2 of 41234