在我们用phoengap+html5做的移动app中,经常遇到的问题就是 本地网页兼容但是到了app出现不兼容的情况,原因是手机端页面,大多运行在webkit内核的浏览器上,但还是会因平台、厂商的不同而有种种兼容性问题。

下面就介绍一下在iOS和Android两个平台上如何在真机上对页面进行调试。这里要说明的是,iOS平台只能用自带的Safari浏览器来调试,而Android平台也只能用google Chrome浏览器来调试。当然,我目前只发现这么两种手段,如果你还有其他方法可调试更多的浏览器,希望你能留言告诉我。

一、iOS + Safari

1、打开手机web检查器。

通过【设置】>【Safari】>【高级】>【Web检查器】打开。见下图(点击查看大图),并且你会看到该选项下面对电脑操作的相应描述,照做就好。

2.链接电脑(Mac)

2.1 先在手机Safari中打开你想调试的网页,并用数据线连接到电脑(我这里是Mac)

2.2 再在电脑上打开Safari点击【Develop】菜单,就会看到如下图所示(点击查看大图):

3.3 点击2.2中的网站名就会在电脑上打开Safari的控制台,如下图(点击查看大图):

3.调试网页

如上3.3图所示,此时你可以查看手机网页的DOM结构,并且和电脑端网页调试无异,当鼠标滑过这些DOM节点的时候手机上的相应布局也会高亮起来,如下图(点击查看大图):

二、Android + Chrome

1.设置手机

1.1【设置】>【关于手机】>【版本号(Build number)】,对版本号这一项连点7下(这是官方文档里的说法)就会提示“你已成为开发者”。

1.2 再返回【设置】>【开发者选项】>【USB调试】打开手机USB调试。

2.设置电脑(Mac)

这块比较麻烦,因为要装一下Android的SDK。

2.1 下载Android SDK,并解压,我把整个adt目录放在了 /Users/David/adt/ 这里。

2.2 设置环境变量 。打开终端在David路径下(形如 DaviddeMacBook-Pro:~ David$)输入 open .bash_profile,如果文件存在则会打开,如果不存在则再输入touch .bash_profile 创建并打开这个文件。在文件里输入export PATH=$PATH:/Users/David/adt/sdk/platform-tools:/Users/David/adt/sdk/tools ,关闭保存。最后在终端里输入 source .bash_profile 来更新环境变量使其生效。终端里输入 adb 出现命令帮助信息就是成功了。

2.3 在终端里输入 adb forward tcp:9222 localabstract:chrome_devtools_remote  。

3.链接电脑

3.1 在手机上的Chrome里打开想要调试的网页,用数据线连接手机和电脑(我的是Mac。唉~我只是强调平台的不同,不要误会)。

3.2 打开电脑上的Chrome,在地址栏里输入 about:inspect 选中 【Discover USB Devices】前面的复选框。出现下图画面(点击查看大图):

4.调试网页

4.1 你可以点击图3.2中检测到的设备上正在运行的网站下面那个【inspect】,或者在浏览器中输入 localhost:9222 打开手机正在浏览的网页列表,如下图:

4.2 点击上图中的网站缩略图,就会跳转到Google的一个代理链接(链接可能被墙……,挂代理)就会打开如下图所示的控制台(点击查看大图):

4.3 这就和电脑上网页调试没什么差别了,鼠标经过DOM节点,手机上的布局同样也会高亮起来:

好的,完结。

