Claude Code + Gasoline: Fast Bug Triage Setup

If you want your assistant to debug what is actually happening in the browser, this setup is for you.

This walkthrough helps first-time users connect Claude Code to Gasoline Agentic Devtools and run a real bug triage loop.

Quick Terms

• Bug triage: Sorting and diagnosing issues quickly by impact and cause.
• MCP (Model Context Protocol): Standard for connecting AI assistants to tools. https://modelcontextprotocol.io/specification/
• Tool call: A structured request from assistant to an external capability.

What You’ll Achieve

By the end, you can ask Claude Code:

“Find browser errors, inspect failing network calls, and suggest a fix.”

Step-by-Step

Step 1. Confirm Gasoline is available

npx -y gasoline-mcp --help

Step 2. Configure Claude Code MCP entry

Use your Claude Code MCP config and add a server named gasoline.

{
  "mcpServers": {
    "gasoline": {
      "command": "npx",
      "args": ["-y", "gasoline-mcp"]
    }
  }
}

Step 3. Open your app and run first triage prompts

observe({what: "errors"})
observe({what: "network_bodies", status_min: 400})

Step 4. Turn diagnosis into artifact

generate({what: "reproduction"})
generate({what: "test"})

Easy First Prompt You Can Reuse

“Please triage this flow end to end: open page, reproduce issue, collect logs and failing requests, and propose a minimal fix.”

Image and Diagram Callouts

[Image Idea] Screenshot of MCP config snippet in Claude Code setup screen.

[Diagram Idea] Triage loop: prompt -> observe -> analyze -> generate artifact.

You’re Shipping with Better Feedback Loops

This setup turns your assistant into a practical debugging partner. Gasoline Agentic Devtools gives Claude Code the runtime visibility it needs.