如何在手机上访问电脑web项目进行真机调试
有时候想在自己手机上预览一下开发中网页的效果,就需要使用真机调试,用chrome自带的调试功能是很好的方法,但有时候需要适配一些小众的手机屏幕,这时用chrome就不方便了,下面说一下如何在手机上进行网页预览。
1.手机和电脑连同一个WiFi
注意,这里的WiFi不是指手机连上电脑的热点,而是两者连进别的局域网,比如公司或者家里的WIFI。
2.打开电脑命令行查看ip地址
- win+r,输入cmd,再输入ipconfig,找到“无线局域网适配器 WLAN”一栏,记下ipv4地址。(注意一定是“无线局域网适配器 WLAN”一栏)。
- 电脑上启动web项目。
- 关闭电脑防火墙。
- 手机浏览器输入http:// +ipv4 +端口号
嗯,如果根据上面的步骤你成功访问到项目的话,那确实很幸运,上面是网上流行的做法,但博主一直都是不幸的人,下面说说博主遇到的坑和解决的方法。
1.端口号被占用
一般web项目是在8080端口启用,但有时候如果8080被占用了,就会转到别的端口,如果你想就用8080端口,那就需要先把8080端口的服务先暂停掉。
- 命令行输入netstat -aon|findstr "8080"。
- 记下最右侧的PID(一个数值),比如是3344。
- taskkill /pid:3344。
- 重新启动web项目。
2.关闭防火墙不起作用
emmm,老实说,博主不大懂防火墙的相关原理,如果你遇到这个可以这样设置一下,希望能起作用。
- 打开windows安全中心。(穷人买不起mac)点击公用网络再下面一点的高级设置。
- 在弹出界面点击操作,选择新建入站规则。选择“端口”,下一步,选择“TCP”,“特定本地端口”,输入8080,下一步,选择“允许链接”,下一步,默认的三个都选,下一步,名称和描述随意,点击完成。
emmm,如果这时候还是不能访问,那也许就不是防火墙的锅了。
3.不知道神马错误
如果你走到这一步,那恭喜你已经成为和博主一样不幸的人。但神依然给你留了希望,可以试试最后一个方法。如果你使用vue-cli脚手架,可以这么处理(其他同理)
打开根目录下的config文件夹,打开index.js,
找到dev的host,将localhost改为'0.0.0.0',然后重启项目。
这时你在电脑点击命令行的地址无法访问到项目,在浏览器地址栏把0.0.0.0改为localhost就可以了,但我们终极目标是手机预览,这时只需要在手机上的浏览器地址栏输入
http:// + ipv4 + 端口号 就可以访问了。
结语:如果走到这,还是不行,那请回头看看哪一步没做对,可能是你ipv4输错了,也可能端口你找错了,如果都不是,那你就很有幸成为比博主更不幸的人了,所以还是放弃吧。
(ps:一定要关闭电脑防火墙,全关裸奔那种,关闭一切电脑杀毒软件,当然裸奔完记得把衣服穿上避免着凉,把防火墙都还原为打开状态。)