前端项目实现手机端调试

实现效果

手机端浏览器实际预览前端项目

准备物料

开发工具VsCode
工程:Vue
Android手机一台
Android手机下载 Android For Firefox 浏览器的app
电脑安装Firefox （版本用最新的即可，当前99）
保证电脑和手机在同一个网络

步骤一 手机打开USB调试，华为手机举例，步骤如下

image.png

image.png

image.png

通过USB数据线连接手机，弹出提示框，选择“xxx文件”

步骤二 2.服务启动： vscode中对应的Vue工程进行启动，如：

npm run serve 得到ip 如图

image.png

步骤三 打开手机上的Firefox ，打开设置，打开USB链接，并且在浏览器输入ip和端口访问

image.png

image.png

image.png

步骤四 打开电脑端的Firefox，右边更多，更多工具

image.png

image.png

image.png

最终如下图就可以调试了

image.png