[{"data":1,"prerenderedAt":531},["ShallowReactive",2],{"content-/chrome-devtools-for-agents-v1":3,"all-pages-for-dir":529,"og-image-/chrome-devtools-for-agents-v1":530},{"id":4,"title":5,"body":6,"category":510,"concepts":511,"description":512,"extension":513,"meta":514,"navigation":515,"ogImage":511,"path":516,"project_name":517,"published":518,"publishedAt":519,"seo":520,"stem":521,"tags":522,"todo":511,"unpublished":518,"updatedAt":511,"__hash__":528},"pages/2026-07/2026-07-07/chrome-devtools-for-agents-v1.md","Chrome DevTools for agents 1.0 が出た — Claude Codeの表示確認フローに何を足せるか",{"type":7,"value":8,"toc":493},"minimark",[9,13,17,20,47,52,65,86,89,93,101,106,109,113,116,120,123,127,130,133,136,140,143,153,160,228,242,246,249,378,388,392,398,402,405,435,441,444,447,467,470,473,489],[10,11,5],"h1",{"id":12},"chrome-devtools-for-agents-10-が出た-claude-codeの表示確認フローに何を足せるか",[14,15,16],"p",{},"Googleが「Chrome DevTools for agents」の安定版1.0を発表した。中身はChrome DevTools MCPサーバーの安定版に、CLIとエージェント向けスキル集を加えたパッケージだ。このサイトの開発では表示確認にChrome DevTools MCPを毎日使っているので、何が増えたのかをClaude Codeに調べさせた。",[14,18,19],{},"結論を先に書く。",[21,22,23,37,44],"ul",{},[24,25,26,27,31,32,36],"li",{},"MCPサーバーを ",[28,29,30],"code",{},"npx chrome-devtools-mcp@latest"," で登録している環境なら、Lighthouse監査・デバイスエミュレーション・ヒープスナップショットの新ツールは",[33,34,35],"strong",{},"既に導入済み","だった。追加作業はない",[24,38,39,40,43],{},"新しく導入する意味があるのはClaude Code向けプラグインで、パフォーマンス改善やメモリリーク調査の",[33,41,42],{},"スキル6本","が同梱される。コマンド2行で入る",[24,45,46],{},"このサイトの運用に一番効きそうなのはデバイスエミュレーションで、スマホ表示の確認をエージェントに任せられるようになる",[48,49,51],"h2",{"id":50},"chrome-devtools-for-agents-10-とは","Chrome DevTools for agents 1.0 とは",[14,53,54,55,64],{},"2026年5月19日付の",[56,57,63],"a",{"href":58,"target":59,"rel":60},"https://developer.chrome.com/blog/devtools-for-agents-v1?hl=ja","_blank",[61,62],"noopener","noreferrer","→ Chrome for Developersブログ","で発表された。AIコーディングエージェントにブラウザのデバッグ能力を渡すための3点セットだ。",[66,67,68,74,80],"ol",{},[24,69,70,73],{},[33,71,72],{},"MCPサーバー","（chrome-devtools-mcp）の安定版1.0。ツール数は45以上",[24,75,76,79],{},[33,77,78],{},"CLI","。MCPを話さない環境からもコマンドラインでDevToolsを叩ける",[24,81,82,85],{},[33,83,84],{},"エージェント向けスキル","。ツールを「いつ・どう使うか」をエージェントに教える手順書",[14,87,88],{},"ブログでは「ランタイムを理解するリンター」という位置づけで説明されている。コードを書いたエージェント自身が、実際にブラウザで動かして品質を確かめるところまでやる、という思想だ。「書いたら自分の目で描画確認する」をエージェントにやらせるための道具立てと言い換えてもいい。",[48,90,92],{"id":91},"_10で増えた主なツール","1.0で増えた主なツール",[14,94,95,100],{},[56,96,99],{"href":97,"target":59,"rel":98},"https://github.com/ChromeDevTools/chrome-devtools-mcp",[61,62],"→ GitHubリポジトリ","とブログ記事から、今回の目玉を4つ拾った。",[102,103,105],"h3",{"id":104},"lighthouse監査lighthouse_audit","Lighthouse監査（lighthouse_audit）",[14,107,108],{},"パフォーマンス・アクセシビリティ・SEO・ベストプラクティスの監査をエージェントが自分で実行できる。今まではLighthouseを人間がDevToolsパネルから手で回していたが、「デプロイしたらLighthouseを回して、スコアが落ちていたら原因を調べて」という頼み方ができるようになる。",[102,110,112],{"id":111},"デバイス地域エミュレーションemulate","デバイス・地域エミュレーション（emulate）",[14,114,115],{},"ウィンドウサイズの変更に加えて、デバイスや位置情報のシミュレーションができる。ブログの例は「手でブラウザをリサイズせずに、ハンバーガーメニューのようなモバイル固有の動作をテストする」というもの。",[102,117,119],{"id":118},"ヒープスナップショットtake_heapsnapshot","ヒープスナップショット（take_heapsnapshot）",[14,121,122],{},"メモリリークの調査用。スナップショットを取って比較する一連の流れをエージェントが実行できる。プラグイン同梱のメモリリーク調査スキルとセットで使う想定になっている。",[102,124,126],{"id":125},"chrome拡張機能のデバッグ","Chrome拡張機能のデバッグ",[14,128,129],{},"拡張機能のインストール・リロード・アクションの発火をエージェントが直接実行できる。拡張機能を開発しているなら、編集→リロード→動作確認のループをエージェントに閉じてもらえる。",[14,131,132],{},"このほか、ページ側が構造化ツールをエージェントに直接公開する「WebMCP」のオリジントライアルも始まっている。DOMを推測しながら操作する代わりに、ページが用意したツールを直接呼ぶ仕組みだ。ただしこちらは提供側（サイト側）の話なので、静的サイトの運用ではまだ様子見でいい。",[48,134,135],{"id":135},"導入方法",[102,137,139],{"id":138},"claude-codeの場合","Claude Codeの場合",[14,141,142],{},"Claude Code向けには、プラグインとして入れる方法が公式ブログで案内されている。マーケットプレイスを登録してインストールするだけ。",[144,145,150],"pre",{"className":146,"code":148,"language":149},[147],"language-text","/plugin marketplace add ChromeDevTools/chrome-devtools-mcp\n/plugin install chrome-devtools-mcp@chrome-devtools-plugins\n","text",[28,151,148],{"__ignoreMap":152},"",[14,154,155,156,159],{},"このプラグインにはMCPサーバー本体とスキル6本が同梱される。リポジトリの ",[28,157,158],{},"skills/"," ディレクトリにあるのは次の6つ。",[161,162,163,176],"table",{},[164,165,166],"thead",{},[167,168,169,173],"tr",{},[170,171,172],"th",{},"スキル",[170,174,175],{},"用途",[177,178,179,188,196,204,212,220],"tbody",{},[167,180,181,185],{},[182,183,184],"td",{},"chrome-devtools",[182,186,187],{},"DevToolsツール全般の使い方",[167,189,190,193],{},[182,191,192],{},"chrome-devtools-cli",[182,194,195],{},"CLI経由の操作",[167,197,198,201],{},[182,199,200],{},"debug-optimize-lcp",[182,202,203],{},"LCP（最大コンテンツの描画）の調査と改善",[167,205,206,209],{},[182,207,208],{},"memory-leak-debugging",[182,210,211],{},"メモリリークの調査",[167,213,214,217],{},[182,215,216],{},"a11y-debugging",[182,218,219],{},"アクセシビリティの調査",[167,221,222,225],{},[182,223,224],{},"troubleshooting",[182,226,227],{},"接続まわりのトラブル対応",[14,229,230,233,234,237,238,241],{},[33,231,232],{},"注意点がひとつ。"," すでに ",[28,235,236],{},"claude mcp add"," などで chrome-devtools MCPサーバーを手動登録している場合、プラグインを入れるとサーバー登録が二重になる。プラグイン導入後は手動登録側を ",[28,239,240],{},"claude mcp remove"," で外すか、どちらか片方に寄せる。",[102,243,245],{"id":244},"mcpサーバーだけでよければ従来どおり","MCPサーバーだけでよければ従来どおり",[14,247,248],{},"スキルが不要なら、これまでどおりMCPサーバーの直接登録で足りる。",[144,250,254],{"className":251,"code":252,"language":253,"meta":152,"style":152},"language-json shiki shiki-themes vitesse-light vitesse-light","{\n  \"mcpServers\": {\n    \"chrome-devtools\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"chrome-devtools-mcp@latest\"]\n    }\n  }\n}\n","json",[28,255,256,265,285,299,325,360,366,372],{"__ignoreMap":152},[257,258,261],"span",{"class":259,"line":260},"line",1,[257,262,264],{"class":263},"shFtX","{\n",[257,266,268,272,276,279,282],{"class":259,"line":267},2,[257,269,271],{"class":270},"sqvqQ","  \"",[257,273,275],{"class":274},"sz8Xr","mcpServers",[257,277,278],{"class":270},"\"",[257,280,281],{"class":263},":",[257,283,284],{"class":263}," {\n",[257,286,288,291,293,295,297],{"class":259,"line":287},3,[257,289,290],{"class":270},"    \"",[257,292,184],{"class":274},[257,294,278],{"class":270},[257,296,281],{"class":263},[257,298,284],{"class":263},[257,300,302,305,308,310,312,316,320,322],{"class":259,"line":301},4,[257,303,304],{"class":270},"      \"",[257,306,307],{"class":274},"command",[257,309,278],{"class":270},[257,311,281],{"class":263},[257,313,315],{"class":314},"sMJiu"," \"",[257,317,319],{"class":318},"sdGka","npx",[257,321,278],{"class":314},[257,323,324],{"class":263},",\n",[257,326,328,330,333,335,337,340,342,345,347,350,352,355,357],{"class":259,"line":327},5,[257,329,304],{"class":270},[257,331,332],{"class":274},"args",[257,334,278],{"class":270},[257,336,281],{"class":263},[257,338,339],{"class":263}," [",[257,341,278],{"class":314},[257,343,344],{"class":318},"-y",[257,346,278],{"class":314},[257,348,349],{"class":263},",",[257,351,315],{"class":314},[257,353,354],{"class":318},"chrome-devtools-mcp@latest",[257,356,278],{"class":314},[257,358,359],{"class":263},"]\n",[257,361,363],{"class":259,"line":362},6,[257,364,365],{"class":263},"    }\n",[257,367,369],{"class":259,"line":368},7,[257,370,371],{"class":263},"  }\n",[257,373,375],{"class":259,"line":374},8,[257,376,377],{"class":263},"}\n",[14,379,380,383,384,387],{},[28,381,382],{},"@latest"," で登録していれば、サーバー本体は起動のたびに最新版が使われる。ツールを3本に絞る ",[28,385,386],{},"--slim"," モードも用意された。",[102,389,391],{"id":390},"gemini-cliの場合","Gemini CLIの場合",[144,393,396],{"className":394,"code":395,"language":149},[147],"gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp\n",[28,397,395],{"__ignoreMap":152},[48,399,401],{"id":400},"自分の環境を確認したら半分は導入済みだった","自分の環境を確認したら、半分は導入済みだった",[14,403,404],{},"Claude Codeにこの環境の登録状況を確認させたところ、次のことが分かった。",[21,406,407,432],{},[24,408,409,410,413,414,416,417,420,421,420,424,427,428,431],{},"MCPサーバーは ",[28,411,412],{},"npx -y chrome-devtools-mcp@latest --autoConnect"," でグローバル登録済み。",[28,415,382],{}," 指定なので、セッションのツール一覧には ",[28,418,419],{},"lighthouse_audit","・",[28,422,423],{},"emulate",[28,425,426],{},"take_heapsnapshot"," が",[33,429,430],{},"もう生えていた","。1.0の新ツール側は、気づかないうちに導入が終わっていたことになる",[24,433,434],{},"一方、プラグイン（スキル6本）は未導入。こちらが今回の実質的な追加分",[14,436,437,438,440],{},"つまり ",[28,439,382],{}," 運用なら「導入方法」はプラグインのコマンド2行に集約される。",[48,442,443],{"id":443},"このサイトの運用にどう効くか",[14,445,446],{},"このサイトでは、表示に触れる変更をしたら報告前にChrome DevTools MCPで実際の描画を確認する、という運用ルールを敷いている。1.0の新ツールはこのフローの拡張として使える。",[21,448,449,455,461],{},[24,450,451,454],{},[33,452,453],{},"スマホ表示の確認を検証フローに組み込める。"," 過去にホバー依存のツールチップを作ってしまい、スマホで内訳が見えないと指摘を受けたことがある。emulateでモバイルビューポートの確認まで検証手順に入れれば、この種の見落としをエージェント側で拾える",[24,456,457,460],{},[33,458,459],{},"デプロイ後のLighthouse監査を定型化できる。"," 記事1,000本超のSSGサイトなので、デプロイ後にトップと主要ページで監査を回し、スコアの劣化を検知する使い方が合う",[24,462,463,466],{},[33,464,465],{},"重いチャートページの調査にLCPスキルが使える。"," 財務データのチャートを大量に載せたページの表示速度を調べるとき、debug-optimize-lcpスキルが調査の型を提供してくれる",[14,468,469],{},"逆に、ヒープスナップショットとWebMCPは静的サイトの運用では出番が少ない。長時間開きっぱなしにするSPAを作るときに思い出せばいい。",[48,471,472],{"id":472},"まとめ",[21,474,475,478,483,486],{},[24,476,477],{},"Chrome DevTools for agents 1.0の実体は、MCPサーバーの安定版＋CLI＋スキル6本",[24,479,480,482],{},[28,481,382],{}," でMCP登録済みなら新ツールは自動で入っている。確認するだけでいい",[24,484,485],{},"追加で入れる価値があるのはClaude Codeプラグインのスキル。ただしMCPサーバーの二重登録に注意",[24,487,488],{},"表示確認フローを持っているなら、emulateによるスマホ確認とデプロイ後のLighthouse監査は組み込む価値がある",[490,491,492],"style",{},"html pre.shiki code .shFtX, html code.shiki .shFtX{--shiki-default:#999999;--shiki-dark:#999999}html pre.shiki code .sqvqQ, html code.shiki .sqvqQ{--shiki-default:#99841877;--shiki-dark:#99841877}html pre.shiki code .sz8Xr, html code.shiki .sz8Xr{--shiki-default:#998418;--shiki-dark:#998418}html pre.shiki code .sMJiu, html code.shiki .sMJiu{--shiki-default:#B5695977;--shiki-dark:#B5695977}html pre.shiki code .sdGka, html code.shiki .sdGka{--shiki-default:#B56959;--shiki-dark:#B56959}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":152,"searchDepth":267,"depth":267,"links":494},[495,496,502,507,508,509],{"id":50,"depth":267,"text":51},{"id":91,"depth":267,"text":92,"children":497},[498,499,500,501],{"id":104,"depth":287,"text":105},{"id":111,"depth":287,"text":112},{"id":118,"depth":287,"text":119},{"id":125,"depth":287,"text":126},{"id":135,"depth":267,"text":135,"children":503},[504,505,506],{"id":138,"depth":287,"text":139},{"id":244,"depth":287,"text":245},{"id":390,"depth":287,"text":391},{"id":400,"depth":267,"text":401},{"id":443,"depth":267,"text":443},{"id":472,"depth":267,"text":472},"dev",null,"Chrome DevTools MCPの安定版1.0で追加されたLighthouse監査・デバイスエミュレーション・ヒープスナップショットと、Claude Code向けプラグイン（スキル同梱）の導入方法。@latest登録なら新ツールは導入済みで、残るはプラグインのスキルだけだった。","md",{},true,"/chrome-devtools-for-agents-v1","claude-code-tools",false,"2026-07-07T00:00:00.000Z",{"title":5,"description":512},"2026-07/2026-07-07/chrome-devtools-for-agents-v1",[523,524,525,526,527],"Chrome DevTools MCP","Claude Code","Lighthouse","MCP","QA検証","yHJ7-zjp4wmvv83J9Sb-5RSqdeZwmqhAUZAlBoLv6Jg",[],"https://log.eurekapu.com/og/blog/chrome-devtools-for-agents-v1.png?v=2026-07-07T00%3A00%3A00.000Z&title=Chrome%20DevTools%20for%20agents%201.0%20%E3%81%8C%E5%87%BA%E3%81%9F%20%E2%80%94%20Claude%20Code%E3%81%AE%E8%A1%A8%E7%A4%BA%E7%A2%BA%E8%AA%8D%E3%83%95%E3%83%AD%E3%83%BC%E3%81%AB%E4%BD%95%E3%82%92%E8%B6%B3%E3%81%9B%E3%82%8B%E3%81%8B&author=Kei%20Komatsu&sig=121cf5c9f09504c2",1783483677778]