视频监控平台web客户端的免密查看视频页：在PC浏览器上如何调试手机上的前端网页（PC上的手机浏览器的开发者工具）

目录

一、手机上做前端页面开发调试

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 微信名片”字样，就会出现我的二维码，欢迎沟通探讨。

---