码农日记

薄洪涛的个人博客

vue如何在移动端调试

    最近配合做vue的项目开发,我们前端遇到了一些问题,在调试android和ios样式兼容的时候,需要在手机上调试,但是又需要部署包发到服务器上,然后才能看到样式;十分繁琐,现在我就教大家如何在本地调试;

    第一步,打开package.json文件,找到下面这段代码,加上--host 自己的局域网ip

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 192.168.50.214", 
  "start": "npm run dev",
  "lint": "eslint --ext .js,.vue src",
  "build": "node build/build.js"
},

    第二步,重启服务,nmp run dev

打开手机,输入你电脑的ip+端口,比如我的是http://192.168.50.214:8080 就可以访问了

如果想看console信息,或者想看网络请求怎么办呢?很简单,抓包就可以了,请看教程

  1. 安装抓包工具 npm install spy-debugger -g

  2. 手机和电脑连接同一个网络 ,手机设置代理,就是设置--wifi那里,选择你连接的网络,有个代理,选择手动,ip输入你电脑的局域网ip,端口按照第三条的命令的结果输入

  3. 执行 spy-debugger,记住,这里弹出的ip是不准确的,请用ipconfig或者ip addr获取你的ip

  4. 等待就可以了,手机请求接口

image.png

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Powered By Z-BlogPHP 1.7.3

版权所有 | 转载请标明出处