如何在移动设备上调试html5开发的网页的更多相关文章

  1. 在android设备上调试ionic应用

    方法1: ionic run android -l -c 将会在console中输出日志信息 方法2: (1).使用usb连接android设备,并打开android设备的调试功能 (2).在chro ...

  2. 混合物App开发中,在移动设备上调试查看日志,重写window.console

    (function(){ var print={ lock:true, log:function(param){ if(this.lock){ var element=document.createE ...

  3. HTML5定稿了,终于有一种编程语言开发的程序可以在Android和IOS两种设备上运行了

    2007 年 W3C (万维网联盟)立项 HTML5,直至 2014 年 10 月底,这个长达八年的规范终于正式封稿. 过去这些年,HTML5 颠覆了 PC 互联网的格局,优化了移动互联网的体验,接下 ...

  4. [转] 在安卓设备上使用 Chrome 远程调试功能

    你的网页内容在移动设备上的体验可能和电脑上完全不同.Chrome DevTools 提供了远程调试功能,这让你可以在安卓设备上实时调试开发的内容. 安卓远程调试支持: 在浏览器选项卡中调试网站. 在原 ...

  5. 使用Chrome(PC)调试移动设备上的网页

    最早开始调试移动端网页时,本人都是采取PC上改几行代码,手机上刷新一下看效果这种笨方法来开发的,效率低而且容易让人抓狂.最近偶然发现原来可以使用PC上的浏览器来调试移动设备,不由得感叹相逢恨晚. 工具 ...

  6. 在Windows笔记本上调试运行在iOS设备上的前端应用

    我在每天工作中需要在不同的移动设备上测试我们开发的前端应用是否正常工作,比如iOS设备和Android设备.我用的工作笔记本电脑又是Lenovo的,安装的是Windows操作系统. 有的时候一个开发好 ...

  7. XE6 /XE8 & IOS开发之免证书真机调试三步走,生成iPA文件并安装到其它苹果设备上

    XE6 & IOS开发之免证书真机调试(1):颁发属于自己的App签名证书(有图有真相) XE6 & IOS开发之免证书真机调试(2):连接真机并运行App(有图有真相) XE6 &a ...

  8. XE6 & IOS开发之免证书真机调试(3):生成iPA文件并安装到其它苹果设备上(有图有真相)

    网上能找到的关于Delphi XE系列的移动开发的相关文章甚少,本文尽量以详细的图文内容.傻瓜式的表达来告诉你想要的答案. 原创作品,请尊重作者劳动成果,转载请注明出处!!! 1.既然我们已经在真机上 ...

  9. 在本地调试移动设备上的页面——神器weinre介绍

    平时写代码,最喜欢用chrome的developer Tool调试页面了,基本是离不了的工具.但是当页面需要在移动设备上使用,尤其是被嵌入到Hybird APP中时,由于移动版的chrome没有dev ...

随机推荐

  1. java生产者/消费者模式实现——一生产者一消费者(操作值)

    胶多不粘话多不甜,直接上代码: 生产者类: /** * Created by 51304 on 2016/2/28. */ public class P { private String lock; ...

  2. Firefox 及其 插件“个性化设置”备份

    Firefox版本发布时间表 2016.10.22 49.0.2 2016.11.15 50.0 2016.11.08 重新使用 Firefox(版本为 49.0.2),访问 Firefox官网 常用 ...

  3. Go - 路径、目录名、包名、文件名

    先看一个示例: 1.目录结构 bin pkg src pk1 pk2 function1.go function2.go index.go 2.function1.go 文件内容: package p ...

  4. ASP.NET Core--授权过滤器

    翻译如下: 目前,我们正在从事这方面工作. 我们欢迎您的加入,以帮助塑造范围和方法.您可以跟踪状态并在此提供的输入问题在GitHub上. 如果你想查看初稿并在此主题的大纲,请留下注意到在您的联系信息的 ...

  5. iOS开发——高级篇——流水布局UICollectionViewFlowLayout的基本使用

    之前看到过的一篇文章 对collectionView的使用总结的非常好:“iOS6新特征:UICollectionView介绍” 流水布局在现在的应用中很常见了,简单的研究了下,实现下面的功能 那我这 ...

  6. python匹配ip正则

    python匹配ip正则 #!/usr/bin/env python # -*- coding:utf-8 -*- import re ip_str = "asdad1.1.1.1sdfwe ...

  7. Linq查询表达式

    目录 1. 概述 2. from子句 3. where子句 4. select子句 5. group子句 6. into子句 7. 排序子句 8. let子句 9. join子句 10. 小结 1. ...

  8. Hide JSP error icons in Eclipse

    down voteaccepted Can can either configure this at workspace level or overwrite at web project level ...

  9. 逻辑回归(Logistic Regression)

    转载请注明出自BYRans博客:http://www.cnblogs.com/BYRans/ 本文主要讲解分类问题中的逻辑回归.逻辑回归是一个二分类问题. 二分类问题 二分类问题是指预测的y值只有两个 ...

  10. (一)洞悉linux下的Netfilter&iptables:什么是Netfilter?

    转自:http://blog.chinaunix.net/uid-23069658-id-3160506.html 本人研究linux的防火墙系统也有一段时间了,由于近来涉及到的工作比较纷杂,久而久之 ...