00:00:00ついにChromeチームから、Chrome DevTools MCPサーバーが
00:00:06起動中のChromeと通信できるアップデートがリリースされました。これにより、ログイン後のデバッグや、
00:00:12ライブセッションの分析、さらには選択した要素へのアクセス、
00:00:17特定のエラー、ネットワークアクティビティの確認といった高度なデバッグが可能になります。
00:00:21しかし、Agent BrowserやPlaywrightのような他のAIブラウザデバッグツールが、
00:00:26スキルを備えたCLIやMCPサーバーを追加している中で、Chrome DevTools MCPも
00:00:31将来的にそれらを追加する必要があるのでしょうか？
00:00:33チャンネル登録をして、一緒に確かめていきましょう。
00:00:35数ヶ月前、AnjisがChrome DevTools MCPサーバーの
00:00:44素晴らしい概要動画を公開しましたが、当時は新しいChromeセッションを起動するか、
00:00:49リモートデバッグポートに接続するしかなく、手動での設定が非常に面倒でした。
00:00:53しかし、Chromeバージョン144以降では、リモートデバッグフラグをオンにすることで、
00:00:58Chrome MCPツールが開いているセッションを自動検出し、デバッグに使用できるようになりました。
00:01:04これは個人的に大きな変化です。私はターミナルでClaude Codeを使うのが好きなので、
00:01:09Deer、Comet、ClaudeのChrome拡張機能といったAIブラウザや、
00:01:15React GrabのようなAIデバッグツールを使わずに済むからです。
00:01:18では、この新しいChrome DevTools MCPの機能を見ていきましょう。
00:01:22まず、自動接続オプションが利用可能なMCPサーバーをインストールしておく必要があります。
00:01:27私はOpen Codeを使っていますが、多くのエージェント基盤をサポートしています。Chrome側では、
00:01:31特定のURLにアクセスし、このオプションがオンになっていることを確認してください。
00:01:36以前は、このようなコマンドでセッションを開始し、エージェントが
00:01:40HTTP経由で公開ポートに接続する必要がありました。
00:01:43しかし新しい方法では、UI内で通常通りChromeを起動し、クッキーや履歴などを
00:01:48保持したままアクセスでき、終わったら好きな時にオフにできます。
00:01:53セキュリティが気になる方のために、動画の後半で
00:01:57よりプライベートなバージョンのChromeに接続する方法も説明します。
00:01:59この2つの作業、つまりオプションの切り替えと自動接続での
00:02:04MCPサーバーへの接続が完了すれば、準備は万端です。
00:02:08エージェントにBetastackのパフォーマンス確認を依頼すると、Chrome内で
00:02:12リモートデバッグの許可を求めるポップアップが表示され、上部にバナーが出ます。
00:02:17これでエージェントはBetastackのサイトに移動し、
00:02:21Lighthouse監査ツールを使用して、Web Vitalやスコアなどの詳細情報を提示してくれます。
00:02:27次に、もっと実用的なことをしてみましょう。
00:02:29これは私が開発中の言語学習アプリです。
00:02:31管理者としてログインし、特定のユニットの演習画面まで移動しました。
00:02:37この演習用モーダルにある「保存」ボタンのデザインが、
00:02:42サイト内の他のボタンと異なっていることに気づきました。
00:02:44ログインして特定のページに移動するという手順をエージェントに一から説明する代わりに、
00:02:49検証ツールでこの「保存」ボタンを選択した状態で、
00:02:55「選択した要素が見えるか」をエージェントに尋ねてみます。
00:02:58しばらくすると、エージェントは私が「保存」ボタンを選択していることを認識しました。
00:03:02そこで、このボタンのスタイルを、こちらの「新しい演習」ボタンと
00:03:06同じ見た目に変更するように指示します。
00:03:09数秒後、ボタンのスタイルが希望通りに書き換えられました。
00:03:13ただし、MCPサーバーをサンドボックス環境で実行している場合は、
00:03:18WebSocketではなくHTTPとしてリモートデバッグポートのURLオプションを使用する必要があります。
00:03:23また、セキュリティを重視する場合は、MCPサーバーのオプションとして
00:03:28特定の場所を指定した「user-data-dir」を追加する必要があります。これにより、エージェントは
00:03:33既存のクッキー、パスワード、ブラウザ履歴などにアクセスできなくなります。
00:03:36その場合、エージェントにアクセスさせたいサイトには再度ログインが必要です。
00:03:41これは非常に便利ですが、私の以前の動画をご覧になった方はご存知の通り、
00:03:46MCPサーバーは数が増えるとコンテキストを大量に消費するため、あまり好きではありませんでした。
00:03:51ですが幸いなことに、
00:03:52Chrome DevTools MCPサーバーはCLIですべての操作を行うことができます。
00:03:59これはあまり知られていません。なぜなら、この実験的機能を見つけるには
00:04:04skillsディレクトリ内のChrome DevTools CLIまで深く潜る必要があるからです。
00:04:10そこにはエージェント向けの使い方や、
00:04:12未インストールの人向けのインストール手順が記載されています。
00:04:16これは基本的にはMCPサーバーの薄いラッパーです。
00:04:20既にエージェント基盤でサーバーを動かしている場合、このCLIは
00:04:24独自のデーモンを使用するため、それを利用することはありません。
00:04:26このコマンドで実行中のデフォルトのデーモン情報を確認できます。
00:04:30browser-urlフラグや、headless、isolatedといったフラグが設定されているのが分かります。
00:04:34ただし、CLIのオプションには「自動接続（auto-connect）」が含まれていません。
00:04:39ターミナル経由でChromeを起動していない場合は、既存のものを一度終了させ、
00:04:43リモートデバッグポートのフラグと一緒に「user-data」フラグも指定して
00:04:48実行する必要があります。
00:04:50これで準備ができたら、デーモンを起動してページリストを取得します。
00:04:54今はまだ何も開いていないので、新しいタブが1つ表示されるだけです。
00:04:57もちろん、真の力を発揮するのはエージェントと組み合わせた時です。
00:05:01Chrome MCPツールをオフにし、DevToolsでボタンを選択してから、エージェントに
00:05:06CLIを使ってどの要素が選択されているか調べるよう指示すると、見事に特定できました。
00:05:11ユーザーデータディレクトリの情報はセッションをまたいで保持されるため、
00:05:15クッキーやブラウザ情報などはすべて維持されます。
00:05:19Chrome DevTools CLIでできることは、他にもたくさんあります。
00:05:22ぜひこの「スキル」をチェックしてみてください。将来的に
00:05:26自動接続機能が導入されるかもしれません。
00:05:28以上、Chrome DevTools MCPサーバーとCLIの新しい便利な機能を
00:05:32駆け足で紹介しました。これらはコーディングアシスタントを使用した
00:05:38デバッグ体験を間違いなく向上させてくれるでしょう。
00:05:39Arcユーザーとして（今でもArcを使っています）、将来的にこの機能がArcにも来ることを願っています。
00:05:45それまでは、VassalのAgent Browserを使っていますが、
00:05:50これは非常にうまく機能しています。
00:05:51Agent Browserについて知らない方は、以前作成した動画を見てみてください。
00:05:55その後、かなり進化しているので、
00:05:58そろそろ新しい動画を作る時期かもしれませんね。