AI导哈

浏览器自动化调试工具

一个结合无头浏览器操作与CSSOM检查的Playwright服务，提供全面的样式调试和页面内容提取功能。

  • by hegner123
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 hegner123/shakespeare

使用说明

莎士比亚

用于Playwright浏览器自动化和CSSOM检查的MCP服务器。将基于文本的CSS分析与运行时浏览器检查相结合，以进行全面的样式调试。

特性

  • 导航：在无头Chromium浏览器中打开URL
  • 截图：捕获完整或视口屏幕截图
  • 评估：在页面上下文中执行任意JavaScript
  • 获取计算样式：检索特定元素的计算CSS
  • 查询元素：查找所有匹配的元素并获取其计算样式
  • HTTPS支持：自动接受用于本地开发的自签名证书

安装

npm install
npx playwright install chromium

用法

添加到克劳德代码

claude mcp add --transport stdio shakespeare -- node /path/to/shakespeare/index.js

可用工具

导航

导航到浏览器中的URL。

{
  "url": "https://localhost:5173"
}

截图

截取当前页面的屏幕截图。

{
  "fullPage": true
}

评估

在页面上下文中执行JavaScript。

基本用法：

{
  "script": "document.querySelectorAll('.card').length"
}

输出模式的高级用法：

{
  "script": "document.documentElement.outerHTML",
  "output_mode": "file",
  "output_path": "/path/to/output.html"
}

参数：

  • script （必填）：要执行的JavaScript代码
  • output_mode （可选）：如何处理输出
    • "direct" （默认）：立即返回Claude的上下文
    • "file"：写入磁盘并返回文件路径
  • output_path （可选）：使用时自定义文件路径 output_mode: "file"
  • size_limit （可选）：自动文件模式的字符阈值（默认值：200000≈25%上下文）

get_computerd_styles

获取特定元素的计算CSS样式。

{
  "selector": ".user-card .btn",
  "properties": ["width", "max-width", "color"]
}

如果 properties 省略，返回所有计算样式。

查询元素

查询所有匹配的元素并获取它们的计算样式。

{
  "selector": ".card",
  "properties": ["gap", "padding", "margin"]
}

返回一个数组，其中包含每个匹配元素的计算样式。

关闭浏览器

关闭浏览器实例以释放资源。

{}

工作流

工作流程1：地方发展项目

对于产出较小且可控的开发项目：

// Navigate to local dev server
navigate({ url: "https://localhost:5173" })

// Extract small sections directly
evaluate({
  script: "document.querySelector('.main-content').innerHTML"
})

// Get specific data
evaluate({
  script: `
    Array.from(document.querySelectorAll('.card')).map(el => ({
      class: el.className,
      offsetTop: el.offsetTop,
      offsetHeight: el.offsetHeight
    }))
  `
})

工作流程2：JavaScript渲染文档网站

要从JS渲染的网站获取大型文档，请使用Shakespeare进行提取，然后使用专门的工具进行清理：

// Step 1: Navigate to docs site
navigate({ url: "https://docs.framework.dev" })

// Step 2: Extract HTML to file (auto-triggers if >200k chars)
evaluate({
  script: "document.documentElement.outerHTML",
  output_mode: "file",
  output_path: "/tmp/raw-docs.html"
})

// Step 3: Use specialized cleaning tools
// Option A: Use webfetch-clean MCP tool directly on the URL
// (webfetch-clean handles fetching + cleaning in one step)

// Option B: Use other HTML processing tools on the saved file
// Read tool with processing, pandoc, etc.

// For smaller pages, extract specific sections:
evaluate({
  script: "document.querySelector('main').innerHTML"
})

工作流程3：样式调试

// Navigate to page
navigate({ url: "https://localhost:5173" })

// Take screenshot to see current state
screenshot({ fullPage: true })

// Query all cards to see their gaps
query_elements({
  selector: ".card",
  properties: ["margin-top", "margin-bottom", "gap"]
})

// Get specific element's computed styles
get_computed_styles({
  selector: "#logged-in-state",
  properties: ["gap", "display", "flex-direction"]
})

上下文保护

Shakespeare在提取大型HTML时会自动防止上下文溢出：

自动行为：

  • 20万字符以下：直接返回给Claude（安全，约占上下文的25%）
  • 超过20万个字符：自动切换到文件模式并发出警告
  • 自定义限制：调整 size_limit 参数

尺寸警告：

  • 直接模式：显示字符数和估计的令牌使用情况
  • 文件模式：确认文件写入位置

例子：

// This will auto-write to file if HTML is huge
evaluate({
  script: "document.documentElement.outerHTML"
})

// This allows larger direct output (use cautiously)
evaluate({
  script: "document.documentElement.outerHTML",
  size_limit: 500000  // ~62% of context
})

// Force file output regardless of size
evaluate({
  script: "document.documentElement.outerHTML",
  output_mode: "file",
  output_path: "/path/to/output.html"
})

工具分离

莎士比亚专注于 提取 -其他工具手柄 处理:

  • 莎士比亚：浏览器自动化、JS执行、HTML提取、大小管理
  • webfetch清理：HTML清理（删除脚本/样式/广告），降价转换
  • 读取工具：查看带有行号的已保存文件，部分读取
  • 其他工具：pandoc、html到markdown、自定义处理器

这种分离使每个工具都能在其特定任务中脱颖而出。

组合方法

基于文本的分析（读取工具）：

  • 一次查看所有CSS规则
  • 了解开发人员意图
  • 发现模式和潜在冲突

运行时检查（莎士比亚）：

  • 查看实际渲染的内容
  • 调试特异性和级联问题
  • 验证更改是否有效
  • 提取JS渲染的内容进行分析

这些共同提供了对样式的架构设计和运行时行为的完全可见性。

发展

服务器在stdio传输上运行，并在所有工具调用中维护一个浏览器实例。浏览器在首次使用时会自动启动，并可以通过以下方式明确关闭 close_browser.

许可证

麻省理工学院

相关 MCP