移动开发真机调试

  做移动开发大多数的时候跟手机界面打交道,也就是说你只能在电脑上开发写代码,最终效果是确是在另外一个终端看到的。虽然各种浏览器为开发者提供了很多模拟手机设备的功能,这些功能总体来说基本可以满足我们对于调试移动设备的需求,比如露珠在之前向诸位介绍的手机开发者模式。但是模拟毕竟是模拟,它不能真正做到实现真机一样的效果。所以,必须在想办法在真实的机子上测试我们的代码最终的执行效果。办法当然是有的,下面是露珠在开发过程中用到的若干真机调试方法:

  一、使用 Weinre 调试

 该方法是比较老的一种方法,对于其他的调试方法来说属于刀耕火种型的。weinre是一个调试包,本身提供一个JavaScript,需要你在项目文件中加入该js。首先安装Weinre,我们用nodejs安装之,使用-g全局命令,可以在各个目下访问:

npm install -g weinre

  安装weinre之后再设置监听本机的ip:

weinre --boundHost xxxxxxxxxxx

  然后weinre会为你分配一个监听的ip,copy之然后将其在浏览器中打开,会看到如下界面:

  将界面底部的js文件插入到你的项目文件中去,在你的项目文件引入:

<script src="http:/阁下自己的ip:8080/target/target-script-min.js#anonymous"></script>

  刷新你的项目,可以在刚刚打开的界面,点击第一行debug client user interface,进入上发现了一条新记录,选中之。如果是多条记录,你可以选中其中一条,然后切换到其他界面开始调试项目:

  接下来就可以愉快的开始真机调试了:

weinre工具优点:

所有调试工具中唯一不以其他第三方制定软件为依赖的方式,这种方式的好处就是跨平台,其次是跨浏览器,如果你是在微信或者其他phoneGap外壳方式上开发的,你就会知道,这个方式是比其他方式更有用。

weinre缺点:

在自己项目中引入js文件,需要手动删除,这对代码的控制和版本的控制造成了一定影响。颇为不便。但是最大的鸡肋却不是这个。weinre最大的鸡肋是只能调试样式和元素,js无法调试!!是的,所以它基本上是一只腿走路的。

二、UC开发者浏览器:

  感谢国内还有如此良心公司,为移动开发者带来的这款神器!UC浏览器在手机上占有率国内来说还是蛮高的。要开启调试模式必须在手机上下载UC安卓版的开发版浏览器,也就是图标带一个小扳手的那个。然后在查看你的手机IP.如果是在WI-FI连接模式下在浏览器中输入你的手机ip+:9998,(PC和手机必须在同一个网段!)手机上的浏览器上会提示你是否开启调试模式,点击确认,就进入开发面板了。过程十分简单;(原谅露珠今天没带手机,图都是盗的):下面是进入界面展示

上图都是你在开发者浏览器中打开的界面,选择一个进入开发模式吧!

UC手机开发工具的优点:

简单,容易上手。只要求一个UC开发者浏览器,其余的软件不强制规定。不得不说国内的移动浏览器中UC走在了前面。

UC手机开发工具的缺点

依赖其他软件设备,开发者必须下载UC开发者工具。不跨平台,无视了苹果机。这种模式无法调试微信或者其他app内置浏览器。

三、chrome真机调试

  chrome调试其实跟UC差不多,步骤也比较简单,不同的是UC可以在wifi下调试,chrome不行,而且必须有硬件的接触。首先确保手机上和PC机上装有最新版本的chrome浏览器,然后将数据线将两台设备连接起来。在PC机上打开chorme,输入chrome://inspect,

于是你就可以看到自己的设备和打开的网页了,请再次原来露珠今天没带手机,给一张空图:

设备网址下出现inspect、reload、close 等选项,点击inspect会弹出一个窗口,阁下就可以在窗口中愉快地去调试了。

Chrome手机调试工具优点:

在熟悉的开发模式下调试,操作比较简单。个人觉得UC在这方面胜过chrome。可以跨平台,在ios上也可以用。

Chrome手机调试工具缺点:

有目共睹,比起UC来,它步骤比较繁琐,不能wifi调试,必须指定手机和PC浏览器的类型(都是chrome),这种模式无法调试微信或者其他app内置浏览器。

四、Safari开发者工具:

  露珠的手机是安卓系统(吊死机),pc是window系统(吊死机),所以无法用这种方式调试iphone。但是隔壁老大用的都是苹果产品,遇到iphone问题,也去那边调试了一下,发现苹果系列做的还真是蛮不错的。第四种方式首先得硬件条件是iphone和mac。很遗憾,window版的safari无法调试iphone。过程也是比较简单:

启用功能:

手机端:设置 → Safari → 高级 → Web 检查器 → 开。

mac端:Safari → 偏好设置 → 高级 → 在菜单栏中显示“开发”菜单。

在 OS X 中启动 Safari 之后,以 USB 电缆正常接入 iOS 设备,并在此移动设备上启动 Safari。此时点击计算机上的 Safari 菜单中的“开发”,可以看到有 iOS 设备的名称显示,其子菜单项即为移动设备上 Safari 的所有标签页,点击任意一个开始调试。

苹果系列优点:

便捷,简单,高端大气上档次,可以调试外壳包裹的浏览器如微信。

苹果系列缺点:

不用说,设备限严重依赖其公司产品,不给没钱买它产品的人活路啊。

