DEV Community

Cover image for Debug your frontend with MCP
Mike Solomon
Mike Solomon

Posted on

Debug your frontend with MCP

Here's the scenario - you or your colleague is using a preview version of an app. You want to pull knowledge from the browser into your coding agent.

Step 1 - Install Autodock MCP

For this article I've used Claude Code:

claude mcp add --transport http autodock https://autodock.io/api/mcp/streamable-http
Enter fullscreen mode Exit fullscreen mode

autodock.io has instructions for other agents.

When starting the agent, make sure to authenticate, otherwise the MCP server won't work.

Step 2 - Generate a debug snippet

A debug snippet generated by Claude Code

Step 3 - Paste the code snippet into the console

Any site will do, like for example this article!

Pasting the debug snippet into the browser

Step 4 - Debug!

Now you can ask Claude about the browser session.

Debugging the browser in Claude Code

That's it!

Top comments (0)