最近まで、人工知能はコードを書くことができましたが、ほとんど「盲目」でした。ブラウザで実際に何が起こっているのか、つまりコンソールのエラー、ネットワーク要求、パフォーマンスなどを見ることができませんでした。これらはすべて舞台裏に留まっていました。
登場 Chrome DevTools MCP (Multi-Client Protocol) 状況は変わりつつあります。現在、AIは開発者と同じツールを手に入れています。つまり、プロトコルを介してブラウザの内部にアクセスできるようになりました。これにより、コードライターから本格的な デバッガー.
MCPとは何ですか？
MCPは、Chrome DevToolsとの新しいインタラクションレイヤーです。これにより、人間だけでなくAIアシスタントもブラウザに接続して読み取ることができます。
コンソールからのエラーと警告
DOM と CSS ルールの状態
ネットワークリクエストとその応答
パフォーマンス指標（FPS、メモリ、CPU負荷）
基本的に、MCPは自動化できるブラウザーの「透明なウィンドウ」です。
AIの仕組み
以前は、AIアシスタントは「コードを書いたが、動作しない。おそらく、構文またはAPIのエラーです。」
今度はシナリオが異なります。
AIはブラウザで直接コードを実行します。
MCPを介して、コンソールのエラーを「見る」ことができます。
それらをソースコードと比較します。
自分で修正を提案するか、すぐに修正します。
これは、書くだけでなく、その場でコードをテストするジュニアパートナーがいるようなものです。
ライブの例
クリックすると色が変わるボタンを作成したとしましょう。しかし、それは動作しません。
MCPを備えたAI：
DevToolsを見て→エラーを見る：
document.getElementByID is not a function正しい方法が
getElementByIdであることを理解している結果を修正してすぐに確認します
「書いた — チェックした — エラーをスクリーニングした — AIに説明した」という長いサイクルの代わりに、すべてが閉じられます 1つのプロセス.
なぜこれが重要なのでしょうか？
開発速度
AIは瞬時にバグをキャッチできます。
初心者は早く学べます
アシスタントはブラウザで直接エラーを説明します。
痛みのない自動テスト
MCPは、AIをQAプロセスに統合するために使用できます。
ペアプログラミングの未来
人間とAIは同じツールを使用しています。
少しの未来主義
今日、MCPはDevToolsへのアクセスです。そして明日は？
「ここで最適化」のヒントを使用した自動パフォーマンスプロファイリング。
AIがブラウザでユーザーのスクリプトを実行する「スマート」テスト。
インターフェースの視覚的な比較：どのように描画されるべきか、どのように描画されたか。
実際、AIがフロントエンドの書き込みからデバッグ、最適化まで、完全なサイクルを実行できるようになるところです。
B コディケ 私たちはプログラミングの学習をシンプルでわかりやすくします。Go、JavaScript、Python、その他のテクノロジーのコースをすべて1つのアプリケーションで提供します。
そして、私たちは居心地の良い テレグラムチャンネル開発の世界からの最新ニュースを話し合い、洞察を共有し、新機能を一緒に分析します。
参加する、志を同じくする人々と一緒にITを学び、成長するために！