# 调试方法

# H5平台调试

  1. 启动h5平台
    yarn serve
  1. 启动后IDE下方终端会显示出访问IP和端口
  1. 点击终端中的IP 或在浏览器中输入地址 ,即可在浏览器中预览

# YUMP app专用-APP平台调试

  1. 下载安装宇信移动平台APP(调试版),用于调试APP工程;
  2. 将需要调试使用的移动设备和pc设备连至同一局域网(wifi)或者pc设备连接手机热点。
  3. 启动APP平台
        yarn serve
    
  4. 启动后IDE下方终端会显示出访问IP和端口
  1. 打开宇信移动平台APP(调试版)

ios系统App:在手机桌面上,长按宇信移动平台APP,在弹出的菜单中,选择扫一扫,在打开的页面中输入终端中的IP即可在外壳中预览页面。

补充: 3.5.1版本后,ios系统App新增开发助手功能,点击进入开发助手,可以通过Web—任意门的方式选择输入终端中的IP或者扫码的方式在外壳中预览页面

android:android系统APP:打开app,摇一摇手机,在弹出的窗口中调试路径输入地址,访问地址即可预览页面.

补充: 3.5.1版本后,android系统APP新增开发助手功能,点击进入开发助手,可以通过Web—任意门的方式选择输入终端中的IP或者扫码的方式在外壳中预览页面

# 通用-移动端真机调试

# 前言

移动端页面调试一直是头疼的问题,iOS由于其封闭的特性和整体较高的性能,整体适配相对好做,调试也因为 safari 的打通变得很方便。而 Android系统,由于版本跨度大,且各家厂商采用自研内核,使得其成为移动端页面问题出现的主要平台。工程师们采用了各种各样的方式来对其进行调试:alert 大法,页面引入或注入VConsole开启移动端控制台,抓包等调试方式,其实我们只需要做一点微小的工作,就可以使用我们熟悉的 Chrome 开发者工具(需要翻墙) edge 开发者工具对移动端页面进行调试,这里推荐edge 开发者工具。

# 安卓系统下的h5真机联调

# 准备工作

  • edge等基于原生 Chromium 内核的浏览器
  • App 内嵌 Webview使用
  • Android系统的移动设备
  • Android系统的移动设备数据线
  • 如果是本地项目联调,需要保证移动设备需与PC设备处于同一网段

# edge 浏览器 Inspect 调试

# 第一步:开启 edge 浏览器 Inspect 调试

在 edge 浏览器地址栏中输入 edge://inspect/#devices 并回车,就可以打开 Inspect 调试界面,此时我们勾选 Discover USB devices 选项便可以看到设备列表。

debug1
# 第二步:然后打开手机中开发者选项并打开USB 调试开关

具体方法自行百度,不同手机有一定区别。以华为手机为例:设置->关于手机->在版本号上连续多点几次,直到出现允许开发人员选项的提示;->再次回到设置菜单,点开发人员选项->在出现的允许开发设置对话框中按确定;->在开发人员选项中点USB调试;->在弹出的是否允许USB调试对话框中按确定,即可打开手机调试模式。使用数据线将手机连接到电脑上,我们就可以在设备列表中看到自己的设备。

# 第三步:访问手机中我们想要调试的页面,第一步inspect页面中便会移动设备打开的页面。
debug2
# 第四步:点击对应页面的 inspect选项,即可打开edge调试工具

接下来你便可以和调试 PC 界面一样通过 edge 进行你所需要的调试,你在手机上的操作会始终保持同步到左侧屏幕上。

debug3

# iOS系统下的h5真机联调

# 该解决方案底层机制由苹果官方提供,以下提供一些开发者整理的最佳实践

# vConsole调试工具

vConsole是一个轻量级、可扩展的移动网页前端开发工具,可查看控制台日志, 查看网络请求, 查看文件元素等,项目中开发模式默认使用该插件。

Last Updated: 4/24/2024, 11:38:34 AM