PC端模拟网站在移动设备上的效果
本周最新文章
Android 高薪内推
推荐一个用了三年的理财产品
点击广告支持我
我维护的 Android 经验分享的公众号
点击下面广告支持我
翻.墙.—几十块钱换来大世界
站内推荐文章
阿里、滴滴内推，年 50w 以上
那些著名开源库的原理分析
推荐一个用了三年的理财产品
(142,830)(98,580)(92,989)(87,143)(85,272)(72,964)(64,628)(63,289)(62,953)(58,903)
推荐一个用了三年的理财产品
阿里、滴滴内推，年 50w 以上今天看啥 热点：
如何使用Chrome模拟手机浏览器测试移动端站点，chrome站点
作者：zhanhailiang 日期：
环境说明：&Chrome 37.0. m
1. 通过【菜单→工具→开发者工具|Javascript控制台】或【快捷键Ctrl+Shift+I|J】打开Chrome控制台：
2. 点击控制台上右上角的手机图标启用模拟器：
3. 通过【Emulation→Device→Model】选择你想要模拟的设备：
4. 此时访问你的移动网站的域名：
5. 最后推荐一个小技巧，长按右侧的【Dock to Main Window】，选择将Chrome控制台固定到右侧，类似于对屏幕作垂直分割，方便整个视野内测试：
转发至移动设备”图标。如果关联了多个设备，请选择要发送网页的目标设备。如果要包含离线副本，请选中相关复选框。点击发送。在移动设备上：安装 Android 版 Chrome 浏览器（测试版）安装完成后，登录 Chrome 浏览器。登录后，请务必启用“Chrome 转发至移动设备”服务。我们再打开手机上的chrome键，就能接收到刚才发送过来的网页，瞬间可以浏览。这个功能可以实现电脑和移动设备的无缝链接，实现快速浏览。有人会疑问，我可以通过chrome书签收藏夹同步，我认为此功能的好处就在于把你希望立马看到的页面呈现给你，而不必通过书签一个个去查找到自己收藏了哪个网页。这样就可以通过chrome轻松实现电脑和移动设备的无缝连接。
1）360管家。 2）谷歌，搜索铬的官方网站上，有一个环节。注：不是在twitter上镀铬，需要打开软件+墙。你知道的！
暂无相关文章
相关搜索：
相关阅读：
相关频道：
Android教程最近更新developerWorks 社区
PhoneGap 作为一个优秀的移动开发框架，可以使用 HTM5 与 CSS3 快速开发出本地移动应用程序。然而，移动开发工具中（如 Xcode 与 Eclipse），对 JavaScript 的调试却没有很好的支持。本文将介绍几种调试方法与工具，解决移动平台上的 JavaScript 调试难题。
, 软件开发工程师, 恒生电子
毕业于西北农林科技大学，拥有本科学位。在 JavaEE 领域有多年开发经验，拥有 SCJP 和 SCWCD 认证，目前从事移动产品开发。现在生活在杭州，业余学习意拳。
背景PhoneGap 作为一个目标远大的移动开发框架，可以让开发人员专注于业务应用开发，并让应用程序实现一次开发，多个移动平台运行。现在 PhoneGap 已经被纳入 Apache 基金会的 进行孵化，很多旧的文档与插件可能已经过时。本文将使用 Xcode 来演示 PhoneGap 开发 iOS 应用程序的调试问题，其它平台的开发工具与调试方法也应该如出一辙。准备工作开发工具准备在 iOS 平台上做开发 , 需要安装 XCode 作为开发工具，你可以打开 AppStore 搜索 Xcode，获取最新版本的开发工具。如果需要在真机上调试，那还需要 Apple iOS 设备和 iOS 开发者证书。安装 PhoneGap 开发环境安装 PhoneGap 非常简单，你只要从 PhoneGap 安装文件并解压，打开文件 lib/ios/Cordova-1.x.x.dmg 进行安装。开发 PhoneGap 程序打开 XCode, 新建项目时 , 选择 Application 下面的 Cordova-based Application 模板 ,图 1. 选择项目模板点击下一步，注意：不要选择项目的 Use Automatic Reference Counting （ARC）特性。图 2. 不使用 ARC最后，将 www 拖入项目中，这就完成了一个简单的 PhoneGap 应用。最后，你可以使用 iOS 模拟器运行这个项目。如果上面过程遇到问题，可以参阅更加详细的 。更多的 PhoneGap APIPhoneGap 包含很多本地接口调用，其中主要包括加速感应、摄像头、录像录音、联系人、通知提醒、文件存储等。已经罗列了所有的 API 以及简单的代码示例。不过，Apache
Cordova 还没有用户组的邮件列表，只有开发者和贡献者的邮件列表，在 IRC 的 #phonegap 频道与 Google Group里，你可以找到活跃的用户和许多有用的帮助（请参阅 :）。代理模式调试技术由于移动设备的硬件与架构限制，无法像 PC 一样在宿主机器上安装测试工具或运行辅助脚本。特别是在 iOS 平台上，XCode 与模拟器只能对 Objective-C 进行调试；对于 JavaScript，只能使用 alert 或者 console.log 函数进行跟踪，这让 PhoneGap 的开发人员苦不堪言。 通过代理模式，使用 HTTP 协议发送命令，可以完成远程调试工作。在移动端只需要注入 JavaScript 目标脚本，不断轮询访问代理服务器；客户端使用 PC 浏览器连接代理服务器，将需要执行的命令发给代理服务器。通过代理服务器中转，PC 浏览器就可移动端的应用程序进行命令与数据传输。图 3. 代理模式就是使用代理技术实现的调试工具。它不仅可以用于 PhoneGap 应用程序调试，也可以用于移动版的网页调试。安装运行 weinre首先，下载 的安装包 node-v0.x.pkg 进行安装。然后，以管理员模式打开 Terminal，通过下面的命令安装 weinre：清单 1. 安装 weinre sudo npm -g install weinre使用下面的命令行运行 weinre：清单 2. 运行 weinre weinre --httpPort 8080 --boundHost 192.168.1.101其中 192.168.1.101 为本地网络 IP 地址。在项目中使用 weinre打开“Supporting Files/Cordova.plist”文件，将当前 IP 地址作为 whitelist 添加到 ExternalHost 中。图 4. 添加 whitelist在 index.html 中链接代码： &script src="//192.168.1.101:8080/target/target-script-min.js#anonymous"&&/script&启动 iOS 模拟器，如果 XCode 调试窗口出现以下错误，请检查 ExternalHost 配置和网络设置（确保绕过网络代理服务器，可以访问 IP）。 ERROR whitelist rejection: url='http://192.168.1.101:8080/target/target-script-min.js'打开 Chrome 浏览器，访问 http://192.168.1.101:8080/，可以查看概要文档与辅助代码。打开调试链接：http://192.168.1.101:8080/client/#anonymous，就会看到 Remote 选项卡，Targets 列表中会列出所有远程的目标应用，如果连接成功，链接将显示成绿色。图 5. PC 端界面Elements 选项卡中，可以双击修改 dom 属性，并且在模拟器中可以立即显示修改效果。图 6. 修改 domResources 选项卡中，可以查看和修改所有的数据库、表、本地存储和会话存储。选中一个数据库，可以执行相应的 SQL。图 7. 存储和数据库Console 选项卡中，可以执行 JavaScript 脚本，模拟器会立即响应执行结果。如果有一些日子或者错误，也会显示在这里。图 8. 终端命令行这些功能对于熟悉 Web 调试的开发人员不过是老生常谈。与桌面浏览器调试相比，Weinre 还缺少 JavaScript 脚本动态调试功能。Console 选项卡的脚本执行只能对全局变量进行修改，无法对每个方法内部设定断点进行调试，这需要脚本引擎提供远程调试功能，目前在 iOS 平台上还没有实现。Mock 模式调试技术由于 Weinre 无法实现 JavaScript 动态调试，而 PC 版本的浏览器却有非常强大的调试功能，因此可以隔离 PhoneGap API，重写一套 Mock 对象来模拟 PhoneGap 对象。这样 , 就可以使用 PC 浏览器调试应用程序了。在 WebKit 的浏览器中 ( 如 Safari、Chrome 等 )，都存在 Web SQL Database、Storage 等 HTML5 标准 API，但是没有通讯录、提醒震动、文件操作等移动设备 API，相应的这些接口需要实现一套 Mock API 来模拟移动设备的特性。因此，需要重写部分 PhoneGap API，便可以实现桌面模拟调试。已经完成了大部分 Mock API，只需要将 PhoneGap 的引入的文件 cordova.js 替换为 phonegap-desktop.js，就可以在桌面上调试 PhoneGap 应用程序。如果项目中存在 PhoneGap 插件，也需要相应地重写一套 desktop API。如果是 Native UI 的插件，可以使用 div 元素来模拟，如果是数据交互，可以使用静态 JSON 数据来代替。访问 phonegap-desktop 的 ，你可以查看大部分 API 在桌面上的模拟效果。图 9. phonegap-desktop-demo未来之路：远程调试上面两种调试方法各有千秋，但都不是完美至极。对开发人员来说，如果能够一目了然的看见每个变量和堆栈那是再好不过了。目前 WebKit 项目已经发布了 ，并且 BlackBerry PlayBook 和 Android 平台上的 Chrome 已经支持远程调试。Google 的 V8 引擎有自己的 。但在 iOS 平台上还没有可用的远程调试方法，有些开发人员也会 ，变相让 XCode 支持 JavaScript 的调试功能。
参考资料 参考 。参考 。参考 。加入 。随时关注 developerWorks 和。
访问 developerWorks 获得丰富的 how-to 信息、工具和项目更新以及，帮助您用开放源码技术进行开发，并将它们与 IBM 产品结合使用。加入 ，developerWorks 社区是一个面向全球 IT 专业人员，可以提供博客、书签、wiki、群组、联系、共享和协作等社区功能的专业社交网络社区。加入 ，参与在线交流。
developerWorks: 登录
标有星（*）号的字段是必填字段。
保持登录。
单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件。
在您首次登录 developerWorks 时，会为您创建一份个人概要。您的个人概要中的信息（您的姓名、国家/地区，以及公司名称）是公开显示的，而且会随着您发布的任何内容一起显示，除非您选择隐藏您的公司名称。您可以随时更新您的 IBM 帐户。
所有提交的信息确保安全。
选择您的昵称
当您初次登录到 developerWorks 时，将会为您创建一份概要信息，您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。昵称长度在 3 至 31 个字符之间。
您的昵称在 developerWorks 社区中必须是唯一的，并且出于隐私保护的原因，不能是您的电子邮件地址。
标有星（*）号的字段是必填字段。
(昵称长度在 3 至 31 个字符之间)
单击提交则表示您同意developerWorks 的条款和条件。 .
所有提交的信息确保安全。
文章、教程、演示，帮助您构建、部署和管理云应用。
立即加入来自 IBM 的专业 IT 社交网络。
免费下载、试用软件产品，构建应用并提升技能。
static.content.url=/developerworks/js/artrating/SITE_ID=10Zone=Open sourceArticleID=837831ArticleTitle=在移动设备上调试 PhoneGap 程序publish-date=如何调试安卓(Android)设备上的WEB页面_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
如何调试安卓(Android)设备上的WEB页面
上传于||文档简介
&&安​卓​调​试​W​E​B​页​面
阅读已结束，如果下载本文需要使用0下载券
想免费下载更多文档？
定制HR最喜欢的简历
你可能喜欢私活儿神器
MASHUPCLOUD 聚云网
最具价值web全栈课程
只做前端开发培训的好学校，专注于多方向全栈工程师培养。前端名师邵山欢亲自授课，课程涵盖HTML5、CSS3、Node.js、Angular、React诸多课程，免费视频广受学生好评。
跟牛人学前端
跟牛人学前端
妙味大前端自学宝典
妙味课堂2016年JavaScript课程大纲震撼升级、全栈来袭！
前端最新干货
前端最新干货
Nodejs在线课程
智能社就是全栈开发培训，国内正规的JavaScript、HTML5、NodeJS培训机构，专注于让学员获得快乐的学习体验并找到高薪工作的培训
学前端，这套就够了！
传智播客博学谷前端与移动开发学院 - WEB前端培训,HTML5培训,移动开发培训
免费WEB建站
凡科提供自助建站系统、凡科互动、企业邮箱等多样化的网站建设服务，努力打造成为最全面的服务平台。电脑网站、手机网站和微信网站三合一，助力企业营销，促进企业发展。
您的位置： » 分类:
» 文章: 用 Chrome 调试 Android 下的页面
您可能感兴趣的文章
近期最热文章
- 2,766 - 2,269 - 2,146 - 1,991 - 1,794 - 1,764