美文网首页
前端项目实现手机端调试

前端项目实现手机端调试

作者: 热血沸腾 | 来源:发表于2022-05-12 14:21 被阅读0次

实现效果

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

准备物料

开发工具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

相关文章

  • 前端项目实现手机端调试

    实现效果 手机端浏览器实际预览前端项目 准备物料 开发工具VsCode工程:VueAndroid手机一台Andro...

  • 前端本地代码在手机端显示页面

    有时候我们会遇到这样的项目,以apache为前端服务的手机端项目,这种项目在调试的时候会出现明明电脑调试没毛...

  • 前端手机端调试

    当前端在进行手机端调试的时候,遇到bug,但却不能一眼看出什么问题的时候,手机端又没有控制台,该如何解决呢? 下面...

  • chrome调试手机端页面 -- weinre

    作为前端工程师,需要调试各个端的页面,我们熟悉chrome调试电脑端样式,对手机端却觉得有点无奈 推荐一款工具we...

  • 编程式调试node程序的利器chrome-remote-inte

    简介 chrome-remote-interface是chrome调试协议的第三方调试客户端实现,该项目开源,提供...

  • 调试ios android 手机 上的 H5页面

    1. vConsole h5项目在手机上调试(ios和安卓) 1、在vue 项目中实现手机调试vue中直接使用np...

  • 移动端项目在线调试

    使用browser-sync模块进行手机端调试 使用browser-sync可以让本地项目同步跑在电脑端和任何移动...

  • 手机端调试

    将手机连接到PC的同一个网络 用手机访问PC提供的 HTTP 服务(npm—— node.js ——http-se...

  • 手机端调试

    以前一直用charles调试pc端项目 ,通过map remote配置 可以用域名访问远程接口,不会被限制,通过r...

  • web实现串口调试助手

    最近受朋友之托试图用web前端实现串口调试助手,一开始觉得不太有可行性,以前用过的串口调试助手都是客户端程序。觉得...

网友评论

      本文标题:前端项目实现手机端调试

      本文链接:https://www.haomeiwen.com/subject/ougsurtx.html