如何在手机上访问电脑web项目进行真机调试

有时候想在自己手机上预览一下开发中网页的效果,就需要使用真机调试,用chrome自带的调试功能是很好的方法,但有时候需要适配一些小众的手机屏幕,这时用chrome就不方便了,下面说一下如何在手机上进行网页预览。

1.手机和电脑连同一个WiFi

注意,这里的WiFi不是指手机连上电脑的热点,而是两者连进别的局域网,比如公司或者家里的WIFI。

2.打开电脑命令行查看ip地址

  1. win+r,输入cmd,再输入ipconfig,找到“无线局域网适配器 WLAN”一栏,记下ipv4地址。(注意一定是“无线局域网适配器 WLAN”一栏)。
  2. 电脑上启动web项目。
  3. 关闭电脑防火墙。
  4. 手机浏览器输入http:// +ipv4 +端口号

嗯,如果根据上面的步骤你成功访问到项目的话,那确实很幸运,上面是网上流行的做法,但博主一直都是不幸的人,下面说说博主遇到的坑和解决的方法。

1.端口号被占用

一般web项目是在8080端口启用,但有时候如果8080被占用了,就会转到别的端口,如果你想就用8080端口,那就需要先把8080端口的服务先暂停掉。

  1. 命令行输入netstat -aon|findstr "8080"。
  2. 记下最右侧的PID(一个数值),比如是3344。
  3. taskkill /pid:3344。
  4. 重新启动web项目。

2.关闭防火墙不起作用

emmm,老实说,博主不大懂防火墙的相关原理,如果你遇到这个可以这样设置一下,希望能起作用。

  1. 打开windows安全中心。(穷人买不起mac)点击公用网络再下面一点的高级设置。
  2. 在弹出界面点击操作,选择新建入站规则。选择“端口”,下一步,选择“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:一定要关闭电脑防火墙,全关裸奔那种,关闭一切电脑杀毒软件,当然裸奔完记得把衣服穿上避免着凉,把防火墙都还原为打开状态。)

posted @ 2020-05-07 09:31  想学JS的前端  阅读(4311)  评论(1编辑  收藏  举报