开发者社区> Villin> 正文

手机端webApp开发本地调试环境搭建

简介: 背景 手机端WebApp开发阶段,用chrome devtools模拟手机设备,很多兼容性问题不能提前发现。考虑到很多同学在开发时不便经常发版,方便设备可通过ip地址直接在移动端调试,提前发现问题,且不用发版到 test/pre 环境。
+关注继续查看

背景

这是本人在字节跳动工作时,学习到的经验,记录下来,和大家一起共同学习,有错误的地方往提出宝贵意见。
手机端WebApp开发阶段,用chrome devtools模拟手机设备,很多兼容性问题不能提前发现。
考虑到很多同学在开发时不便经常发版,方便设备可通过ip地址直接在移动端调试,提前发现问题,且不用发版到 test/pre 环境。

环境

开发机与移动测试机需要在同一网段下。

配置步骤

  1. 睁开双眼,找到vue目录中的config里的index.js文件(根据实际文件目录情况)。
    1
  2. 抬起左手,伸出兰花指,往下翻,找到host配置,若配置为'localhost',改成'0.0.0.0'即可。
    2
  3. 保存,重新启动服务。
    3
  4. 查询虚拟机ip地址:在桌面上打开Powershell命令窗口,输入ipconfig,回车。
    4

说明:此方法适合vue-cli 3.0以下的项目,3.0运行后会自动生成Network地址,在测手机上可直接调试。

验证

前提:(手机wifi需要与项目在同一个网络下才可以调试)

  1. 拿出一部可以打王者荣耀的手机,打开一个浏览器,输入你的ip,不要忘记加上项目的端口号,有的项目是需要加上入口名称的:
  1. 这样每次更改代码,保存后,页面就会自动刷新,这样就提高了修改bug的效率,降低了加班引起家暴的风险,多么神奇!!!
  2. 祝你早日成为大牛!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
智能投顾中的基础核心,华尔街老司机手把手教你搭建智能资产配置模型
在不同的模型当中有不同的实现方式。下一节课要讲的BL模型有其他的实现方式,而在今天讲的马克维兹模型当中,通过引入一个用户的风险偏好的变量,这个变量是一个非负数的实数。
1599 0
web profiler 环境搭建
        初尝LAMP,WAMP or MAMP,可能大多数同学会想到使用AppSer套件吧。今天,借着我们的Web Profiler,我想和大家分享的一下LAMP环境搭建(不过这里暂时不需要M)。 一. 环境准备        工欲善其事必先利其器。首先,我们需要列出环境搭建过程中的Requirements and Optional。 1. Apache HTTP Ser
1189 0
Android手机访问web服务器(post请求)
一:客户端—服务器连接操作类(HttpUtil) package com.example.userdatatoweb; import java.util.ArrayList; import java.util.List; import java.util.Map; import java.util.Map.Entry; import java.util.Set; import
1463 0
eclipse部署web项目至本地的tomcat但在webapps中找不到
一、发现问题 在eclipse中新建Dynamic Web Project,配置好本地的tomcat并写好代码后选择Run on Server,但运行后发现在tomcat的安装目录下的webapps并没有出现所建立的工程名字。   二、验证 很明显项目并没有自动部署到Tomcat的Webapps中而是部署在了别的容器中。在内置浏览器中输入http://localhost:8080/
1305 0
+关注
Villin
一个前端小白,大家一起学习
30
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载