成都网站免费制作wordpress pinterest
目录
一、手机上做前端页面开发调试
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 微信名片”字样，就会出现我的二维码，欢迎沟通探讨。