[{"data":1,"prerenderedAt":780},["ShallowReactive",2],{"content-/chrome-devtools-vs-playwright-mcp":3,"all-pages-for-dir":759,"related-/chrome-devtools-vs-playwright-mcp":760,"og-image-/chrome-devtools-vs-playwright-mcp":779},{"id":4,"title":5,"body":6,"category":743,"concepts":744,"description":745,"extension":746,"meta":747,"navigation":302,"ogImage":744,"path":748,"project_name":744,"published":749,"publishedAt":750,"seo":751,"source":744,"stem":752,"tags":753,"todo":757,"unpublished":749,"updatedAt":744,"__hash__":758},"pages/2026-01/2026-01-08/chrome-devtools-vs-playwright-mcp.md","Chrome DevTools MCP vs Playwright MCP: 用途別の使い分けガイド",{"type":7,"value":8,"toc":715},"minimark",[9,13,17,22,80,83,166,169,173,202,205,222,225,236,239,332,341,344,347,373,376,393,396,402,405,433,436,439,444,450,458,462,468,476,479,483,491,495,506,509,512,517,520,531,537,541,545,547,558,561,565,567,578,581,584,596,648,651,674,677,680,711],[10,11,5],"h1",{"id":12},"chrome-devtools-mcp-vs-playwright-mcp-用途別の使い分けガイド",[14,15,16],"p",{},"Claude Codeでブラウザを操作するMCPには、主に2つの選択肢がある。それぞれ得意分野が異なるため、用途に応じた使い分けが重要。",[18,19,21],"h2",{"id":20},"結論用途別の推奨","結論：用途別の推奨",[23,24,25,38],"table",{},[26,27,28],"thead",{},[29,30,31,35],"tr",{},[32,33,34],"th",{},"用途",[32,36,37],{},"推奨MCP",[39,40,41,50,57,65,72],"tbody",{},[29,42,43,47],{},[44,45,46],"td",{},"ログイン済みサイトの操作",[44,48,49],{},"Chrome DevTools",[29,51,52,55],{},[44,53,54],{},"パフォーマンス分析・デバッグ",[44,56,49],{},[29,58,59,62],{},[44,60,61],{},"UIテスト・自動化スクリプト",[44,63,64],{},"Playwright",[29,66,67,70],{},[44,68,69],{},"クロスブラウザテスト",[44,71,64],{},[29,73,74,77],{},[44,75,76],{},"スクレイピング",[44,78,79],{},"どちらでも可",[18,81,82],{"id":82},"概要比較",[23,84,85,98],{},[26,86,87],{},[29,88,89,92,95],{},[32,90,91],{},"項目",[32,93,94],{},"Chrome DevTools MCP",[32,96,97],{},"Playwright MCP",[39,99,100,111,122,133,144,155],{},[29,101,102,105,108],{},[44,103,104],{},"提供元",[44,106,107],{},"Google (Chrome DevToolsチーム)",[44,109,110],{},"Microsoft",[29,112,113,116,119],{},[44,114,115],{},"接続方式",[44,117,118],{},"既存Chromeに接続",[44,120,121],{},"新規ブラウザ起動",[29,123,124,127,130],{},[44,125,126],{},"ログイン状態",[44,128,129],{},"維持可能",[44,131,132],{},"毎回クリーン",[29,134,135,138,141],{},[44,136,137],{},"ブラウザ",[44,139,140],{},"Chromeのみ",[44,142,143],{},"Chrome/Firefox/Safari",[29,145,146,149,152],{},[44,147,148],{},"ツール数",[44,150,151],{},"26個 (18.0kトークン)",[44,153,154],{},"21個 (13.7kトークン)",[29,156,157,160,163],{},[44,158,159],{},"主な用途",[44,161,162],{},"デバッグ・分析",[44,164,165],{},"UI自動化・テスト",[18,167,94],{"id":168},"chrome-devtools-mcp",[170,171,172],"h3",{"id":172},"特徴",[174,175,176,184,190,196],"ul",{},[177,178,179,183],"li",{},[180,181,182],"strong",{},"既存ブラウザに接続",": リモートデバッグポートを開いたChromeに接続",[177,185,186,189],{},[180,187,188],{},"ログイン状態を維持",": 認証済みセッションをそのまま使える",[177,191,192,195],{},[180,193,194],{},"デバッグ機能が充実",": ネットワーク監視、コンソールログ、パフォーマンストレース",[177,197,198,201],{},[180,199,200],{},"追加ダウンロード不要",": 普段使っているChromeをそのまま使用",[170,203,204],{"id":204},"得意な場面",[174,206,207,210,213,216,219],{},[177,208,209],{},"マネーフォワードなど、ログインが必要なサイトの操作",[177,211,212],{},"Core Web Vitals の測定・分析",[177,214,215],{},"ネットワークリクエストのデバッグ",[177,217,218],{},"コンソールエラーの監視",[177,220,221],{},"開発中のサイトの動作確認",[170,223,224],{"id":224},"主なツール",[226,227,232],"pre",{"className":228,"code":230,"language":231},[229],"language-text","mcp__chrome-devtools__new_page         # 新しいページを開く\nmcp__chrome-devtools__navigate_page    # URLに移動\nmcp__chrome-devtools__click            # 要素をクリック\nmcp__chrome-devtools__fill             # フォーム入力\nmcp__chrome-devtools__take_screenshot  # スクリーンショット\nmcp__chrome-devtools__list_network_requests  # ネットワーク監視\nmcp__chrome-devtools__performance_start_trace  # パフォーマンス計測\n","text",[233,234,230],"code",{"__ignoreMap":235},"",[170,237,238],{"id":238},"セットアップ",[226,240,244],{"className":241,"code":242,"language":243,"meta":235,"style":235},"language-bash shiki shiki-themes vitesse-light vitesse-light","# Windows環境での設定\nclaude mcp add chrome-devtools -- cmd /c npx -y chrome-devtools-mcp@latest --browserUrl http://127.0.0.1:9223\n\n# Chromeをデバッグモードで起動\nstart \"\" \"C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe\" --remote-debugging-port=9223\n","bash",[233,245,246,255,297,304,310],{"__ignoreMap":235},[247,248,251],"span",{"class":249,"line":250},"line",1,[247,252,254],{"class":253},"sxvE3","# Windows環境での設定\n",[247,256,258,262,266,269,272,276,279,282,285,288,291,294],{"class":249,"line":257},2,[247,259,261],{"class":260},"senZ8","claude",[247,263,265],{"class":264},"sdGka"," mcp",[247,267,268],{"class":264}," add",[247,270,271],{"class":264}," chrome-devtools",[247,273,275],{"class":274},"snbK4"," --",[247,277,278],{"class":264}," cmd",[247,280,281],{"class":264}," /c",[247,283,284],{"class":264}," npx",[247,286,287],{"class":274}," -y",[247,289,290],{"class":264}," chrome-devtools-mcp@latest",[247,292,293],{"class":274}," --browserUrl",[247,295,296],{"class":264}," http://127.0.0.1:9223\n",[247,298,300],{"class":249,"line":299},3,[247,301,303],{"emptyLinePlaceholder":302},true,"\n",[247,305,307],{"class":249,"line":306},4,[247,308,309],{"class":253},"# Chromeをデバッグモードで起動\n",[247,311,313,316,320,323,326,329],{"class":249,"line":312},5,[247,314,315],{"class":260},"start",[247,317,319],{"class":318},"sMJiu"," \"\"",[247,321,322],{"class":318}," \"",[247,324,325],{"class":264},"C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",[247,327,328],{"class":318},"\"",[247,330,331],{"class":274}," --remote-debugging-port=9223\n",[14,333,334,335,340],{},"詳細は ",[336,337,339],"a",{"href":338},"/chrome-devtools-mcp-windows-setup","Windows環境でのChrome DevTools MCP設定ガイド"," を参照。",[18,342,97],{"id":343},"playwright-mcp",[170,345,172],{"id":346},"特徴-1",[174,348,349,355,361,367],{},[177,350,351,354],{},[180,352,353],{},"新規ブラウザインスタンス",": 毎回クリーンな状態から開始",[177,356,357,360],{},[180,358,359],{},"アクセシビリティツリー使用",": スクリーンショット不要でLLMに優しい",[177,362,363,366],{},[180,364,365],{},"クロスブラウザ対応",": Chrome, Firefox, Safari (WebKit) をサポート",[177,368,369,372],{},[180,370,371],{},"堅牢な待機処理",": 要素の出現を自動で待機",[170,374,204],{"id":375},"得意な場面-1",[174,377,378,381,384,387,390],{},[177,379,380],{},"E2Eテストの自動化",[177,382,383],{},"クロスブラウザでの動作検証",[177,385,386],{},"決定論的なUI操作",[177,388,389],{},"CI/CDパイプラインでのテスト",[177,391,392],{},"ヘッドレスでのバッチ処理",[170,394,224],{"id":395},"主なツール-1",[226,397,400],{"className":398,"code":399,"language":231},[229],"browser_navigate     # URLに移動\nbrowser_click        # 要素をクリック\nbrowser_type         # テキスト入力\nbrowser_screenshot   # スクリーンショット\nbrowser_snapshot     # アクセシビリティスナップショット\nbrowser_wait         # 要素待機\n",[233,401,399],{"__ignoreMap":235},[170,403,238],{"id":404},"セットアップ-1",[226,406,408],{"className":241,"code":407,"language":243,"meta":235,"style":235},"# Claude Codeでの設定\nclaude mcp add playwright -- npx @playwright/mcp@latest\n",[233,409,410,415],{"__ignoreMap":235},[247,411,412],{"class":249,"line":250},[247,413,414],{"class":253},"# Claude Codeでの設定\n",[247,416,417,419,421,423,426,428,430],{"class":249,"line":257},[247,418,261],{"class":260},[247,420,265],{"class":264},[247,422,268],{"class":264},[247,424,425],{"class":264}," playwright",[247,427,275],{"class":274},[247,429,284],{"class":264},[247,431,432],{"class":264}," @playwright/mcp@latest\n",[18,434,435],{"id":435},"技術的な違い",[170,437,438],{"id":438},"ブラウザ接続方式",[14,440,441,443],{},[180,442,94],{},":",[226,445,448],{"className":446,"code":447,"language":231},[229],"[Claude Code] → [MCP Server] → [Chrome DevTools Protocol] → [既存Chrome]\n",[233,449,447],{"__ignoreMap":235},[174,451,452,455],{},[177,453,454],{},"既にログインしているChromeセッションを操作",[177,456,457],{},"Cookie、LocalStorage、セッションがそのまま使える",[14,459,460,443],{},[180,461,97],{},[226,463,466],{"className":464,"code":465,"language":231},[229],"[Claude Code] → [MCP Server] → [Playwright] → [新規ブラウザインスタンス]\n",[233,467,465],{"__ignoreMap":235},[174,469,470,473],{},[177,471,472],{},"毎回新しいブラウザを起動",[177,474,475],{},"クリーンな状態から開始（ログイン不要なサイト向け）",[170,477,478],{"id":478},"ページ認識方式",[14,480,481,443],{},[180,482,94],{},[174,484,485,488],{},[177,486,487],{},"DOMベース + スクリーンショット",[177,489,490],{},"要素のセレクタ指定が必要な場合あり",[14,492,493,443],{},[180,494,97],{},[174,496,497,500,503],{},[177,498,499],{},"アクセシビリティツリーベース",[177,501,502],{},"LLMが構造化データとして直接処理",[177,504,505],{},"ビジョンモデル不要",[18,507,508],{"id":508},"ユースケース別の選択",[170,510,511],{"id":511},"マネーフォワードにログインして操作したい",[14,513,514,515],{},"→ ",[180,516,94],{},[14,518,519],{},"理由：",[174,521,522,525,528],{},[177,523,524],{},"既にログイン済みのChromeセッションを使える",[177,526,527],{},"2段階認証済みの状態を維持できる",[177,529,530],{},"Cookie/セッションがそのまま使える",[226,532,535],{"className":533,"code":534,"language":231},[229],"# 操作例\n1. Chromeでマネーフォワードにログイン済みの状態を維持\n2. Chrome DevTools MCPで接続\n3. Claude Codeから「マネーフォワードの今月の支出を確認して」\n",[233,536,534],{"__ignoreMap":235},[170,538,540],{"id":539},"自社サイトのuiテストを自動化したい","自社サイトのUIテストを自動化したい",[14,542,514,543],{},[180,544,97],{},[14,546,519],{},[174,548,549,552,555],{},[177,550,551],{},"毎回クリーンな状態でテスト可能",[177,553,554],{},"クロスブラウザでの検証",[177,556,557],{},"CI/CDとの統合が容易",[170,559,560],{"id":560},"開発中のサイトのパフォーマンスを計測したい",[14,562,514,563],{},[180,564,94],{},[14,566,519],{},[174,568,569,572,575],{},[177,570,571],{},"パフォーマンストレース機能",[177,573,574],{},"Core Web Vitals の測定",[177,576,577],{},"ネットワークウォーターフォール分析",[18,579,580],{"id":580},"両方を使う場合",[14,582,583],{},"QA・開発チームでは両方を併用するのが効果的だ。",[174,585,586,591],{},[177,587,588,590],{},[180,589,94],{},": デバッグ、パフォーマンス分析、ログイン済みサイト操作",[177,592,593,595],{},[180,594,97],{},": 自動テスト、クロスブラウザ検証、CI/CD統合",[226,597,599],{"className":241,"code":598,"language":243,"meta":235,"style":235},"# 両方セットアップ\nclaude mcp add chrome-devtools -- cmd /c npx -y chrome-devtools-mcp@latest --browserUrl http://127.0.0.1:9223\nclaude mcp add playwright -- npx @playwright/mcp@latest\n",[233,600,601,606,632],{"__ignoreMap":235},[247,602,603],{"class":249,"line":250},[247,604,605],{"class":253},"# 両方セットアップ\n",[247,607,608,610,612,614,616,618,620,622,624,626,628,630],{"class":249,"line":257},[247,609,261],{"class":260},[247,611,265],{"class":264},[247,613,268],{"class":264},[247,615,271],{"class":264},[247,617,275],{"class":274},[247,619,278],{"class":264},[247,621,281],{"class":264},[247,623,284],{"class":264},[247,625,287],{"class":274},[247,627,290],{"class":264},[247,629,293],{"class":274},[247,631,296],{"class":264},[247,633,634,636,638,640,642,644,646],{"class":249,"line":299},[247,635,261],{"class":260},[247,637,265],{"class":264},[247,639,268],{"class":264},[247,641,425],{"class":264},[247,643,275],{"class":274},[247,645,284],{"class":264},[247,647,432],{"class":264},[18,649,650],{"id":650},"まとめ",[174,652,653,659,665,670],{},[177,654,655,658],{},[180,656,657],{},"ログイン済みサイトを操作したい"," → Chrome DevTools MCP",[177,660,661,664],{},[180,662,663],{},"UIテスト・自動化を回したい"," → Playwright MCP",[177,666,667,658],{},[180,668,669],{},"デバッグ・パフォーマンス分析",[177,671,672,664],{},[180,673,365],{},[14,675,676],{},"用途に応じて使い分け、必要なら両方導入するのがベスト。",[18,678,679],{"id":679},"参考",[174,681,682,690,697,704],{},[177,683,684],{},[336,685,689],{"href":686,"rel":687},"https://github.com/ChromeDevTools/chrome-devtools-mcp",[688],"nofollow","Chrome DevTools MCP GitHub",[177,691,692],{},[336,693,696],{"href":694,"rel":695},"https://github.com/microsoft/playwright-mcp",[688],"Playwright MCP GitHub",[177,698,699],{},[336,700,703],{"href":701,"rel":702},"https://www.scrapeless.com/en/blog/mcp-integration-guide",[688],"MCP Integration Guide: Chrome DevTools, Playwright, and Scrapeless Browser Explained",[177,705,706],{},[336,707,710],{"href":708,"rel":709},"https://www.linkedin.com/posts/slavkurochkin_model-context-protocol-mcp-is-great-for-activity-7379157764620832770-keCs",[688],"Choosing Between Playwright MCP and Chrome DevTools",[712,713,714],"style",{},"html pre.shiki code .sxvE3, html code.shiki .sxvE3{--shiki-default:#A0ADA0;--shiki-dark:#A0ADA0}html pre.shiki code .senZ8, html code.shiki .senZ8{--shiki-default:#59873A;--shiki-dark:#59873A}html pre.shiki code .sdGka, html code.shiki .sdGka{--shiki-default:#B56959;--shiki-dark:#B56959}html pre.shiki code .snbK4, html code.shiki .snbK4{--shiki-default:#A65E2B;--shiki-dark:#A65E2B}html pre.shiki code .sMJiu, html code.shiki .sMJiu{--shiki-default:#B5695977;--shiki-dark:#B5695977}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":235,"searchDepth":257,"depth":257,"links":716},[717,718,719,725,731,735,740,741,742],{"id":20,"depth":257,"text":21},{"id":82,"depth":257,"text":82},{"id":168,"depth":257,"text":94,"children":720},[721,722,723,724],{"id":172,"depth":299,"text":172},{"id":204,"depth":299,"text":204},{"id":224,"depth":299,"text":224},{"id":238,"depth":299,"text":238},{"id":343,"depth":257,"text":97,"children":726},[727,728,729,730],{"id":346,"depth":299,"text":172},{"id":375,"depth":299,"text":204},{"id":395,"depth":299,"text":224},{"id":404,"depth":299,"text":238},{"id":435,"depth":257,"text":435,"children":732},[733,734],{"id":438,"depth":299,"text":438},{"id":478,"depth":299,"text":478},{"id":508,"depth":257,"text":508,"children":736},[737,738,739],{"id":511,"depth":299,"text":511},{"id":539,"depth":299,"text":540},{"id":560,"depth":299,"text":560},{"id":580,"depth":257,"text":580},{"id":650,"depth":257,"text":650},{"id":679,"depth":257,"text":679},"dev",null,"ブラウザ自動化MCPの2大選択肢を比較。デバッグ・パフォーマンス分析にはChrome DevTools、UI自動化・テストにはPlaywrightが最適","md",{},"/chrome-devtools-vs-playwright-mcp",false,"2026-01-08T00:00:00.000Z",{"title":5,"description":745},"2026-01/2026-01-08/chrome-devtools-vs-playwright-mcp",[754,755,49,64,756],"Claude Code","MCP","ブラウザ自動化","memo","c6ofK1vQxLUcMfSdp-kotYX7ZvgLvQ-I6hvdCIkhEUU",[],[761,765,769,771,775],{"title":762,"path":763,"publishedAt":764},"Claude Code の UI レビュー、Playwright じゃなくて Chrome DevTools MCP でも同じことはできる","/ui-review-mcp-vs-playwright","2026-05-28T00:00:00.000Z",{"title":766,"path":767,"publishedAt":768},"Chrome DevTools MCPで複数Claude Codeセッションを同時に使えない問題","/chrome-devtools-mcp-multi-session","2026-01-23T00:00:00.000Z",{"title":339,"path":338,"publishedAt":770},"2025-12-23T00:00:00.000Z",{"title":772,"path":773,"publishedAt":774},"ログイン済みChromeにChrome DevTools MCPを繋ぐまでの切り分け記録","/devtools-mcp-logged-in-chrome-sns-setup","2026-07-29T00:00:00.000Z",{"title":776,"path":777,"publishedAt":778},"自作APIのMCP化講座をMiller Column形式に変換して公開した — レビュー指摘の全ページ横展開とCOPYボタン復活","/journal-mcp-miller-column-course","2026-07-15T00:00:00.000Z","https://log.eurekapu.com/og/blog/chrome-devtools-vs-playwright-mcp.png?v=2026-01-08T00%3A00%3A00.000Z&title=Chrome%20DevTools%20MCP%20vs%20Playwright%20MCP%3A%20%E7%94%A8%E9%80%94%E5%88%A5%E3%81%AE%E4%BD%BF%E3%81%84%E5%88%86%E3%81%91%E3%82%AC%E3%82%A4%E3%83%89&author=Kei%20Komatsu&sig=4151220f73a07e0e",1785654984151]