前端调试

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

参考链接 https://www.jianshu.com/p/c5b6c49d9f06?from=timeline

调试条件
  • 手机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

Copyright © aiipu.com 2017 all right reserved,powered by Gitbook该文件修订时间: 2020-09-02 11:36:10

results matching ""

    No results matching ""