Eliminating the hassle of copying and pasting errors from Chrome console logs to Claude using Playwright

Many of you probably open apps in Chrome and share console log errors with Claude. Many team members in the Service Development Department also follow this same procedure to resolve issues.

But honestly, it gets tedious after doing it repeatedly. And sometimes the selected text buffer disappears due to delayed loading when trying to copy.

(# ﾟДﾟ)<

Looking for a better solution, I found that we can handle this using Playwright with MCP.

Setup

Install with the following commands:

			
			% claude mcp add-json playwright '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'
% claude mcp get playwright
playwright:
  Scope: Local (private to you in this project)

To remove this server, run: claude mcp remove "playwright" -s local
% npx playwright install chrome

		

Verification Process

Just launch Claude and give Chrome instructions after Playwright.

When I checked with Gemini, they suggested creating the following script to output console logs locally, but in reality, Claude can retrieve them automatically via Playwright:

			
			const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  // Set listener to capture console logs
  page.on('console', msg => {
    // Output log text and type
    console.log(`[${msg.type()}] ${msg.text()}`);
  });

  // Navigate to a page that outputs logs
  await page.goto('https://example.com');

  // Execute JavaScript in the page to output logs
  await page.evaluate(() => console.log('Hello from the browser!'));

  await browser.close();
})();

		

Conclusion

I referenced the following article for this process:

Just eliminating the need to copy and paste from the console significantly reduces effort and makes things much easier. I especially recommend this for anyone who gets stressed by console log operations.