This lesson's interactive features are locked, please to keep using them

Chrome DevTools MCP

Chrome DevTools MCP can navigate, click, fill forms, inspect semantic page snapshots, and take screenshots. That overlaps with Playwright MCP, to be fair, but Chrome DevTools goes deeper into Chrome itself.

This tool can also inspect:

Console messages and source-mapped errors
Network requests and responses
Lighthouse audits
Performance traces
JavaScript memory usage (with the --memory-debugging flag)

To enable this MCP server in opencode.jsonc:

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "servers": {
      "chrome-devtools": {
        "type": "local",
        "command": [
          "bunx",
          "--bun",
          "chrome-devtools-mcp@latest",
          "--isolated",
        ],
      },
    },
  },
}

You'll need Bun and Google Chrome installed for this to work.

Which to Use

I often use the Playwright MCP for user flows and cross-browser automation, and Chrome DevTools MCP to let my agent dig deeper into browser internals like network requests, console messages, and performance traces.

Chrome DevTools also has optional coordinate-based tools behind the --experimental-vision flag, but the same rule applies: prefer semantic targets when the browser provides them.

Assignment

Fix the playground's missing output when a program fails. This code:

hallucinate(“before the crash”)✨
hallucinate(1 / 0)✨

prints before the crash, then fails with a division by zero runtime error. The page should show both the earlier output and the error, but currently shows neither.

Install Chrome if needed. Tell OpenCode to disable the Playwright MCP server and configure chrome-devtools as shown above.
Have it start the playground on port 8080 if needed, then use Chrome DevTools MCP to run the code above. Tell it to inspect the /run network response and compare it with the blank output pane before editing any code.
Tell it to fix the page so it displays both the earlier output and the runtime error. Repeat the browser flow and inspect the rendered result, making sure the bug is actually fixed.

Tell OpenCode to run and submit the CLI tests from the project root.