【要約】別マシンで動かしているブラウザの console ログを AI に渡したい — そのままファイルに記録するツールを作った [Zenn_Python] | Summary by TechDistill
> Source: Zenn_Python
Execute Primary Source
// Problem
開発者がリモート環境や実機デバイスでWebアプリのテストを行う際、ブラウザのログをAIに共有するプロセスに課題がある。既存のMCP等のツールは、ブラウザとAIが同一マシンにあることを前提としているため、以下の問題が発生する。
- ・開発機（Linux/Mac）とテスト機（Windows/Android）が分離している場合にログが届かない。
- ・エラー内容を手動でコピー＆ペーストする作業が発生し、効率が低下する。
- ・ビルドツールのプラグインでは、別マシンで動く実ビルドのログを捕捉しにくい。
// Approach
開発者は、ブラウザの動作を直接制御するのではなく、発生したログを「パッシブに記録する」手法を採用した。これにより、AIに操作権を与えず、安全かつ確実にログを収集する。具体的な手法は以下の通りである。
- ・Chrome DevTools Protocol (CDP) を用いてブラウザにアタッチする。
- ・専用のユーザーデータディレクトリを使用し、全ページに自動でログ出力をアタッチする。
- ・ログをプレーンテキストとしてローカルファイルに追記し続ける。
- ・セキュリティ確保のため、デバッグポートをlocalhostに限定し、Originチェックを維持する。
// Result
GreenLightの導入により、別環境のブラウザログをAIへ渡す最短経路が確保された。特に以下の成果が得られている。
- ・Android実機のデバッグログも、USB経由で自動的にファイル化できる。
- ・機密情報をクラウドに送らず、ローカルファイルとして安全に管理できる。
- ・リロードを跨いだ連続記録により、セッション全体のコンテキストをAIに提供可能となった。
Senior Engineer Insight
> 非常に実戦的な設計だ。AIによる「自律制御」ではなく、人間による「再現」の結果をAIに食わせるという「パッシブな設計」が、セキュリティと運用の現実解となっている。特に、機密情報が混入しやすいconsoleログをクラウドに送らず、ローカルファイルに留める判断は、エンタープライズ環境での導入を考慮した際、極めて妥当である。ただし、Windows/Chrome限定である点は、マルチプラットフォームな開発現場では制約となるだろう。