はじめに
Web開発で「コードを書く→ブラウザで確認→バグ発見→修正→また確認」という無限ループ、経験ありませんか？
chrome-devtools-mcp を使えば、AI開発ツール（Claude CodeなどのIDEエージェント）からChrome DevToolsに直接アクセスできるようになり、コード生成・修正支援だけでなく、「実際にブラウザでどう動くか」まで確認できる開発フローに進化します。
この記事では、導入手順だけでなく、私が遭遇した "ENOTEMPTY: directory not empty" のようなトラブルと解決方法もまとめています。
chrome-devtools-mcpとは
まず用語を整理します。
- MCP（Model Context Protocol）：LLMやAIエージェントが外部ツールやデータにアクセスするための共通インターフェース
-
- chrome-devtools-mcp：MCPを使ってChrome DevToolsを操作・監視できるようにするサーバー
つまり、AIがブラウザのコンソールログ、ネットワークリクエスト、パフォーマンス情報などをプログラム的に取得・操作できるようになります。
導入手順
1. 前提条件
- Node.js：最新版またはLTS推奨
-
- Chrome：安定版
2. MCPクライアント（IDE）への設定追加
例：設定ファイルに以下を追加
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest"]
}
}
}
3. サーバー起動
npx chrome-devtools-mcp@latest
初回はインストール確認が出るので y で進めます。
4. 接続確認
IDE側で "chrome-devtools" サーバーへの接続が確認できればOK。ログに "Browser opened" などが表示されます。
遭遇したトラブル："ENOTEMPTY"エラー
私が実際に遭遇した状況です。
エラー内容
npm error code ENOTEMPTY
npm error syscall rename
npm error path ~/.npm/_npx/…/node_modules/bare-fs
npm error dest ~/.npm/_npx/…/node_modules/.bare-fs-…
一時展開フォルダ内で「ディレクトリを空にできないからrenameに失敗」というエラーです。
原因
- 前回の
npx実行が中断された -
~/.npm/_npx以下にキャッシュの残骸があった
解決手順
rm -rf ~/.npm/_npx
npm cache clean --force
# 2. 再実行
npx chrome-devtools-mcp@latest
これで無事起動しました。
注意点
- キャッシュ削除は安全ですが、他のプロジェクトの一時ファイルも消えます
-
- フォルダの所有者がrootや他ユーザーになっていると失敗しやすい
-
- ネットワークが不安定な環境では途中中断が起きやすい
実際の活用例
1. パフォーマンス最適化
LCP（Largest Contentful Paint）やCLS（Cumulative Layout Shift）などのCore Web Vitalsを、エージェントに performance_start_trace コマンドで計測させ、結果を分析できます。
2. バグの自動検出
フォーム送信失敗、ネットワークエラー、CSS崩れなどを、AIがブラウザ実行中にログやDOMを調べて原因を提示します。
3. ユーザーフローの自動検証
ログイン→操作→結果確認という一連の流れを、AI+MCPで自動化し、人がブラウザ操作するように検証できます。
注意すべき点
セキュリティ・プライバシー
-
chrome-devtools-mcpはブラウザの内部状態（DOM、ネットワークリクエスト、コンソール）をエージェントに晒します。
-
個人情報、認証トークン、機密データがブラウザにある場合は危険です。公式でも「Avoid sharing sensitive or personal information」と明記されています。
キャッシュ管理
- 一時フォルダの残骸やキャッシュ破損が思わぬエラー（今回の"ENOTEMPTY"など）につながるので、定期的に「クリーン」状態を保つのがおすすめです。
まとめ
今回のつまづきが誰かの役に立てれば幸いです。