chrome-devtools-mcp icon indicating copy to clipboard operation
chrome-devtools-mcp copied to clipboard

Add usage pattern

Open 0x1355 opened this issue 1 month ago • 4 comments

Is your feature request related to a problem? Please describe.

In about 30% of the sessions I tried, agents had difficulty figuring out the right usage pattern at the beginning, burning a lot of tokens unnecessarily.

The most recent session, from a Claude Code agent:

--------------------------------------------------------------------------

It seemed to take you a while to figure out how to use the mcp tool correctly. Is that the case? Do you have instructions from the MCP server on how to use the tools?

● Yes, it took me a while. Looking at my tool definitions, I have the function signatures and parameters for the MCP chrome-devtools tools, but they don't explain the usage pattern:

What the tool docs tell me:

  • take_snapshot() - "Take a text snapshot of the currently selected page"
  • click(uid) - "Clicks on the provided element" with "uid: The uid of an element on the page from the page content snapshot"

What the tool docs DON'T tell me:

  1. Each action (click, fill, etc.) automatically returns a new snapshot with updated UIDs
  2. You should use the UIDs from the most recently returned snapshot, not from a manually taken snapshot
  3. Taking manual snapshots too frequently will cause UIDs to go stale
  4. The correct pattern is: take snapshot → use UIDs from that snapshot OR from action responses → only take new snapshot when you need to see changed state

I had to figure this out through trial and error - kept getting "stale snapshot" errors until I realized each action was returning fresh UIDs that I should be using.

The tool documentation describes what each function does, but not how to use them together as a pattern. Is there additional documentation or instructions from the MCP server that I should be seeing?

Describe the solution you'd like

Some usage pattern instructions on the server?

Describe alternatives you've considered

I am adding that to my custom system prompt for now.

Additional context

No response

0x1355 avatar Nov 19 '25 13:11 0x1355

The tools contain descriptions on how to use them: https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/src/tools/snapshot.ts#L14 specifically it says "Always use the latest snapshot". Could you please provide details about which model are you using? We have not seen models ignoring these instructions in our testing.

OrKoN avatar Nov 19 '25 14:11 OrKoN

Would clarifying that the page content is indeed the latest snapshot be helpful https://github.com/ChromeDevTools/chrome-devtools-mcp/pull/579/files?

OrKoN avatar Nov 19 '25 14:11 OrKoN

Using Sonnet 4.5 in Claude Code.

0x1355 avatar Nov 20 '25 14:11 0x1355

@sebastianbenz would you be able to test with this model to see how it works? (ideally with the fix in https://github.com/ChromeDevTools/chrome-devtools-mcp/pull/579)

OrKoN avatar Nov 20 '25 14:11 OrKoN