ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

不用云服务器、不在同一 Wi-Fi,手机也能测试电脑里的网页

不用云服务器、不在同一 Wi-Fi,手机也能测试电脑里的网页 网页在 Windows 上开发完成后电脑浏览器里显示正常并不代表手机端也没有问题。字体是否合适、卡片是否会挤在一起、按钮能否正常点击最好放到真实 Android 手机和移动网络下再检查一次。但测试页面还在本地开发阶段没有域名也没有部署到云服务器。手机关闭 Wi-Fi 后通常无法访问 Windows 上的 127.0.0.1临时购买服务器只为看一眼页面也不划算。这次实操使用星空组网连接 Windows 和 5G 手机让手机通过 Windows 的组网虚拟 IP 打开本地网页并在电脑修改页面后立即查看更新效果。一、这次要解决什么问题现有设备只有一台 Windows 电脑和一部 Android 手机分工如下Windows保存网页文件并运行本地 Web 服务Android 手机关闭 Wi-Fi使用 5G 网络进行真机检查星空组网在两台设备之间建立可达的虚拟网络本地网页负责响应式排版和按钮交互。本次用到的是星空组网的设备互联与虚拟 IP 能力不是子网路由。它解决的是“5G 手机无法直接抵达 Windows 本地开发端口”这一段网络问题页面变成单列、按钮颜色变化和 JavaScript 响应仍由网页代码本身完成。二、注册账号并让两台设备加入同一网络先进入星空组网官网。已有账号可直接登录没有账号则从登录页下方完成免费注册。随后在 Windows 和 Android 手机上安装客户端并登录同一网络。管理平台的成员列表中可以看到 Windows 和 Android 手机均在线。本次 Windows 获得的虚拟 IP 为 192.168.188.1手机为 192.168.188.3。这里的192.168.188.x是星空组网分配的虚拟 IP不是手机当前移动网络的公网地址。后续访问始终使用 Windows 的虚拟 IP192.168.188.1。三、在 Windows 上准备本地测试网页在 Windows 中准备一个包含index.html的项目目录。测试页面设置三个桌面端卡片并用一条媒体查询让窄屏自动切换为单列.grid{display:grid;grid-template-columns:repeat(3,1fr);}media(max-width:640px){.grid{grid-template-columns:1fr;}}页面还放置了一个按钮用于检查手机浏览器能否正常执行 JavaScript。随后在项目目录打开 PowerShell启动本地服务python -m http.server 18090 --bind 0.0.0.00.0.0.0表示服务监听 Windows 的可用网卡18090是本次测试端口。浏览器先访问下面的地址确认服务已经启动http://127.0.0.1:18090图 3版本 A 在 Windows 浏览器中以三列布局显示本地服务端口为 18090。四、只对组网网段开放测试端口如果 Windows 能打开页面而手机无法访问常见原因是 Windows 防火墙拦截了入站连接。以管理员身份打开 PowerShell添加一条范围较小的规则New-NetFirewallRule -DisplayName StarVPN Mobile Preview 18090 -Direction Inbound -Action Allow -Protocol TCP -LocalPort 18090 -RemoteAddress 192.168.188.0/24 -InterfaceAlias StarVPN这条规则只允许星空组网的192.168.188.0/24网段通过 StarVPN 网卡访问 TCP 18090 端口不需要把本地开发服务公开到互联网。五、关闭 Wi-Fi用 5G 打开 Windows 本地页面手机保持星空组网在线关闭 Wi-Fi确认状态栏显示 5G。随后在手机浏览器输入http://192.168.188.1:18090页面成功打开后三列卡片自动变成单列。此时访问链路为5G 手机 → 星空组网 → Windows 虚拟 IP → 本地 Web 服务。图 4手机关闭 Wi-Fi 后通过 5G 打开版本 A页面自动适配为单列布局。Windows 终端同时记录到来自手机虚拟 IP 的请求192.168.188.3 - GET / HTTP/1.1 200这条记录说明请求确实来自组网内的 Android 手机而不是 Windows 本机浏览器。六、修改页面并验证实时更新接着在 Windows 中把标题改为“5G 真机预览已更新”将按钮改成粉橙渐变并保存文件。手机刷新同一个组网地址后即可看到版本 B无需重新上传或部署。若手机浏览器仍显示旧缓存可临时在地址末尾增加查询参数http://192.168.188.1:18090/?v2点击页面按钮后下方出现“按钮响应正常移动端 JavaScript 已运行”说明真实手机浏览器中的交互也可以正常执行。图 5Windows 保存修改后5G 手机立即看到版本 B并完成按钮交互验证。七、结果与使用边界这次实操完成了三个验证Windows 本地网页可以被 5G 手机访问桌面三列布局在真实手机上自动切换为单列Windows 保存修改后手机刷新即可检查新版标题、配色和按钮交互。星空组网在其中承担的是安全连通作用本地项目无需域名、云服务器、端口映射或同一 Wi-Fi手机仍能通过 Windows 的虚拟 IP 进行真机预览。它不会替代 Web 服务也不会自动优化页面布局但能省去临时部署这一层工作让移动端检查更接近实际使用环境。如果只是临时测试结束后可按CtrlC停止本地服务并删除本次添加的 18090 端口防火墙规则后续还要继续真机预览则可以保留。
返回列表