概要
https://www.pospome.work/entry/2025/10/16/100710
詳細内容
## 「Chrome DevTools MCP」で Copilot に CSS を読み取らせて修正してもらう
https://www.pospome.work/entry/2025/10/16/100710
著者は、Chrome DevTools MCPを利用することで、GitHub Copilotがブラウザのレンダリング済みCSSを読み取り、CSS修正の精度を大幅に向上させる方法を実体験に基づいて解説します。
**Content Type**: ⚙️ Tools
**Language**: ja
**Scores**: Signal:5/5 | Depth:3/5 | Unique:4/5 | Practical:5/5 | Anti-Hype:4/5
**Main Journal**: 85/100 | **Annex Potential**: 83/100 | **Overall**: 84/100
**Topics**: [[Generative AI, GitHub Copilot, CSS, Chrome DevTools, 開発ワークフロー]]
著者は、Chrome DevTools MCP（Machine Controllable Protocol）の存在を知り、これをGitHub Copilotと連携させることで、これまで苦手としていたCSS修正の効率が大幅に向上した経験を共有しています。
これまでCopilotは、CSSファイルの内容は読み取れるものの、ブラウザ上で実際にレンダリングされたCSSを直接読み取ることができませんでした。この制約のため、「テキストを中央揃えにする」といった単純な修正でも、Copilotがデバッグのように振る舞えず、著者はCSSの知識が不足していることも相まって、実装に手こずることがありました。
しかし、Chrome DevTools MCPを利用することで、AIエージェントが実際にChromeブラウザにアクセスし、表示されている画面のCSSを読み取れるようになります。これにより、CopilotはレンダリングされたCSSの状態を把握できるようになり、CSS修正の精度が格段に向上したと著者は述べています。
著者は、この仕組みがCSS修正以外にも、パフォーマンス計測や改善など、人間がChrome DevToolsで行う様々な作業をAIエージェントに任せる可能性を秘めていると期待感を示しています。一方で、AIが生成したCSSの見た目が要件通りであったとしても、その実装の妥当性を判断するには、AIを利用する側に最低限の技術リテラシーが求められると指摘しており、「見た目がそれっぽいからいーか」で済ませてしまうことへの懸念も表明しています。これは、AIを活用する上で人間側のスキルも依然として重要であることを示唆しています。