在使用多条 VPN 线路的日常中，经常会遇到一些很实际的问题： 比如，这条线路到底有没有成功连接？我现在是全局代理，还是只代理国外？访问国内走不走代理？
最常用的方式，往往就是打开一个能显示当前 IP 的网页，但大多数 IP 查询站点给的信息都比较浅，无法满足真正需要判断“线路行为”的场景。于是我干脆动手写了一个页面，不光能显示公网 IP，还能分国内和国外路径各测一遍，判断当前网络到底处于什么状态。
下面是这个页面的核心功能介绍，适合开发者、测试人员或者经常折腾网络环境的朋友。
🧩 页面概览
“IP & Network” 是一个使用 PHP 和现代前端技术开发的单页 Web 应用，功能集中但不简单。它不只是告诉你“你的 IP 是 xxx.xxx.xxx.xxx”，而是会进一步解析你连接背后的网络信息，还能动态判断你当前访问网络的路由方式（比如直连、分流还是全局代理）。
🔍 核心功能一览
1. 获取并展示详尽的 IP 信息
这个模块负责告诉你当前公网 IP 以及它背后的各种详细信息，比如地理位置、运营商、ASN 等。具体实现是用两个 GeoIP 数据库联合查询，以获得更精确的结果。
- 首先通过
ipinfo_lite.mmdb获取 IP 地址、国家、省份、城市、ASN 信息等。 - 如果检测到你用的是 IPv4，那么还会再用
IP2Location-Lite进行第二次查询（它能提供更详细的经纬度、时区等信息）。
展示的字段包括：
- 公网 IP（从
$_SERVER['REMOTE_ADDR']获取） - ASN 编号和所属组织
- 地理位置信息（国家 / 城市 / 经纬度）
- 所在时区
- 浏览器 User-Agent（顺便显示一下你设备的 UA 标识）
2. 客户端网络诊断工具
这一部分是我最在意的，也是大多数同类工具没有的。它完全在前端用 JavaScript 实现，用来判断你在访问国内和国外时走的是哪条网络出口。
国内路径 IP 探测（WebRTC）
通过调用一组中国大陆的 STUN 服务器，比如：
stun.miwifi.comstun.qq.comstun.top.telecom.cn
借助 WebRTC 获取你访问国内服务时的出口 IP，这个 IP 很可能是你的“真实网络”或者是 VPN 的国内节点。
国际路径 IP 探测（HTTP Fetch）
然后用 fetch() 去请求 Cloudflare 提供的 1.0.0.1/cdn-cgi/trace 接口，这里返回的是你访问国际服务时的出口 IP，能有效反映是否走了代理。
自动判断网络模式
页面会对比国内和国外两个探测结果，然后智能判断你的网络类型，例如：
- “直连网络 / 全局代理”
- “智能分流代理”
- “仅国内可达（国外访问被阻断）”
🎨 用户界面体验
虽然这是一个偏工具向的页面，但我也尽量做了些 UI 和体验上的打磨：
- 响应式布局：在电脑、平板和手机上都有良好显示，双栏/单栏自适应。
- 地图定位：只要能获取到经纬度，就会用 Leaflet.js 自动显示地图，并在你的定位点打上标记。
- 点击复制 IP：所有关键 IP（主 IP、国内 IP、国外 IP）都可以一键复制，并且有“已复制”的视觉反馈。
- 亮 / 暗模式切换：内置了主题切换按钮，自动保存你的偏好设置（使用
localStorage）。
⚙️ 技术栈一览
- 后端：PHP 7.x+
- 前端：原生 HTML + CSS + JavaScript (ES6+)
- 用到的核心库：
maxmind-db/reader：读取 GeoIP 数据库的 PHP 库Leaflet.js：轻量级地图组件Feather Icons：一套 SVG 图标库，简洁又好看
✍️ 最后
这个页面对我来说，是一个常驻浏览器书签的必备工具，尤其在切换或调试 VPN、想确认线路模式的时候特别有用。