[{"data":1,"prerenderedAt":577},["ShallowReactive",2],{"content-/claude-code-browser-features-comparison":3,"all-pages-for-dir":555,"related-/claude-code-browser-features-comparison":556,"og-image-/claude-code-browser-features-comparison":576},{"id":4,"title":5,"body":6,"category":540,"concepts":540,"description":541,"extension":542,"meta":543,"navigation":323,"ogImage":540,"path":544,"project_name":540,"published":545,"publishedAt":546,"seo":547,"source":540,"stem":548,"tags":549,"todo":540,"unpublished":545,"updatedAt":546,"__hash__":554},"pages/2025-12/2025-12-18/claude-code-browser-features-comparison.md","Claude Code 2.0.72 ブラウザ機能比較: Claude in Chrome vs chrome-devtools-mcp",{"type":7,"value":8,"toc":519},"minimark",[9,14,28,32,119,124,127,131,134,144,147,196,199,210,212,215,218,224,227,272,275,385,388,405,408,412,426,430,447,450,453,472,475,505,509,512,515],[10,11,13],"h1",{"id":12},"claude-code-2072-ブラウザ機能比較","Claude Code 2.0.72 ブラウザ機能比較",[15,16,17,18,22,23,27],"p",{},"Claude Code 2.0.72で「Claude in Chrome (Beta)」という新機能が追加された。これは、従来から使用可能な",[19,20,21],"code",{},"chrome-devtools-mcp","とは",[24,25,26],"strong",{},"異なるもの","である。",[29,30,31],"h2",{"id":31},"結論",[33,34,35,50],"table",{},[36,37,38],"thead",{},[39,40,41,45,48],"tr",{},[42,43,44],"th",{},"項目",[42,46,47],{},"Claude in Chrome (Beta)",[42,49,21],{},[51,52,53,67,80,93,106],"tbody",{},[39,54,55,61,64],{},[56,57,58],"td",{},[24,59,60],{},"種類",[56,62,63],{},"Chrome拡張機能連携",[56,65,66],{},"MCPサーバー",[39,68,69,74,77],{},[56,70,71],{},[24,72,73],{},"提供元",[56,75,76],{},"Anthropic公式",[56,78,79],{},"Google Chrome DevTools チーム",[39,81,82,87,90],{},[56,83,84],{},[24,85,86],{},"利用条件",[56,88,89],{},"Max プラン専用",[56,91,92],{},"誰でも無料",[39,94,95,100,103],{},[56,96,97],{},[24,98,99],{},"接続方式",[56,101,102],{},"拡張機能経由",[56,104,105],{},"リモートデバッグポート (9222)",[39,107,108,113,116],{},[56,109,110],{},[24,111,112],{},"主な用途",[56,114,115],{},"エンドユーザー向けブラウザ操作",[56,117,118],{},"開発者向けデバッグ・自動化",[15,120,121],{},[24,122,123],{},"両者は補完的な関係であり、用途に応じて使い分けることができる。",[29,125,47],{"id":126},"claude-in-chrome-beta",[128,129,130],"h3",{"id":130},"概要",[15,132,133],{},"Anthropic公式のChrome拡張機能と連携してブラウザを直接制御できる、Claude Code 2.0.72で追加された新機能。",[135,136,141],"pre",{"className":137,"code":139,"language":140},[138],"language-text","Claude Code CLI \u003C---> Chrome拡張機能 \u003C---> Chromeブラウザ\n","text",[19,142,139],{"__ignoreMap":143},"",[128,145,146],{"id":146},"特徴",[148,149,150,157,170,190],"ul",{},[151,152,153,156],"li",{},[24,154,155],{},"Maxプラン限定",": 有料プラン（Max）のユーザーのみ利用可能",[151,158,159,162,163,169],{},[24,160,161],{},"拡張機能が必要",": ",[164,165,166],"a",{"href":166,"rel":167},"https://claude.ai/chrome",[168],"nofollow"," から拡張機能をインストール",[151,171,172,175,176],{},[24,173,174],{},"高度な機能",":\n",[148,177,178,181,184,187],{},[151,179,180],{},"スケジュールタスク（定期的なブラウザタスクの自動実行）",[151,182,183],{},"マルチタブ対応（複数タブを同時操作）",[151,185,186],{},"計画に沿った実行（ワークフローを承認後、自動実行）",[151,188,189],{},"モデル選択（Haiku 4.5 / Sonnet 4.5 / Opus 4.5）",[151,191,192,195],{},[24,193,194],{},"プラットフォーム統合",": Slack, Gmail, Google Calendar, Google Docs, GitHub などとの連携",[128,197,198],{"id":198},"ユースケース",[148,200,201,204,207],{},[151,202,203],{},"Webサイトの自動操作（フォーム入力、データ収集など）",[151,205,206],{},"定期的なタスクの自動化",[151,208,209],{},"複雑なワークフローの実行",[29,211,21],{"id":21},[128,213,130],{"id":214},"概要-1",[15,216,217],{},"Model Context Protocol (MCP) サーバーとして動作し、Chrome DevTools Protocol を使用してブラウザを制御・検査する。",[135,219,222],{"className":220,"code":221,"language":140},[138],"Claude Code CLI \u003C---> MCP Server \u003C---> Chrome DevTools Protocol \u003C---> Chrome (port 9222)\n",[19,223,221],{"__ignoreMap":143},[128,225,146],{"id":226},"特徴-1",[148,228,229,235,244],{},[151,230,231,234],{},[24,232,233],{},"無料で利用可能",": プラン制限なし",[151,236,237,162,240,243],{},[24,238,239],{},"リモートデバッグ",[19,241,242],{},"--remote-debugging-port=9222"," で起動したChromeに接続",[151,245,246,175,249],{},[24,247,248],{},"開発者向け機能",[148,250,251,254,257,260,263,266,269],{},[151,252,253],{},"パフォーマンス分析（LCP、トレース記録、Lighthouse監査）",[151,255,256],{},"ネットワーク検査（リクエスト/レスポンス分析、CORS調査）",[151,258,259],{},"コンソールログ確認",[151,261,262],{},"DOM検査・スナップショット",[151,264,265],{},"スクリーンショット撮影",[151,267,268],{},"ユーザー操作シミュレーション（クリック、入力、ドラッグ）",[151,270,271],{},"CPU/ネットワークスロットリング",[128,273,274],{"id":274},"セットアップ",[135,276,280],{"className":277,"code":278,"language":279,"meta":143,"style":143},"language-bash shiki shiki-themes vitesse-light vitesse-light","# MCPサーバーを追加\nclaude mcp add chrome-devtools -- npx @anthropic-ai/chrome-devtools-mcp@latest\n\n# Chromeをリモートデバッグモードで起動（Windows）\nstart \"\" \"C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe\" ^\n  --remote-debugging-port=9222 ^\n  --user-data-dir=\"%TEMP%\\chrome-profile-stable\"\n","bash",[19,281,282,291,318,325,331,353,369],{"__ignoreMap":143},[283,284,287],"span",{"class":285,"line":286},"line",1,[283,288,290],{"class":289},"sxvE3","# MCPサーバーを追加\n",[283,292,294,298,302,305,308,312,315],{"class":285,"line":293},2,[283,295,297],{"class":296},"senZ8","claude",[283,299,301],{"class":300},"sdGka"," mcp",[283,303,304],{"class":300}," add",[283,306,307],{"class":300}," chrome-devtools",[283,309,311],{"class":310},"snbK4"," --",[283,313,314],{"class":300}," npx",[283,316,317],{"class":300}," @anthropic-ai/chrome-devtools-mcp@latest\n",[283,319,321],{"class":285,"line":320},3,[283,322,324],{"emptyLinePlaceholder":323},true,"\n",[283,326,328],{"class":285,"line":327},4,[283,329,330],{"class":289},"# Chromeをリモートデバッグモードで起動（Windows）\n",[283,332,334,337,341,344,347,350],{"class":285,"line":333},5,[283,335,336],{"class":296},"start",[283,338,340],{"class":339},"sMJiu"," \"\"",[283,342,343],{"class":339}," \"",[283,345,346],{"class":300},"C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",[283,348,349],{"class":339},"\"",[283,351,352],{"class":300}," ^\n",[283,354,356,360,364,367],{"class":285,"line":355},6,[283,357,359],{"class":358},"s4oTP","  --remote-debugging-port",[283,361,363],{"class":362},"shFtX","=",[283,365,366],{"class":300},"9222",[283,368,352],{"class":296},[283,370,372,375,377,379,382],{"class":285,"line":371},7,[283,373,374],{"class":358},"  --user-data-dir",[283,376,363],{"class":362},[283,378,349],{"class":339},[283,380,381],{"class":300},"%TEMP%\\chrome-profile-stable",[283,383,384],{"class":339},"\"\n",[128,386,198],{"id":387},"ユースケース-1",[148,389,390,393,396,399,402],{},[151,391,392],{},"実装したコードのブラウザ動作確認",[151,394,395],{},"パフォーマンス問題の調査",[151,397,398],{},"ネットワークエラー（CORS等）のデバッグ",[151,400,401],{},"UI/UXテストの自動化",[151,403,404],{},"スクリーンショットによる視覚的確認",[29,406,407],{"id":407},"どちらを使うべきか",[128,409,411],{"id":410},"claude-in-chrome-を選ぶ場合","Claude in Chrome を選ぶ場合",[148,413,414,417,420,423],{},[151,415,416],{},"Max プランに加入している",[151,418,419],{},"定期的なブラウザタスクを自動化したい",[151,421,422],{},"コードを書かずにブラウザ操作を行いたい",[151,424,425],{},"Slack や Gmail などの外部サービスと連携したい",[128,427,429],{"id":428},"chrome-devtools-mcp-を選ぶ場合","chrome-devtools-mcp を選ぶ場合",[148,431,432,435,438,441,444],{},[151,433,434],{},"開発中のWebアプリをテストしたい",[151,436,437],{},"パフォーマンス分析やネットワーク調査が必要",[151,439,440],{},"localhost の開発サーバーを確認したい",[151,442,443],{},"無料で利用したい",[151,445,446],{},"詳細なDevTools機能（トレース、監査など）が必要",[29,448,449],{"id":449},"併用について",[15,451,452],{},"両者は競合するものではなく、併用可能。",[148,454,455,463],{},[151,456,457,162,460,462],{},[24,458,459],{},"開発時",[19,461,21],{}," でローカル開発サーバーをデバッグ",[151,464,465,162,468,471],{},[24,466,467],{},"本番/外部サービス",[19,469,470],{},"Claude in Chrome"," で実際のWebサイトを操作",[29,473,474],{"id":474},"参考リンク",[148,476,477,484,491,498],{},[151,478,479],{},[164,480,483],{"href":481,"rel":482},"https://github.com/anthropics/claude-code/blob/main/CHANGELOG.md",[168],"Claude Code CHANGELOG",[151,485,486],{},[164,487,490],{"href":488,"rel":489},"https://support.claude.com/en/articles/12306336-claude-for-chrome-release-notes",[168],"Claude for Chrome Release Notes",[151,492,493],{},[164,494,497],{"href":495,"rel":496},"https://addyosmani.com/blog/devtools-mcp/",[168],"Chrome DevTools MCP (Addy Osmani)",[151,499,500],{},[164,501,504],{"href":502,"rel":503},"https://github.com/ChromeDevTools/chrome-devtools-mcp",[168],"Chrome DevTools MCP GitHub",[29,506,508],{"id":507},"補足-mcp-とは","補足: MCP とは",[15,510,511],{},"Model Context Protocol (MCP) は Anthropic が提唱するオープンスタンダードで、LLM と外部ツール・データソースを接続するための統一規格。カスタム統合を個別に作る代わりに、標準化された形式で機能を公開できる。",[15,513,514],{},"chrome-devtools-mcp はこの MCP プロトコルに準拠したサーバーの一つであり、Claude Code だけでなく、他の MCP 対応ツール（Cursor、Copilot など）からも利用可能。",[516,517,518],"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 pre.shiki code .s4oTP, html code.shiki .s4oTP{--shiki-default:#B07D48;--shiki-dark:#B07D48}html pre.shiki code .shFtX, html code.shiki .shFtX{--shiki-default:#999999;--shiki-dark:#999999}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":143,"searchDepth":293,"depth":293,"links":520},[521,522,527,533,537,538,539],{"id":31,"depth":293,"text":31},{"id":126,"depth":293,"text":47,"children":523},[524,525,526],{"id":130,"depth":320,"text":130},{"id":146,"depth":320,"text":146},{"id":198,"depth":320,"text":198},{"id":21,"depth":293,"text":21,"children":528},[529,530,531,532],{"id":214,"depth":320,"text":130},{"id":226,"depth":320,"text":146},{"id":274,"depth":320,"text":274},{"id":387,"depth":320,"text":198},{"id":407,"depth":293,"text":407,"children":534},[535,536],{"id":410,"depth":320,"text":411},{"id":428,"depth":320,"text":429},{"id":449,"depth":293,"text":449},{"id":474,"depth":293,"text":474},{"id":507,"depth":293,"text":508},null,"Claude Code 2.0.72で追加されたClaude in Chrome (Beta)と、従来のchrome-devtools-mcpの違いを解説","md",{},"/claude-code-browser-features-comparison",false,"2025-12-18T00:00:00.000Z",{"title":5,"description":541},"2025-12/2025-12-18/claude-code-browser-features-comparison",[550,551,552,553],"claude-code","chrome","mcp","browser-automation","k4HTspQx9eIS1E3P4whgwqHaLAEmh9iRntQFQsuFYvs",[],[557,561,565,569,572],{"title":558,"path":559,"publishedAt":560},"1Password EnvironmentsのMCP連携がWindowsで解禁 — Claude Code / Codexへの設定手順と実機検証","/1password-mcp-windows-claude-codex","2026-07-18T00:00:00.000Z",{"title":562,"path":563,"publishedAt":564},"Chrome DevTools MCP の autoConnect で、自分のブラウザセッションをそのままAIに渡せるようになった","/chrome-devtools-mcp-auto-connect","2026-03-31T00:00:00.000Z",{"title":566,"path":567,"publishedAt":568},"Draw.io MCP サーバー調査ログ - 3つの選択肢を比較して現状維持を選んだ話","/drawio-mcp-investigation-2026-02-13","2026-02-13T00:00:00.000Z",{"title":570,"path":571,"publishedAt":568},"Draw.io MCP サーバー3種比較 ― スキル直書きと何が違うのか","/drawio-mcp-vs-skill-comparison",{"title":573,"path":574,"publishedAt":575},"MCPサーバーのオンデマンド化が実装済みだった件","/mcp-ondemand-confirmation","2026-01-07T00:00:00.000Z","https://log.eurekapu.com/og/blog/claude-code-browser-features-comparison.png?v=2025-12-18T00%3A00%3A00.000Z&title=Claude%20Code%202.0.72%20%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E6%A9%9F%E8%83%BD%E6%AF%94%E8%BC%83%3A%20Claude%20in%20Chrome%20vs%20chrome-devtools-mcp&author=Kei%20Komatsu&sig=d0add75dc900e36e",1785654680333]