手把手做一个网络请求监控面板：接口谁最慢一目了然

从需求描述到完整可运行的单页面应用，码道只用了 3 个步骤、约 100 秒。

开篇

在日常前端开发中，监控网络请求的性能是一个高频需求——我们需要知道每个 API 调用了多久、哪些请求拖慢了页面、整体请求的健康状况如何。通常这意味着手写 HTML 表格、CSS 样式、JavaScript 统计逻辑，至少需要 30 分钟到 1 小时。

今天，我们用华为云 CodeArts（码道）AI 编程助手，仅通过一句自然语言描述，就让 AI 自动生成了一个功能完整的网络请求耗时监控面板。本文将完整记录这一过程。

码道是什么

CodeArts（码道） 是华为云推出的 AI 编程助手，基于大语言模型，能够理解自然语言需求并自动生成代码。它支持命令行（CLI）模式，可以集成到任何开发工作流中。

开通码道：https://developer.huaweicloud.cn/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

获取 AK/SK：https://codearts.huaweicloud.cn/portal/settings/cli-auth

码道的核心能力

• 自然语言驱动：用中文描述需求，码道自动理解并实现
• 工具链集成：支持读写文件、执行 Shell 命令，真正的"动手"能力
• 多步骤推理：自动分解复杂任务，逐步完成
• JSON 格式输出：便于自动化和流水线集成

任务描述

向码道下达以下需求（一句话描述）：

实现一个网络请求耗时监控面板，功能包括：

1. 使用 HTML/CSS/JavaScript 构建单页面应用
2. 面板顶部显示总请求数、平均耗时、最快请求、最慢请求四个统计卡片
3. 下方用表格展示每个请求的 URL、方法(GET/POST)、状态码、耗时(ms)、时间戳
4. 模拟 10 个不同的 API 请求（包含成功和失败的请求），用 fetch API 发送
5. 面板实时更新统计数据和请求列表
6. 使用现代化 UI 设计，包含加载动画和状态颜色标识

开发过程

第一步：输入需求

在项目目录下启动码道，传入上述需求。码道随即开始分析并规划实现方案。

第二步：码道自动开发

码道自动执行了以下步骤：

1. 环境探查：通过 ls 命令确认工作目录状态
2. 代码生成：一次性生成完整的 index.html 文件（252 行代码）
3. 结果验证：确认所有功能已实现

整个过程仅用约 100 秒，生成了 252 行代码。

第三步：开发完成

码道完成任务后，输出了详细的功能总结，确认所有需求都已实现。

代码解析

码道生成的代码结构清晰，下面逐一分析关键部分：

1. CSS 变量与暗色主题

:root {
  --bg: #0f172a; --card: #1e293b; --border: #334155;
  --text: #e2e8f0; --text-dim: #94a3b8; --accent: #3b82f6;
  --green: #22c55e; --red: #ef4444; --yellow: #f59e0b;
}

使用 CSS 自定义属性定义了一套完整的暗色主题，包括背景色、卡片色、边框色、文字色和语义色（成功/警告/错误）。

2. 统计卡片布局

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

使用 CSS Grid 实现四列等宽布局，卡片悬浮时有上浮和阴影动效。

3. 10 个模拟 API 请求

const API_REQUESTS = [
  { url: 'https://jsonplaceholder.typicode.com/posts/1', method: 'GET' },
  { url: 'https://jsonplaceholder.typicode.com/users', method: 'GET' },
  { url: 'https://jsonplaceholder.typicode.com/posts', method: 'POST', ... },
  { url: 'https://httpbin.org/status/404', method: 'GET' },
  { url: 'https://httpbin.org/status/500', method: 'GET' },
  { url: 'https://httpbin.org/delay/2', method: 'GET' },
  // ... 共 10 个请求
];

混合使用 jsonplaceholder（正常 API）和 httpbin（模拟 404/500/延迟），覆盖了真实场景中的成功、客户端错误、服务端错误和超时等各类情况。

4. 请求发送与统计更新

async function sendRequest(config) {
  const start = performance.now();
  try {
    const resp = await fetch(config.url, { method: config.method, ... });
    entry.status = resp.status;
    entry.duration = Math.round(performance.now() - start);
  } catch (e) {
    entry.status = 0;
    entry.duration = Math.round(performance.now() - start);
    entry.error = true;
  }
  addRow(entry);
  updateStats();
}

每个请求独立发送，记录耗时和状态，完成后立即更新表格和统计数据。使用 performance.now() 获取高精度时间戳。

5. 状态颜色编码

function getStatusClass(code) {
  if (code >= 200 && code < 300) return 'status-2xx';   // 绿色
  if (code >= 400 && code < 500) return 'status-4xx';   // 黄色
  if (code >= 500) return 'status-5xx';                  // 红色
  return 'status-err';                                    // 红色
}

function getDurationClass(ms) {
  if (ms < 300) return 'duration-fast';                   // 绿色
  if (ms < 800) return 'duration-normal';                 // 蓝色
  if (ms < 1500) return 'duration-slow';                  // 黄色
  return 'duration-vslow';                                 // 红色
}

状态码和耗时都有四级颜色编码，一目了然。

运行效果

在浏览器中打开 index.html，页面自动发送 10 个请求并实时展示结果：

可以看到：

• 顶部四个统计卡片：总请求数 10、平均耗时约 740ms、最快 240ms、最慢 4281ms
• 请求表格：包含 GET 和 POST 方法，状态码 200/201/ERR，耗时从 240ms 到 4281ms
• 状态颜色：200 显示绿色，ERR 显示红色，一目了然
• 进度条：底部渐变色进度条随请求完成逐步填满

码道能力总结

通过本次实战，码道展现了以下能力：

总结

码道 AI 编程助手将"一句话描述需求 → 自动生成完整应用"变成了现实。本次实战中，我们仅用一句中文描述，就让码道生成了一套包含暗色主题、统计面板、实时更新的网络请求监控工具。整个过程无需手写一行代码，真正实现了自然语言驱动的软件开发。

无论是快速原型验证、工具脚本编写，还是学习参考，码道都能大幅提升开发效率。如果你也想体验，访问 华为云 CodeArts 即可免费开通。

本文所有截图均为真实运行截图，代码来自码道实际生成的项目。