五、小结

  移动开发趋向主流,一般来说有浏览器的模拟功能可以搞定百分之九十的活。但是不排除很多机型和浏览器版本出现的各种样式,代码兼容问题。掌握一门真机调试在移动开发过程中是非常必要的。就个人来说,露珠还是比较喜欢最后一种方式,因为露珠开发的微信项目,以微信内置浏览器内核为最终标准,这时候调试当然选苹果系列调试最好了。露珠买不起苹果产品,看到老大用来调试的时候还是颇为羡慕。当然,UC开发者工具也是不错的。

时间: 2024-10-06 18:22:57

移动开发真机调试的相关文章

移动端前端开发真机调试攻略

移动端前端开发真机调试攻略 一.IOS 移动端 (Safari开发者工具) 手机端:设置 → Safari → 高级 → Web 检查器 → 开. mac端:Safari → 偏好设置 → 高级 → 在菜单栏中显示“开发”菜单. 在 OS X 中启动 Safari 之后,以 USB 电缆正常接入 iOS 设备,并在此移动设备上启动 Safari.此时点击计算机上的 Safari 菜单中的“开发”,可以看到有 iOS 设备的名称显示,其子菜单项即为移动设备上 Safari 的所有标签页,点击任意一

iOS开发真机调试步骤

iOS真机调试实现可以有两种方法,一种是登陆Developer Center手动创建证书,创建配置文件,我下面着重介绍这种方法:另外一种是通过Xcode注册Apple ID,这个这里没有细节介绍.一.Certificates部分1.点击Certificate菜单下的All 按钮,然后如果需要添加证书,点击右侧上方的+号添加证书.2.证书分成多种,主要有产品证书和开发者证书两类,选择iOS App Development签署开发app的证书就可以,点击continue 进入下一页面3.再这里会提示

iOS开发真机调试的过程

在做Android开发的时候,真机调试根本就不是问题,通过USB将手机连上电脑就可以了.但在IOS开发时,没有这么简单. 首先你需要注册苹果开发者账号,缴纳99美元.下面我简单列出必要的过程,这些过程可以在开发者中心按提示操作. 1 登录开发者中心,创建APP ID: 2 将你的设备(iPhone或iPad)注册到开发者中心,需要安装一个APP获取设备的UUID,APP Store搜索可以得到很多这样的APP: 3 创建一个证书,证书分为开发证书和发布证书两种.调试阶段使用开发证书即可: 4 创

iOS开发真机调试与App上架

>> 目录 一. 开发者账号 购买苹果开发者账号 开发者账号的分类 注意事项 二. 真机调试 真机调试配置项简介 真机调试快速配置 真机调试详细配置 添加推送的真机调试 3分钟快速完成带有推送证书的全套配置 三. App上架 准备工作: 只需要做1次 准备工作: 每次上传时操作 注意事项 Part 1 开发者账号 一. 购买苹果开发者账号 真机调试和App上架, 都需要开发者账号的支持才能实现. 因此第一步, 需要购买苹果开发者账号. 购买流程如下: 注册AppleID : https://a

【转载】Xcode 4.1~4.6 + iOS 5、iOS 6免证书(iDP)开发+真机调试+生成IPA全攻略

原创文章,欢迎分享:未经许可,不得转载:版权所有,侵权必究 开发环境使用的是目前为止最新的稳定版软件:Mac OS X Lion 10.7 + Xcode 4.1 目前Xcode 4.2 Preview版也已经发布,据说其修改方法跟4.1非常类似,只改动了一行代码,请参看参考文章的第二篇.本文仍以4.1版本为例. 更新:现在Xcode 4.2正式版和iOS 5均已发布,下面补充上4.2的修改方法.(2011-10-24) 各步骤会标明版本,比如(Xcode4.1请执行)和(Xcode4.2请执行

iOS开发—真机调试步骤(详细图文傻瓜版)

如果还不了解开发者证书,APP ID,配置文件的请先看这篇博客: iOS开发中关于Certification,appID,Provisioning Profiles的说明(图文) 了解了这些繁琐的名词和其作用后,我们来看看如何制作证书和配置文件,然后进行真机调试: 一.本机生成证书 1.打开钥匙串,最上面状态栏 2.填写信息 3.填写后继续,保存证书 4.找到刚保存的证书 二.登录开发者中心申请开发证书.APP ID.添加测试设备.生成配置文件   1.登录到开发者中心 2.点击下图所示 3.i

ios开发真机调试流程

1.本地申请证书得到1个.csr文件,上传到apple服务器,生成.cer文件 2.创建appids (bundleID:com.apple.*) 3.创建provision profile  关联 appid,cer,devices 其他人真机调试该app,需要   1).p12(个人信息交换文件)带有密码 2).cer文件 3).provision profile 拿到以上3个文件就可以进行真机调试了,写的大概流程,只为总结.

iOS开发真机调试报错

关键词 --<真机调试.Dependency Analysis Error> No Architectures to compile for···"没有用来编译**的架构" 在真机调试的时候出现这个问题.根据报错信息以为要修改 这里的Architectures,查阅了有关armv7,armv7s,arm64的相关知识,顺便贴上来 armv6 iPhone iPhone2 iPhone3G 第一代和第二代iPod Touch armv7 iPhone4 iPhone4S ar

iOS提交应用至App Store流程及真机调试 一,证书、配置文件

前言:你要有苹果开发者账号,我用的是个人账号.其次xcode为xcode 7,由于xcode 7需要 os x 系统 10.11 或更高的版本, 所以os x 系统也需要 10.11 或更高的版本.(本文说的提交是源代码用xCode提交,不是ipa 提交,ipa提交我还没有试过,暂不阐述)关于xCode中真机调试与提交的操作,在下一篇"iOS提交应用至App Store流程及真机调试 二,xCode操作"篇幅原因,这一篇只做,证书与配置文件的说明.篇幅加上图有点长,内容其实不多,多数为