以前给移动设备做网页最蛋疼的就是需要在本地写完之后,手工在手机上点击刷新才可以看到效果,现在不用了,谷歌真是一个伟大的公司,可以直接通过他们的浏览器干这件事了,这真是造福我等懒人~

首先是要去下载最新的chrome的开发版,名叫Chrome Canary:http://www.google.com/intl/zh-CN/chrome/browser/canary.html

在你的手机上也需要安装chrome,据官方说似乎是要V31之后的,这玩意各个市场都有,相信做前端的童鞋应该都用过,再进手机的设置中打开开发者模式,开启USB调试,这些步骤每个手机不一样,这里不做赘述,自己可以根据自己手机型号去查。

当然,你需要用一根USB线连接到你调试用的电脑,电脑上需要安装好手机的驱动。这些完成之后,就可以开始调试了~

在chome canary中输入:chrome://inspect,进去之后,第一个选项卡devices,勾选discover的选项,后面的按钮可以暂时不用理会,我也暂时没搞清楚是干嘛的。这时候,你会在下面发现你的手机的名称以及chrome的版本号,如果你是android4.4,还会显示webview的版本号。在手机上打开chrome浏览器,随便打开一个网页,电脑这边也会随之出现相应的网页名称,每个名称下面会有个inspect,点进去,就是Developer tools了。

好吧,本该写到这里,教程似乎应该是结束了,但是如果你在天朝看到我这篇文章,那么很抱歉,你这个时候可能会发现,妈的!居然进不去!我也遇到这个问题了,折腾了一天没发现是哪儿的配置出问题了,但是本机ADB调试以及eclipse的开发环境是可以给手机调试程序的,也就是说,不是驱动等乱七八糟的问题。最后跑去开源中国问了下,有人告诉我,居然需要翻墙!好吧~~~心里默默奔腾过一万只草泥马,我用的是GoAgent,配置方法在这个帖子: http://www.singlex.net/2973.html ,配置好之后,再inspect,就可以调试了~~~泪奔啊~在天朝当程序员真他妈的不容易~

如果你看到了以下两个图片,那说明你成功了,enjoy it!

点击查看原图

点击查看原图

中间过程太曲折,你可以慢慢试验,如果是用以前版本的浏览器据说也可以调试,但是需要安装插件,但是我没有调试成功,官方文档中有介绍,网址如下:

https://developers.google.com/chrome-developer-tools/docs/remote-debugging?hl=zh-CN

关于那个需要翻墙的,我这边不管是家里还是办公室都需要,查看日志,确实是有从代理过去的流量,如果有其他方法可以绕过,麻烦告知,谢谢!

评论····················

2014-04-28 18:01
博主是技术型的啊,利害

发表评论·············

可以使用Ctrl+Enter快速发表哦!