> ## Documentation Index > Fetch the complete documentation index at: https://mcp.zhcndoc.com/llms.txt > Use this file to discover all available pages before exploring further. # Web 客户端 > 图形化 MCP Inspector 的逐标签页演示 Web 客户端是 Inspector 功能最丰富的界面：这是一个单页应用，由一个小型 Node 服务器提供支持，并由该服务器负责实际的 MCP 连接。它是默认模式，因此不带模式标志运行 `npx @modelcontextprotocol/inspector` 时会进入此界面。 ```bash theme={null} npx @modelcontextprotocol/inspector # 空白启动，在界面中添加服务器 npx @modelcontextprotocol/inspector node build/index.js # 使用临时 stdio 服务器 npx @modelcontextprotocol/inspector --catalog ./mcp.json # 使用目录文件 ``` ## 会话令牌 Web 客户端背后的 Node 服务器会使用每次启动时生成的令牌保护每个 `/api/*` 路由，因为它可以在你的计算机上生成进程。启动器会打印一个包含该令牌的 URL：**请打开该 URL**，不要凭记忆输入 `localhost:6274`。 浏览器会按以下优先级从三个位置获取令牌： 1. `window.__INSPECTOR_API_TOKEN__`，每次加载页面时注入到 `index.html` 中。这使得直接重新加载 URL 或使用书签时仍能正常工作。 2. `?MCP_INSPECTOR_API_TOKEN=...` 查询字符串，这是打印出的 URL 所采用的形式。 3. `sessionStorage`，作为备用方案。 设置 `MCP_INSPECTOR_API_TOKEN` 环境变量可以固定一个已知令牌（适用于脚本化启动），或者设置 `DANGEROUSLY_OMIT_AUTH=true` 以完全禁用检查，但只能在没有其他设备或程序能够访问该端口的计算机上这样做。两者都在[Web 后端环境变量](/docs/2026-07-28/tools/inspector/configuration#web-backend-environment-variables)中有说明。 ## 开发模式 `--dev` 是一个**仅限 Web** 的标志。它会运行 Vite 开发服务器，而不是提供预构建的 bundle；如果你正在开发 Inspector 本身，这一点很重要： ```bash theme={null} mcp-inspector --web --dev ``` 生产环境中的 `--web` 会提供已构建的 bundle。在已发布的软件包中，该 bundle 始终会随包提供；而在全新的源代码检出中，它并不存在，因此运行器会在你首次启动时按需构建它。 ## 标签栏 | 标签 | 显示条件 | 功能 | | ------- | ---------------------------------- | --------------------------------------------- | | **服务器** | 始终 | 服务器列表：添加、编辑、导入、连接以及打开每个服务器的设置。 | | **应用** | 服务器公开 MCP 应用工具 | 在沙盒框架中渲染工具的 UI。 | | **工具** | `tools` 能力 | 浏览架构、填写参数、调用并检查结果。 | | **提示** | `prompts` 能力 | 列出提示、提供参数、预览生成的消息。 | | **资源** | `resources` 能力 | 浏览、读取和订阅资源。 | | **任务** | `capabilities.tasks`（旧时代）或任务扩展（现代） | 跟踪长时间运行的工具调用。 | | **日志** | `logging` 能力 | 服务器的 `notifications/message` 输出，以及与时代相应的级别控制。 | | **协议** | 始终 | JSON-RPC 记录：请求、响应和通知。 | | **网络** | HTTP / SSE 服务器 | 原始 HTTP 视图：状态、标头和正文。 | | **控制台** | stdio 服务器 | 服务器进程的 `stderr`。 | **网络**和**控制台**不会同时出现。旧时代和现代的说明请参阅[协议时代](/docs/2026-07-28/tools/inspector/protocol-eras)。 ### 监控侧边栏 **任务**、**日志**、**协议**、**网络**和**控制台**组成一个\_监控组\_。固定该组后，它们会离开标签栏，移至右侧可调整大小的栏中，这样你就可以在使用工具或资源时监控流量。栏宽度和选中的监控标签会在重新加载后保留。 ## 服务器 “服务器”屏幕是入口。每一行服务器都会显示其传输方式、连接状态，以及一个用于打开该服务器专属设置的控件。 该列表的来源，以及是否可编辑，取决于你的启动方式： | 启动方式 | 服务器列表 | 可编辑？ | | ---------------------------- | ----------------------------------------- | ---- | | `mcp-inspector --web` | 默认目录 `~/.mcp-inspector/mcp.json`，首次启动时初始化 | 是 | | `--catalog ` | 该文件；如果文件不存在，则使用示例服务器初始化 | 是 | | `--config ` | 该文件，只读（不会写入或初始化） | 否 | | `--server-url ` 或位置参数命令 | 一个临时服务器，保存在内存中 | 否 | 首次启动时，Web 客户端会使用两个示例服务器初始化目录：一个作用域为 `/tmp` 的文件系统服务器，以及规范的“everything”参考服务器。有关完整规则（包括 CLI 和 TUI 为何初始化空目录），请参阅[配置和标志](/docs/2026-07-28/tools/inspector/configuration)。 ### 服务器设置 * **协议时代**：`legacy` / `auto` / `modern`。请参阅[协议时代](/docs/2026-07-28/tools/inspector/protocol-eras)。 * **每个请求的日志级别**：现代时代连接默认附加到每个传出请求的级别，或使用 `off` 选择退出（请参阅[日志记录](/docs/2026-07-28/tools/inspector/protocol-eras#logging)）。 * **声明的扩展**：Inspector 在 `capabilities.extensions` 中声明的扩展。一个用于调试的选项：服务器可能会根据你声明的内容，合理地改变其注册的内容。取消选中 Tasks 扩展，然后针对 `test-servers/configs/advertised-extensions-http.json` fixture 重新连接（设置方法请参阅[在本地复现各个时代](/docs/2026-07-28/tools/inspector/protocol-eras#reproducing-each-era-locally)），即可看到某个工具消失。 * **根目录**：通过 `roots` 客户端能力声明的根目录。例如，`@modelcontextprotocol/server-filesystem` 会调用 `roots/list` 来了解其允许访问的目录。 * **请求头**、**超时**和 **OAuth** 字段。 * **逐页获取列表**：关闭时，连接时会自动聚合所有分页中的列表结果；开启时，每个列表只加载第 1 页，并显示 **加载下一页** 控件及 *已加载 N 页* 状态。可使用 `test-servers/configs/pagination-http.json` 复现，该配置会将 12 个工具、资源和提示词分别分页为三页。 ## 工具 选择一个工具以查看其描述、以表单形式呈现的输入架构及其注释。填写表单并调用工具；结果将显示在下方，其中结构化内容、嵌入资源和图像均会以原生方式处理。 在现代版本的服务器上，此屏幕还会显示镜像的 `Mcp-Param-*` 标头、已排除的工具以及独立的 `-32602` 错误面板，相关内容均涵盖在[协议时代](/docs/2026-07-28/tools/inspector/protocol-eras#tools-mirrored-headers-and-excluded-tools)中。 ## 资源 列出资源和资源模板及其 MIME 类型与描述，在选择资源时读取内容，并在支持订阅的服务器上提供**订阅**功能。订阅机制因时代而异；请参阅[资源订阅](/docs/2026-07-28/tools/inspector/protocol-eras#resource-subscriptions)。 ## 提示词 列出带有其参数的提示词模板，并渲染根据你提供的参数生成的消息，这是确认提示词是否产生预期结果的最快方式。 ## 应用 [MCP 应用](/extensions/apps/overview) 是携带 UI 的工具。Apps 标签页会在由**独立端口**提供服务的沙盒 iframe 中渲染一个应用，调用 `ui/*` 桥接，并在侧边面板中显示视图提交的 `ui/message` 和其 `notifications/message` 日志。 * 沙盒端口默认是动态的；如果需要公开或转发该端口，请使用 `MCP_SANDBOX_PORT` 固定它。 * 沙盒受 `frame-ancestors` CSP 限制，并且带方括号的 IPv6 字面量不是有效的 CSP host-source，因此请通过 `localhost`、`127.0.0.1`、主机名或局域网 IPv4 地址访问 Inspector，**不要**通过裸的 `http://[::1]:...` 访问。 * 沙盒 URL 始终使用普通的 `http`，因此 `https://` Inspector 页面会因混合内容而阻止该框架。当前 MCP 应用需要普通的 `http` 源。 请参阅 [Recipes](/docs/2026-07-28/tools/inspector/recipes#reviewing-an-mcp-app)，了解以 CLI 为优先的自动化审查流程。 ## 协议、网络和控制台 这三个选项卡以不同的详细程度显示相同的流量： * **协议**：JSON-RPC 记录。请求与响应配对显示，通知内联显示，[MRTR](/docs/2026-07-28/tools/inspector/protocol-eras#multi-round-tool-results-mrtr) 轮次归为一个会话，并按类别呈现规范错误。 * **网络**：适用于 SSE 和可流式 HTTP 服务器的 HTTP 层。显示状态码、请求和响应标头以及正文。在现代连接中，标准化的 `Mcp-*` 标头会突出显示，并解码哨兵值。 * **控制台**：已连接的 stdio 服务器进程的 `stderr`，大多数 stdio 服务器会将自身的诊断信息输出到这里。 在这些视图中，机密信息会被遮盖，并且可以清除或导出条目。 ## 深层链接 驱动程序（脚本、CI 测试工具，或 CLI 的 [`--print-handoff`](/docs/2026-07-28/tools/inspector/authorization#handing-off-from-the-web-client-to-the-cli)）可以通过一次导航访问一个\_已连接的\_ Inspector： ``` http://127.0.0.1:6274/?serverUrl=&transport=http|sse&autoConnect= ``` | 参数 | 含义 | | ------------- | -------------------------------------------------------------------- | | `serverUrl` | MCP 服务器 URL。仅限 `http:` / `https:`；构造的 `javascript:` 或 `file:` 值会被拒绝。 | | `transport` | `http`（默认）或 `sse`。 | | `autoConnect` | **必需的 CSRF 防护门槛。** 必须等于每次启动时的会话令牌，只有启动服务器的程序知道该令牌。 | 另外三个参数可以将你带到一个\_渲染后的应用\_：`openApp=` 指定工具名称，`appArgs=` 提供其参数（与工具架构的默认值合并），而 `autoOpen=` 会自动触发工具调用。由于 `autoOpen` 会触发调用，因此它与 `autoConnect` 一样带有相同的必需令牌门槛。 ## 主机绑定与来源 默认情况下，Inspector 绑定 `localhost`，并且仅接受来自其端口的环回来源的请求。请将这两个默认设置都视为安全边界，因为后端会在您的计算机上生成进程。 除非设置 `DANGEROUSLY_BIND_ALL_INTERFACES=true`，否则将所有接口绑定到 (`HOST=0.0.0.0`) 会被**拒绝**。绑定到某个\_特定的\_非环回地址时无需选择加入，因为这表示一次有意的单独暴露，而不是同时暴露所有接口。 请参阅[在网络上托管](/docs/2026-07-28/tools/inspector/recipes#hosting-on-a-network)配方以了解完整矩阵，并参阅[配置](/docs/2026-07-28/tools/inspector/configuration#web-backend-environment-variables)了解相关变量。