移动端调试方案
页面容器
移动设备上的各种浏览器
各类 App 内的 webview
debug 方案
Android 端
iOS 端
跨平台
抓包工具 Charles
调试工具 weinre
其他方案
附录: ES6 标准兼容情况
页面容器
移动设备上的各种浏览器
Chrome,Safari,Firefox,samsung browser
各类 App 内的 webview
不同平台实现不一样
iOS 平台
iOS 8.0 以前的 UIWebView, 现在 (2019 年) 基本被淘汰, 不用管.
iOS 8.0 及以后的 WKWebView, 主流应用内均使用它作为容器展示 html
Android 平台
WebView 实现一般为 Android WebView, 部分手机厂商会默认设置成 Chrome 实现, 差别不是很大.
微信平台
微信 iOS 端是采用 wkwebkit 进行渲染的, Android 平台采用的是 x5 内核
debug 方案
Android 端
由于移动端网页开发不能直接打开 developer tools, 导致我们调试起来稍微麻烦. 好在我们有解决方案:
Remote Devices
谷歌为我们提供的开发利器, 让我们可以在电脑端使用 developer tools 进行 elements 检查和 network 监测, 非常方便快捷.
使用方式:
App 容器需要进行如下设置, Chrome,samsung 浏览器不用, 默认就能打开
- if (Build.VERSION.SDK_INT>= Build.VERSION_CODES.KITKAT) {
- WebView.setWebContentsDebuggingEnabled(true);
- }
手机打开 usb 调试
手机和电脑通过数据线连接, 通过命令行执行, 显示如图之后, 表示成功连接
adb devices
然后从 Chrome 浏览器 F12 找到 Remote devices
inspect 你想要监听的页面, 如下
iOS 端
使用 Safari 自带的开发者工具
首先是 iOS 设备点击设置 ->Safari->高级设置 ->打开 Web 检查器
如果是 App 容器, 使用 webview 加载页面, 那么 App 容器需要是开发包, apple store 上的正式包是不行的.
跨平台
抓包工具 Charles
通过网络代理进行设备网络请求的监听, 注意 https 需要设置证书, 并且就算设置了证书, tls1.2 以上的 post 请求也无法监听, 只能监听 tls1.2 以下的, 还有就是现在很多 App 基于 https 的, 当它判断你的证书自定义的时候, 会抛出异常无法进行 API 请求, 请自行判断.
设备和电脑连到同一局域网, 在 Android 设备中点击 Wi-Fi 详情, 进入高级设置里设置网络代理, iOS 设备点击 Wi-Fi 详情, 点击配置代理选择手动.
代理主机名为你的笔记本在局域网下的 ip 地址, 端口号在 charles 软件中 proxy->proxy settings 中设置
代理设置好后 Android 设备可能需要关闭 Wi-Fi 再重新打开 Wi-Fi 代理才能生效, 并且第一次代理 charles 软件需要点击 allow.
https 证书安装: Help -> SSL Proxying -> Install Charles Root Certification on a Mobile Device or a Remote Revice, 它会指导你用手机下载一个 charles 自定义的 https 证书然后安装.
调试工具 weinre
由于某些 App 并没有打开 remote debug, 而我们又要内嵌自己的页面进行调试, 抓包只能检测网络请求. 所以这个工具就有了使用场景. 它能够检测 elements 并查看 JS 输出信息.
使用方法:
通过 NPM 安装 weinre
pw1 NPM -g install weinre weinre --boundHost 192.168.1.194 --httpPort 9090
在你要调试的页面中插入 JS 脚本, anonymous 是 appid, 你可以自定义
HTML <script src="http://m.kuaijiajin.club:9090/target/target-script-min.js#anonymous"></script>
在 Chrome 浏览器中打开地址, 选择 elements 和 console 监测页面
其他方案
总的来说, 这几种方案覆盖了大部分使用场景, 开发过程中问题不大. 如果还有别的要排查的, 总体来说不外乎加日志, 加 alert 等等, 最优解是自带的 Web 检查器, 不过还是结合着用吧, 非常方便.
当然, 还有一些很好用的调试工具像腾讯出品的 vConsole 也不错, 自己看着选择吧.
还有, 如 App 容器是你自己开发的, Android studio 是会在 log 里打印出 console 信息的.
附录: ES6 标准兼容情况
我们简单分下情况:
一般来说你需要用到的大部分 ES6 特性. 在 Android 6.0 或 iOS 10.0 以上均已实现随便用, 这以下就要注意兼容性问题了. 其中一些基础特性, Android 5.1 就已经支持了.
来源: https://www.cnblogs.com/jiajin/p/11491661.html