网络质量和可用性监测面板

一款基于浏览器的 HTTP 网络监测工具，实时可视化展示网站延迟、丢包率和抖动。支持自定义目标、IP 归属地检测及报表导出。纯前端实现，精准模拟真实网页加载体验，有效排查网络故障。

一键打开

界面展示

需求痛点和解决方案

本工具主要解决以下网络诊断和监控中的痛点：

• ICMP Ping 的局限性：传统的 ping 命令使用的是 ICMP 协议，只能测试网络层的连通性。很多时候 ping 通畅（延迟低），但网页打开依然很慢（TCP握手、TLS加密、服务器处理慢）。本工具通过模拟真实的 HTTP 请求来反映用户实际的上网体验。
• 缺乏直观的实时监控：普通用户难以通过命令行直观地看到网络波动、丢包和抖动情况。本工具提供了可视化的图表和仪表盘直观展示。
• 国内外网络环境差异：用户通常需要同时关注国内访问速度和海外访问速度（如 Google, GitHub 等），本工具预设了分组以及自定义监测目标，方便对比。
• 本地环境信息获取：用户需要快速知道自己当前的出口 IP（国内/国外）以及地理位置信息，以判断是否连接到了正确的网络线路，本工具直观展示国内出口和国外出口线路。

功能特点

本工具集成了丰富的功能，主要包括：

多维度监测目标

• 预设列表：内置了大量常用网站，分为“国内”（各省政府站）、“海外”（Google, YouTube, 各国政府站）和“互联网巨头”（GitHub, OpenAI 等）。
• 自定义管理：支持单个添加、批量管理、以及通过 Excel/CSV 表格导入自定义监测网址。

真实 HTTP 延迟测量

• 区分 连接耗时（DNS + TCP + TLS）和 服务器耗时（处理 + 传输）。
• 计算丢包率（Loss）和网络抖动（Jitter）。

可视化展示

• 实时趋势图：使用 Chart.js 绘制动态折线图，支持时间范围切换（30秒 - 24小时）。
• 状态仪表盘：颜色区分状态（在线/离线/慢速），直观显示当前 IP 和地理位置。
• 详细统计表：记录最小/最大/平均延迟、成功率、在线/离线时长及历史记录。

IP 信息探测

• 自动检测本地网络的国内出口 IP 和海外出口 IP。
• 解析目标网站的服务器 IP和地理位置。

配置与数据管理

• 支持导出统计截图（PNG）。
• 支持导入/导出 JSON 配置文件。
• 可调节刷新频率（1秒 - 30秒）。

技术实现

本工具是一个纯前端实现的轻量级应用，技术栈如下：

• 核心语言：HTML5, JavaScript (ES6+)。
• UI 框架：Tailwind CSS 实现了响应式布局，适配手机、平板和桌面端。
• 图表库：Chart.js 配合 chartjs-adapter-date-fns 处理时间轴数据。
• 截图功能：html2canvas 用于将统计表格导出为图片。
• 核心检测逻辑 (pingTarget 函数)：
  • 利用浏览器的 fetch API。
  • 两阶段测试：
    1. 发送 HEAD 请求测量建立连接的耗时（模拟 TCP/TLS 握手）。
    2. 发送 GET 请求测量服务器响应耗时。
  • 使用 mode: 'no-cors' 允许跨域请求（虽然拿不到响应内容，但可以测量 Promise resolve 的时间，从而计算延迟）。
  • 使用 AbortController 处理超时。
• DNS 解析：由于浏览器 JS 无法直接进行 DNS 查询，工具调用了 Cloudflare 的 DNS-over-HTTPS API (https://cloudflare-dns.com/dns-query) 来获取目标域名的 IP。

适应场景

网络运维与排查

• 网络环境或出口切换后，快速判断当前网络环境对特定区域（如华东、北美）或特定服务（如 GitHub, AWS）的连通性。

多出口线路测速

• 测试域名 / CDN 延迟，测试不同网络节点对国内外服务的真实访问延迟和稳定性（丢包/抖动）。

网站可用性监控

• 监控日常使用的网站的在线状态，快速检查网站是否可访问

网络诊断

• 普通用户检查宽带是否正常，区分是“网断了”还是“某个网站挂了”。

不适用场景

本工具不用于：

• 页面内容校验

• 登录、业务流程测试

• 性能或压力测试