h5移动端开发中配置真机测试

前言

在前端开发过程中,时常遇到移动端需求。若是每次部署完成后再查看开发效果,可能过于费时费力,因而需要可直接完成真机测试的配置

方法一:无需部署,直接同步本地调试

一:查询电脑本地IP地址

1:ctrl/window+r输入cmd回车,打开命令提示符;
2:输入ipconfig,查看本地ip,具体如下

在这里插入图片描述

二:修改config

修改config中的配置,将host改为本地ip,具体如下:
在这里插入图片描述

三:手机访问链接

1:将手机与电脑连接同一无线
2:重启项目,生成链接,具体如下图:
3:至此即可完成所有配置,手机端访问network即可
在这里插入图片描述

其他方式

借用抓包工具:spy-debugger

方法二:借用vconsole打开控制台

有时候,需要在移动端打开控制台查看打印数据或者接口请求等;

一:下载插件vconsole
npm install vconsole 
二:配置
import VConsole from 'vconsole'; 
const vConsole = new VConsole({ // 配置选项 
    defaultPlugins: ['system', 'network', 'element'], 
    // 默认开启的插件 
    onReady() { 
        console.log('vConsole is ready!'); 
    }, 
});
  • 3
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hyduan200

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值