前端调试
IPU框架,开发时页面在浏览器上运行,发布app时页面在app的webview环境下运行,
浏览器前端调试
在浏览器界面按f12功能键,一般即可弹出浏览器调试控制台界面,这块调试资料网上较多,开发人员一般也熟悉,就不多介绍了。
app webview下前端调试
app环境下,app会把服务端静态页面同步至app本地,使用webview加载这些本地静态资源,因app端webview环境与pc上浏览器环境有差异, 且插件功能只能在app中运行,经常部分问题只在app上运行才会出现,下面就在app中webview调试进行简单介绍(大部分资料都是参考自网上,也可自行到网上查找相关资料)
android
参考资料https://blog.csdn.net/zhulin2609/article/details/51437821
调试条件
- 手机打开usb调试
- 支持webview调试
- 使用xposed工具,安装插件打开调试(需要root手机来安装xpsosed,安装xposed可能导致手机系统异常,如不能启动,风险较大,不推荐)
- 在app中代码设置webview支持调试(推荐)
- android模拟器中运行app,模拟器中默认支持webview调试(部分场景适用,如纯前端非插件类问题调试)
- 有能访问google的梯子
调试步骤(window或mac电脑均可)
- 已有梯子可访问google
- 手机usb线连接调试电脑(有些数据线不支持usb调试,最好是手机自带数据线),且手机已打开usb调试
- 手机上运行要调试的app,进入app中的页面(需要app支持webview调试)
- 在电脑chrome浏览器输入地址chrome://inspect/#devices,访问输入的地址
- 正常情况下,页面会显示当前手机中app中已经打开的所有wevbview页面
- 点击页面后的inspec链接,会打开一个调试页面
- 若梯子正常,则调试页面正常加载显示,可像在pc端浏览器调试一样调试页面
- 若梯子不正常,则页面在加载一段时间后失败,显示空白
- 梯子只在首次打开调试页面时需要,若已经打开过调试页面且正常加载后,只要不清除浏览器缓存,相同手机下打开其它调试不再需要梯子
ios
调试条件
- 手机safari已打开web检查器(在ios中,通过 设置 -> safari -> 高级 进行设置)
- 安装debug版本ios客户端
- mac电脑
调试步骤(目前只有mac电脑支持)
- 手机usb线连接调试mac电脑,有时会在手机提示你是否信任,选择信任
- 手机上运行要调试的app,进入app中的页面(app不能为release版本,需为debug版)
- 在电脑safari浏览器上,选择开发菜单(默认safari不显示开发菜单,可在safari 偏好设置 -> 高级 -> 设置显示开发 设置)
- 在开发菜单下找到手机设备名称,设备名称右边会列表显示app中打开的webview页面,选择要调试的页面进入调试界面
其它补充
- webview调试时,在控制台输入js代码来执行,或手动修改dom或样式,来做一些测试
- 若js代码在页面一加载后马上执行,如代码放在jquery的ready方法中,则这些代码暂无法添加断点来调试,因为代码在打开进入调试页面前已执行完毕
- ios加入断点调试,有时会出现app假死现象,界面不再响应
- android webview调试在淘宝上有人提供离线工具包,可不使用梯子进入调试页面https://www.cnblogs.com/slmk/p/7591126.html(未使用过,仅供参考)
- 部分插件回调失败时,显示的错误行号一般为第1行
- webview调试较为复杂,普通的前端错误优先在pc浏览器调试定位
- 辅助调试工具,只需要在页面嵌入一个第三方js库,如vconsole,即可做一些调试,体验不如上面webview