手机访问和调试同一网络电脑端网页
这是一篇 IT开发配置参考
主要环境：
OS：Windows 10 21H2（WIN 7+ 应该都可以）
VS Code：v1.67.2
Live Server：v5.7.5
在PC上写的网页自然可以用PC浏览器预览调试，若用 VS Code 写，配合 Live Server 插件，还可实现即时预览，无需手动刷新，非常方便。可有时写的网页主要用于移动端，浏览器的F12调试工具里确有移动端模拟器，但不能百分百模拟手机端效果，例如某些使用到微信API的网页的某些特性需在微信里打开才能生效。此时我们就需要直接在手机上访问电脑端部署的网页，下面举例说明如何设置（iPad 等移动端设备同理）。
（0）VS Code 插件配置（最好把 VS Code 和 Live Server 插件都更新到最新版）
VS Code 的插件安装和配置方法网上随便搜搜就一大推，这里不赘述。也可参考我之前的文章：
（1）VS Code 安装好 Live Server 插件，网页在编辑区打开
（2）在编辑区右键，点击"Open with Live Server" (或者使用快捷键，看你的使用习惯)
（2）此时会以设置里指定的浏览器在5500端口打开网页
（3）给本机 Windows 配置网络入站规则
打开控制面板（不一定要像这样打开 直接按Win键输入“控制面板”或“control panel”找到图标直接双击也行）
打开防火墙高级设置(中文翻译版Windows相对位置都是一样的，依次点就行)
鼠标指针压在 "Inbound Rules"(入站规则)上，右键 → New Rule...(新建规则)
规则类型选择"端口"
填写需要被访问的端口号，例如 Live Server 插件默认的启动端口5500
一般可保持默认，直接下一步
一般可保持默认，直接下一步
填写名称和描述，最好认真填一下(自己手工配置的入站规则名称可以采用一个统一的前缀，例如"Dev-")，以免规则配置较多后产生冲突或混淆时不好查找
（4）确保PC和移动端设备（这里以手机为例）连在同一个网段上，一般家里连接同一个WIFI或者同一个路由器派发出来的网络都是同一个网段的（设备较多的公司办公室环境可能不一样，但公司一般有已经专门配置好的开发WIFI，手机直接连那个WIFI即可，如果它和开发机不能互相访问而开发又有这种需要，请直接联系运维部的设备管理大佬给帮忙设置好）
（5）获取本机的IP地址：打开任意终端以及兼容Windows的Shell（例如自带的Cmd、PowerShell 或者 Windows Terminal + PowerShell 7 或者你安装了 Git 的话直接在任意位置下打开 Git Bash 也行）输入 ipconfig 然后回车 (Linux/Mac 是 ifconfig 稍微注意区分一下 一个字母之差...) 下图中PC连接的是有线网络，直接找到输出信息中首次出现的 IPv4 Address 即可，这里可得知本机IP地址为"192.168.2.102" （如果PC是连接的 WIFI 就接着往下看 ipconfig命令的输出信息，找到相应的无线网卡对应的IP地址）
（6）将步骤（2）中浏览器地址栏的URL拷贝到文本编辑器，将IP换成步骤（5）查到的
（7）将替换后的URL通过跨平台APP(QQ/TIM/微信/钉钉)或在线文档发到手机上，此时在手机上应该可以点开该URL访问这个 Live Server 部署在同网络下PC本机上的网页了。调试完毕后在 VS Code 里关闭 Live Server，最好是不要一直挂着，万一之后别的啥软件也用到了 5500 端口会出现端口冲突影响PC的正常使用。
步骤（5）中出现的 Windows Terminal 终端 Powerline 主题配置：
OK，这次关于 手机访问和调试同一网络电脑端网页 的配置参考就到这里。各位朋友如果还有或看到/实践过其他较好的方案（Linux 和 Mac 上的也可以，开发者免不了各种系统都用），欢迎在评论区留言和贴出链接。
最后顺便一提 Bilibili 专栏的原创声明不代表我的真实意愿，它说的是"本文为我原创，本文禁止转载或摘编"，我的意愿是"本文为我原创，但本文在不用于商业盈利的前提下允许转载或摘编，转载请注明出处"。 如发现任何错误（错别字也算），也请不吝赐教于评论区指出，谢谢大家！祝各位编码愉快~~ 赞美太阳！
