目录
一、手机上做前端页面开发调试
1、背景
2、视频监控平台AS-V1000的视频分享页
3、调试手机前端页面代码的条件
二、手机端的准备工作
1、手机准备
2、手机的开发者模式
3、PC和手机的连接
(1)进入调试模式
(2)选择PC和手机的连接方式
三、在PC端调试手机端的前端页面
1、在PC上,进入调试状态
2、连接上手机及其状态
3、在PC上显示手机上前端网页的调试页面
(1)条件
(2)PC上的操作
(3)PC上显示的调试页面
四、参考文档
一、手机上做前端页面开发调试
1、背景
基于AS-V1000视频平台制作的视频分享页,可以在手机浏览器和电脑浏览器打开,该视频分享页输入URL后可以免登录观看相应的视频。
然而电脑网页可以通过开发者工具调试,但是手机网页却无法这么方便地显示调试信息。手机端出现错误,比如看不到视频画面等,一些手机网页端出现的bug问题,非常不好定位;为了解决这个问题,需要能调试手机上的前端页面,因此我们找到了方法可以使用PC远程调试手机端的前端页面。
2、视频监控平台AS-V1000的视频分享页
视频监控平台的web分享页,实现的功能包括:PTZ控制,免密视频浏览,语音对讲,视频水印等等。如下图所示:
有兴趣的可以参考前面的文章:
《视频监控平台-web客户端分享页实现PTZ控制,免密视频浏览,语音对讲,实时分享功能介绍》
3、调试手机前端页面代码的条件
远程调试方法需要满足的条件如下:
(1)手机进入开发者模式和usb调试模式。
(2)电脑和手机都有相同的浏览器,比如edge,且电脑上的edge版本比手机上的版本更新。
(3)手机用数据线对接电脑。
二、手机端的准备工作
1、手机准备
准备的手机是华为MATE40E,OS是鸿蒙4.0.0版本。接下来以它为例介绍手机的配置:如何进开发者模式和打开usb调试模式。
2、手机的开发者模式
打开设置,选择“关于手机”,连续点击下图所示位置7次,输入密码确认后就能进入开发者模式。如下图示:
3、PC和手机的连接
(1)进入调试模式
打开开发者模式后,我们才可以打开usb调试模式。
在上节的界面中,选择返回,进入设置页面,点击“系统与更新”。下拉选择开发人员选项。在调试栏中打开usb调试即可。如下图所示:
(2)选择PC和手机的连接方式
通过手机的数据线连接调试电脑和手机,在手机上选择“传输文件或者传输照片”都可以;不可选择“仅充电”。如下图所示:
三、在PC端调试手机端的前端页面
1、在PC上,进入调试状态
电脑上打开edge,在地址栏上输入:
edge://inspect/#devices
然耨,进入下图所示页面(目前电脑没有连接手机,因此Remote Target 没有任何设备。):
2、连接上手机及其状态
连接上手机后,页面就会显示该手机的型号代码,如下图所示:
3、在PC上显示手机上前端网页的调试页面
(1)条件
手机端已经打开浏览器,并访问了需要调试的视频分享页。
(2)PC上的操作
在(1)的条件完成后,在PC上显示如下页面:
其中新增加的部分为最下面的网页url和几个连接,其中网页url就是手机浏览器打开的分享页的网页,点击inspect进入下一步。
(3)PC上显示的调试页面
如下图,为inspect后显示的页面效果,显然左边是手机上的网页显示,右边是调试信息,类似PC上浏览器的开发者工具显示的效果。
至此,我们就可以像在PC上一样调试手机上的前端网页了。
四、参考文档
《视频监控平台-web客户端分享页实现PTZ控制,免密视频浏览,语音对讲,实时分享功能介绍》
文章正下方可以看到我的联系方式:鼠标“点击” 下面的 “威迪斯特-就是video system 微信名片”字样,就会出现我的二维码,欢迎沟通探讨。