开发预览更新于 2026-05-10

NetworkInspector 网络面板

类 DevTools Network 面板：method/url/status/type/size/time 列；点击行展开右侧详情（headers + body）。

基础用法

requests 数组每项就是一条请求记录。method 字段会自动用 protocol 调色板上色（GET/POST/PUT/PATCH/DELETE）；status 按 2xx/3xx/4xx/5xx 着色。requestHeaders / responseHeaders 接受数组 ({ name, value }[]) 或对象 (Record<string, string>)。

背景视口

方法

URL

状态

类型

大小

耗时

GET

/users/me

200

fetch

1.2 kB

42 ms

POST

/login

201

fetch

320 B

188 ms

GET

/assets/app.js

304

script

0 B

12 ms

GET

/orders?status=open

429

fetch

96 B

78 ms

DELETE

/sessions/abc

ERR

fetch

64 B

240 ms

GEThttps://api.example.com/users/me

Request Headers

Accept	application/json
Authorization	Bearer ***

Response Headers

Content-Type	application/json
Cache-Control	no-store

Response Body

{"id":"u1","name":"alice","role":"admin"}

src/App.vue

<script setup lang="ts">
import { CfNetworkInspector, type NetworkRequest } from '@chufix-design/vue';

const requests: NetworkRequest[] = [
  {
    id: '1',
    method: 'GET',
    url: 'https://api.example.com/users/me',
    status: 200,
    type: 'fetch',
    size: 1248,
    duration: 42,
    requestHeaders: { Accept: 'application/json', Authorization: 'Bearer ***' },
    responseHeaders: { 'Content-Type': 'application/json', 'Cache-Control': 'no-store' },
    responseBody: '{"id":"u1","name":"alice","role":"admin"}',
  },
  {
    id: '2',
    method: 'POST',
    url: 'https://api.example.com/login',
    status: 201,
    type: 'fetch',
    size: 320,
    duration: 188,
    requestBody: '{"user":"alice","password":"***"}',
    responseHeaders: { 'Set-Cookie': 'sid=abc; HttpOnly; Path=/' },
  },
  {
    id: '3',
    method: 'GET',
    url: 'https://cdn.example.com/assets/app.js',
    status: 304,
    type: 'script',
    size: 0,
    duration: 12,
  },
  {
    id: '4',
    method: 'GET',
    url: 'https://api.example.com/orders?status=open',
    status: 429,
    type: 'fetch',
    size: 96,
    duration: 78,
    responseBody: '{"error":"rate_limit","retryAfter":30}',
  },
  {
    id: '5',
    method: 'DELETE',
    url: 'https://api.example.com/sessions/abc',
    status: 500,
    type: 'fetch',
    size: 64,
    duration: 240,
    error: 'internal server error',
  },
];
</script>
<template>
  <CfNetworkInspector :requests="requests" :height="320" initial-selected-id="1" />
</template>

<script setup>
import { CfNetworkInspector } from '@chufix-design/vue';

const requests= [
  {
    id: '1',
    method: 'GET',
    url: 'https://api.example.com/users/me',
    status: 200,
    type: 'fetch',
    size: 1248,
    duration: 42,
    requestHeaders: { Accept: 'application/json', Authorization: 'Bearer ***' },
    responseHeaders: { 'Content-Type': 'application/json', 'Cache-Control': 'no-store' },
    responseBody: '{"id":"u1","name":"alice","role":"admin"}',
  },
  {
    id: '2',
    method: 'POST',
    url: 'https://api.example.com/login',
    status: 201,
    type: 'fetch',
    size: 320,
    duration: 188,
    requestBody: '{"user":"alice","password":"***"}',
    responseHeaders: { 'Set-Cookie': 'sid=abc; HttpOnly; Path=/' },
  },
  {
    id: '3',
    method: 'GET',
    url: 'https://cdn.example.com/assets/app.js',
    status: 304,
    type: 'script',
    size: 0,
    duration: 12,
  },
  {
    id: '4',
    method: 'GET',
    url: 'https://api.example.com/orders?status=open',
    status: 429,
    type: 'fetch',
    size: 96,
    duration: 78,
    responseBody: '{"error":"rate_limit","retryAfter":30}',
  },
  {
    id: '5',
    method: 'DELETE',
    url: 'https://api.example.com/sessions/abc',
    status: 500,
    type: 'fetch',
    size: 64,
    duration: 240,
    error: 'internal server error',
  },
];
</script>
<template>
  <CfNetworkInspector :requests="requests" :height="320" initial-selected-id="1" />
