首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >windows+安卓调试Hybrid混合应用的实践

windows+安卓调试Hybrid混合应用的实践

作者头像
IMWeb前端团队
发布2018-01-08 16:23:49
1.2K0
发布2018-01-08 16:23:49
举报
文章被收录于专栏:IMWeb前端团队IMWeb前端团队

本文作者:IMWeb helinjiang 原文出处:IMWeb社区 未经同意,禁止转载

开发Hybrid混合应用时,很多人都觉得调试是一件比较麻烦的事情,因为它可能会依赖于app环境,绝不是普通的h5页面那么简单。

前些日子一直做手Q上的页面开发,针对如何调试,有一些心得,在此记录。注意,本文内容仅限于在windows中调试安卓系统中的Hybrid混合应用。本文是在 @feix760 相关文档基础上整理而来,并作了适当的内容补充,在此特别表示感谢!

1. 原理简介

借助Chrome的DevTools工具,连接手机后,可以呼起Chrome浏览器中的开发者工具,然后就能够像调试普通页面一样调试手机中的页面。

更详细的细节,请看 官方说明

2. 安卓手机

Android 4.4 开始,webkit是支持远程调试的,不过需要将app的debug模式打开,可以使用如下代码:

WebView.setWebContentsDebuggingEnabled(true);

由于大部分 App 的 debug 模式是关闭的,即便是内部 App,比如 QQ/微信,要去找一个开启了debug 模式的版本还是比较麻烦的。因此需要使用借助第三方工具来强制开启任何 App 的 Android webview debug模式,使之可以使用 chrome inspect。而这个工具就是 Xposed

我们已经提供了一份要安装的文件,请首先到 https://github.com/feix760/WebViewDebugHook 下载文件。

2.1 root设备

因为涉及到 root 权限,因此需要将手机进行 root。有很多工具可以来 root,比如KingRoot、一键root、360一键root等。如果你安装了QQ电脑管家,可以在“电脑管家-工具箱-其他”列表里面看到KingRoot。

2.2 安装xposed框架

在下载文件的hook.zip中,找到 de.robv.android.xposed.installer_v33_36570c.apk,安装之。也可以去 官网 下载。

2.3 安装xposed webview debugging模块

在下载文件的hook.zip中,找到 WebViewDebugHook.apk,安装之。

2.4 激活Xposed

安装后上述两个apk之后,可以看到手机上面出现了一个叫 Xposed Installer 的图标,点击进去之后会看到提示说Xposed未激活,点击红色字体部分,会切换到另外一条页面,点击“安装/更新”按钮即可。

但有部分手机会出现类似如下的错误,导致无法点击“安装/更新”,目前已知的是部分版本的MIUI是会出现这个问题的(红米Note和小米Note试过不行,但小米4是没问题的)。

安装完成之后,重启再打开,再点击刚才点击过的地方,切入页面之后,勾选,再重启,重启之后即激活了Xposed。

2.5 关于QQ等

QQ等默认会使用X5内核,把下载文件中的 debug.conf 放在sd卡根目录下就可以强制它使用 Android 自带 webview 。

3. Fiddler

Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许监视,设置断点,甚至修改输入输出数据.所以无论是从事什么开发,哪种语言,只要你想了解HTTP,这个工具就值得你去了解。

在Windows中下载Fiddler2或Fiddler4,安装完成之后,点击菜单中的Tools-Fiddler Options,之后会弹出一个设置面板,切换到Connections 标签页,设置其端口号为8888,且勾选 “Allow remote computers to connect”

Fiddler是以代理web服务器的形式工作的,它使用代理地址:127.0.0.1,端口:8888。当Fiddler退出的时候它会自动注销,这样就不会影响别的程序。不过如果Fiddler非正常退出,这时候因为Fiddler没有自动注销,会造成网页无法访问。解决的办法是重新启动下Fiddler。

4. 测试连接

我们推荐PC和手机在同一个局域网内,这样比较好操作,这也意味着如果是台式机,则需要安装无线网卡。

按照以下步骤:

  1. PC和手机都在同一个局域网内
  2. 获取PC的IP地址(如果其有多个IP地址,记得是和手机在同一个局域网内的IP地址)
  3. 设置手机连接wifi时启用 http 代理,其中代理ip就是PC的ip,端口号填写Fiddler中设置了的8888
  4. 在手机上使用浏览器打开任意一个网页,观察PC端Fiddler是否已经成功代理了手机上发出的http请求。
  5. PC 上使用 chrome 打开 chrome://inspect ,然后打开任意 App 的 webview ,此时就应该能够在chrome浏览器上看到出现了可调试的入口,点击 "inspect",即可打开调试工具,此时就可以愉快的调试了。
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 原理简介
  • 2. 安卓手机
    • 2.1 root设备
      • 2.2 安装xposed框架
        • 2.3 安装xposed webview debugging模块
          • 2.4 激活Xposed
            • 2.5 关于QQ等
            • 3. Fiddler
            • 4. 测试连接
            相关产品与服务
            云开发 CLI 工具
            云开发 CLI 工具(Cloudbase CLI Devtools,CCLID)是云开发官方指定的 CLI 工具,可以帮助开发者快速构建 Serverless 应用。CLI 工具提供能力包括文件储存的管理、云函数的部署、模板项目的创建、HTTP Service、静态网站托管等,您可以专注于编码,无需在平台中切换各类配置。
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档