PlaywrightでChromeコンソールログからClaudeへのエラーコピペの手間を無くす
ClaudeへのChromeコンソールログコピペ業を度々行っていましたが、面倒になってきたためPlaywrightを頼りました。
2025.08.03Chromeでアプリを開いて、コンソールログ上のエラーをClaudeに渡す、という手続きはされている方も多いのではないでしょうか。サービス開発室内でも同様の手続きにて解決を進めているメンバーが多くいます。
ただ、回数こなしていくと正直めんどうくさい。そして、たまに遅延読込でコピーしようとした範囲選択バッファが消えます。
(# ﾟДﾟ)<
どうにかしたいなと検索したところ、MCPを使ってPlaywrightでカバー出来ることを知りました。
導入
以下のコマンドにて導入していきます。
% 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
検証プロセス
Claudeを起動させて、Playwrightの後にChromeでの指示を行うだけです。
Geminiに確認したところ、以下のスクリプトを作成してコンソールログをローカルに出力する提案もされましたが、実際はClaudeがPlaywright経由で勝手に取得できるようです。
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
// コンソールログをキャプチャするリスナーを設定
page.on('console', msg => {
// ログのテキストとタイプを出力
console.log(`[${msg.type()}] ${msg.text()}`);
});
// ログを出力するページに移動
await page.goto('https://example.com');
// ページ内のJavaScriptを実行してログを出力
await page.evaluate(() => console.log('Hello from the browser!'));
await browser.close();
})();
あとがき
今回のプロセスは以下の記事を参考にしました。
コンソールからのコピペが減るだけで著しく手間が省けてとても楽になりました。コンソールログ操作でストレスが溜まりがちな方には特におすすめです。