</template>

import { CfNetworkInspector } from '@chufix-design/react';

export default function Demo() {
  const requests: NetworkRequest[] = [
    {
      id: '1',
      method: 'GET',
      url: 'https://api.example.com/users/me',
      status: 200,
      type: 'fetch',
      size: 1248,
      duration: 42,
      requestHeaders: { Accept: 'application/json', Authorization: 'Bearer ***' },
      responseHeaders: { 'Content-Type': 'application/json', 'Cache-Control': 'no-store' },
      responseBody: '{"id":"u1","name":"alice","role":"admin"}',
    },
    {
      id: '2',
      method: 'POST',
      url: 'https://api.example.com/login',
      status: 201,
      type: 'fetch',
      size: 320,
      duration: 188,
      requestBody: '{"user":"alice","password":"***"}',
      responseHeaders: { 'Set-Cookie': 'sid=abc; HttpOnly; Path=/' },
    },
    {
      id: '3',
      method: 'GET',
      url: 'https://cdn.example.com/assets/app.js',
      status: 304,
      type: 'script',
      size: 0,
      duration: 12,
    },
    {
      id: '4',
      method: 'GET',
      url: 'https://api.example.com/orders?status=open',
      status: 429,
      type: 'fetch',
      size: 96,
      duration: 78,
      responseBody: '{"error":"rate_limit","retryAfter":30}',
    },
    {
      id: '5',
      method: 'DELETE',
      url: 'https://api.example.com/sessions/abc',
      status: 500,
      type: 'fetch',
      size: 64,
      duration: 240,
      error: 'internal server error',
    },
  ];
  return (
    <>
      <CfNetworkInspector requests={requests} height={320} initial-selected-id="1" />
    </>
  );
}

import { CfNetworkInspector } from '@chufix-design/react';

export default function Demo() {
  const requests= [
    {
      id: '1',
      method: 'GET',
      url: 'https://api.example.com/users/me',
      status: 200,
      type: 'fetch',
      size: 1248,
      duration: 42,
      requestHeaders: { Accept: 'application/json', Authorization: 'Bearer ***' },
      responseHeaders: { 'Content-Type': 'application/json', 'Cache-Control': 'no-store' },
      responseBody: '{"id":"u1","name":"alice","role":"admin"}',
    },
    {
      id: '2',
      method: 'POST',
      url: 'https://api.example.com/login',
      status: 201,
      type: 'fetch',
      size: 320,
      duration: 188,
      requestBody: '{"user":"alice","password":"***"}',
      responseHeaders: { 'Set-Cookie': 'sid=abc; HttpOnly; Path=/' },
    },
    {
      id: '3',
      method: 'GET',
      url: 'https://cdn.example.com/assets/app.js',
      status: 304,
      type: 'script',
      size: 0,
      duration: 12,
    },
    {
      id: '4',
      method: 'GET',
      url: 'https://api.example.com/orders?status=open',
      status: 429,
      type: 'fetch',
      size: 96,
      duration: 78,
      responseBody: '{"error":"rate_limit","retryAfter":30}',
    },
    {
      id: '5',
      method: 'DELETE',
      url: 'https://api.example.com/sessions/abc',
      status: 500,
      type: 'fetch',
      size: 64,
      duration: 240,
      error: 'internal server error',
    },
  ];
  return (
    <>
      <CfNetworkInspector requests={requests} height={320} initial-selected-id="1" />
    </>
  );
}

API

Props

属性	类型	默认	说明
`requests`	`NetworkRequest[]`	—	请求记录
`height`	`number \| string`	`400`	面板高
`initialSelectedId`	`string`	—	默认展开的请求 id

Events

事件	载荷	说明
`select`	`request \| null`	选中（再次点同一行 → null）