关键词

浏览器工具Zed编辑器扩展浏览器监控性能审计网页截图

项目简介

Browser Tools Context Server for Zed 是一个 Zed 编辑器的扩展，它集成了 BrowserTools MCP (Model Context Protocol) 服务器。通过此扩展，Zed 编辑器可以获取当前浏览器页面的上下文信息，并执行浏览器相关的操作，例如截图、查看控制台日志、进行性能审计等。它充当 Zed 编辑器与 BrowserTools MCP 服务器之间的桥梁，使得编辑器能够利用浏览器提供的能力增强其辅助功能。

核心功能点:

  • 浏览器信息捕获: 能够捕获当前浏览器页面的截图、控制台日志（包括错误）、网络请求记录等。
  • 浏览器审计: 支持多种浏览器审计功能，包括但不限于：
    • 可访问性审计 (Accessibility)：检查页面是否符合可访问性标准。
    • 性能审计 (Performance)：评估页面性能指标。
    • SEO 审计 (SEO)：分析页面 SEO 优化情况。
    • 最佳实践审计 (Best Practices)：检查页面是否遵循最佳 Web 开发实践。
    • Next.js 审计 (NextJS)：针对 Next.js 应用的特定审计。
  • 浏览器调试: 提供启动综合浏览器调试会话的功能。
  • 与 Zed 编辑器集成: 通过 Zed 编辑器的上下文服务器系统运行，并提供斜杠命令方便用户在编辑器内直接调用浏览器功能。

安装步骤

前提条件:

安装 Zed 扩展 (选择一种方式):

方式一：作为开发扩展安装 (推荐)

  1. 克隆此仓库到本地： 
    git clone https://github.com/mirageN1349/browser-tools-context-server
cd browser-tools-context-server
  2. 打开 Zed 编辑器。
  3. 导航到 "Extensions"（扩展）。
  4. 点击 "Install Dev Extension"（安装开发扩展），然后选择您克隆的 'browser-tools-context-server' 目录。

方式二：从 Zed 扩展注册表安装 (即将推出)

  1. 打开 Zed 编辑器。
  2. 导航到 "Extensions"（扩展）。
  3. 搜索 "BrowserTools Context Server"。
  4. 点击 "Install"（安装）。

安装 Chrome 浏览器扩展:

  1. 下载 BrowserTools Chrome Extension。
  2. 在 Chrome 浏览器中打开 'chrome://extensions/'，开启 "Developer mode"（开发者模式），点击 "Load unpacked"（加载已解压的扩展程序）。
  3. 选择解压后的 Chrome 扩展文件夹。

服务器配置

在 Zed 编辑器的 'settings.json' 文件中添加以下配置：

{
  "context_servers": {
    "browser-tools-context-server": {
      "settings": {
        "port": 3025, // MCP 服务器监听的端口，需要与 Chrome 扩展配置一致
        "host": "127.0.0.1" // MCP 服务器监听的主机地址，通常为本地地址
      }
    }
  }
}

您可以根据需要自定义端口和主机地址，但务必确保 Zed 扩展配置的端口与 Chrome 扩展连接的服务器端口一致。

基本使用方法

  1. 确保 Chrome 浏览器已安装并启用 BrowserTools 扩展。
  2. 打开 Chrome 浏览器，并访问您想要监控或操作的网页。
  3. 打开 Zed 编辑器，并确保 BrowserTools Context Server 扩展已激活。
  4. 在 Zed 编辑器的终端或 Assistant 中，使用以下斜杠命令来调用浏览器工具功能：

可用斜杠命令:

  • '/browser-capture' 命令组 (用于捕获浏览器信息):

    • '/browser-capture screenshot' - 截取当前网页的屏幕截图。
    • '/browser-capture logs' - 查看浏览器控制台日志。
    • '/browser-capture errors' - 查看浏览器控制台错误日志。
    • '/browser-capture network' - 查看浏览器网络请求日志（成功请求）。
    • '/browser-capture network-errors' - 查看浏览器网络请求错误日志。
    • '/browser-capture clear' - 清除浏览器日志记录。
    • '/browser-capture element' - 获取当前选中的 DOM 元素的信息 (需要在 Chrome 扩展中先选择元素)。

  • '/browser-audit' 命令组 (用于执行浏览器审计):

    • '/browser-audit accessibility' - 运行可访问性审计。
    • '/browser-audit performance' - 运行性能审计。
    • '/browser-audit seo' - 运行 SEO 审计。
    • '/browser-audit best-practices' - 运行最佳实践审计。
    • '/browser-audit nextjs' - 运行 Next.js 特定审计 (如果适用)。
    • '/browser-audit all' - 运行所有可用的审计。

  • '/browser-debug' 命令组 (用于浏览器调试):

    • '/browser-debug start' - 启动综合调试器模式。

启动 MCP 服务器:

此扩展会自动在后台启动 MCP 服务器。您也可以手动启动服务器，在终端中运行以下命令：

npx @agentdeskai/[email protected]

(通常情况下无需手动启动，Zed 扩展会自动处理)

重要提示:

  • 首次使用或遇到问题时，请确保 Chrome 浏览器和 Zed 编辑器都已启动，并且 BrowserTools Chrome 扩展已启用。
  • 检查 Zed 扩展和 Chrome 扩展的配置端口是否一致。

信息

分类

开发者工具

访问项目