先查IP地址是否为电脑局域网真实IP（如192.168.x.x）、Windows防火墙是否放行Code.exe入站连接、手机与电脑是否连同一局域网（非不同VLAN或AP隔离）。
Live Server 插件装完但手机打不开页面？先查这三件事
VSCode 安装 Live Server 后，右键点 Open with Live Server 能在电脑浏览器正常打开，但手机扫码或手动输地址却显示“无法连接”或“该网页无法正常运作”，大概率不是插件没装好，而是网络链路断在了中间。常见卡点就三个：IP 地址用错、防火墙拦截、局域网没对齐。
-
127.0.0.1是本机回环地址，手机根本访问不到——必须换成你电脑的真实局域网 IP（比如192.168.1.105） - Windows 防火墙默认会拦掉 VS Code 的入站请求，尤其更新过系统或重装过插件后容易复位
- 手机连的是公司 Wi-Fi，电脑插的是网线但属于不同 VLAN，或者手机开了“智能切换网络”，实际连的不是同一个广播域
怎么拿到手机能访问的正确 URL？别手输，改配置最稳
Live Server 默认只监听 127.0.0.1，不对外暴露。手动把地址里的 127.0.0.1 换成电脑 IP 虽然可行，但每次端口变、IP 变都要重算，容易出错。更可靠的做法是让插件直接启动时就绑定局域网地址：
- 打开 VS Code 设置（
Ctrl+,），搜索liveServer.settings.useLocalIp - 勾选它，或在
settings.json里加一行："liveServer.settings.useLocalIp": true - 重启 Live Server（先点右下角
Stop Live Server，再点Go Live） - 这时右下角显示的地址就是形如
http://192.168.1.105:5500/index.html的可外访链接
手机访问还是失败？重点看 Windows 防火墙设置
即使 IP 和端口都对，Windows 防火墙仍可能静默拦截 VS Code 的 HTTP 响应。这不是 Live Server 的 bug，而是系统级安全策略。验证方式很简单：让同事用他手机扫你的二维码，如果他也打不开，基本就是防火墙问题。
- 按
Win+R输入wf.msc打开“高级安全 Windows 防火墙” - 左侧点“入站规则”，右侧找名称含
Visual Studio Code或Code.exe的规则 - 双击打开，确认“常规”页签里选的是“允许连接”，且“配置文件”勾选了“域”“专用”“公用”
- 如果没这条规则，就点右侧“新建规则” → 程序 → 选 VS Code 的
Code.exe（通常在C:\Users\{user}\AppData\Local\Programs\Microsoft VS Code\Code.exe）→ 允许连接
真机调试时 viewport 和触摸事件不生效？别信 Chrome 模拟器
Chrome DevTools 的设备模拟（Ctrl+Shift+I → Ctrl+Shift+M）只能测布局缩放和基础媒体查询，对 viewport 的 meta 解析、touchstart 事件触发时机、软键盘弹起逻辑等，和真实手机差异极大。特别是 iOS Safari 的滚动穿透、Android 的 zoom 行为，模拟器完全无法还原。
- 开发阶段必须用真机访问
http://[你的IP]:[端口]/index.html，哪怕只是临时连同一 Wi-Fi - 二维码生成别用随意网站，推荐草料二维码（
cli.im）或本地生成工具，避免中间跳转导致协议降级 - 如果页面用了
fetch或 ES 模块，file://协议（比如右键“在浏览器中打开”）必然失败——Live Server 启的http://才是唯一合法路径
真正卡住人的从来不是“怎么装插件”，而是“为什么明明地址对了却连不上”。IP、防火墙、局域网这三个环节，漏查任何一个，都会让真机预览变成玄学。
