移动端测试本地HTML文件
有时候在写移动端页面时,需要在移动端进行页面的浏览与测试,但是谷歌浏览器中模拟的跟实际还是有所差别的,一些特殊的手势事件也无法进行测试,这时候就需要在移动端测试。
- 关闭电脑的防火墙
- 打开vs code更改默认端口(端口要大于 1024 建议用 8000 / 8888)
vs code --> 扩展 --> Live Server --> 设置 --> Settings:Port --> 更改默认端口
点击Settings:Port更改默认端口(默认是5500,这里我改为8888)
{
"files.autoSave": "afterDelay",
"liveServer.settings.CustomBrowser": "chrome",
"liveServer.settings.donotShowInfoMsg": true,
"liveServer.settings.port": 8888
}
这时候的web端页面测试地址
http://127.0.0.1:8888 /test.html
- 打开电脑命令提示行输入 ipconfig,查看到此时本机ip地址,如下图
将测试地址中的127.0.0.1更改为电脑ip地址(如:172.20.10.3)。
此时web端页面测试地址为:http://172.20.10.3:8888 /test.html
- 使 PC 与手机处于同一个网络。手机连接电脑 wifi,或者电脑连接手机热点。这里我使用的是电脑连接手机热点。
- 打开草料网址 https://cli.im/ 将 web端页面测试地址 转化为二维码,手机扫描即可。
- 移动端效果图