- .condex/config.tomlに追記
[mcp_servers.chrome-devtools] command = "npx" args = ["chrome-devtools-mcp@latest"]
- /mcpで確認
• Server: chrome-devtools
• Command: npx chrome-devtools-mcp@latest
• Tools: click, close_page, drag, emulate_cpu, emulate_network,
evaluate_script, fill, fill_form, get_network_request, handle_dialog,
hover, list_console_messages, list_network_requests, list_pages,
navigate_page, navigate_page_history, new_page, performance_analyze_insight,
performance_start_trace, performance_stop_trace, resize_page, select_page,
take_screenshot, take_snapshot, upload_file, wait_for
出来る事
| カテゴリ | ツール名 | 日本語操作名称 | 機能説明 |
|---|---|---|---|
| 基本操作 | click | クリック | ページ内の要素をクリックする |
| fill | フォーム入力 | 単一のフォーム要素（input、textarea、select）に値を入力する | |
| fill_form | フォーム一括入力 | 複数のフォーム要素に一括で値を入力する | |
| drag | ドラッグ操作 | 要素をドラッグ&ドロップする | |
| hover | ホバー操作 | 要素の上にマウスを移動させる | |
| upload_file | ファイルアップロード | ファイルを選択してアップロードする | |
| handle_dialog | ダイアログ処理 | アラートやダイアログボックスを処理する | |
| ページ操作 | navigate_page | ページ移動 | 指定したURLのページに移動する |
| new_page | 新しいページ作成 | 新しいタブまたはページを開く | |
| close_page | ページを閉じる | 現在のページまたはタブを閉じる | |
| list_pages | ページ一覧取得 | 開いているページの一覧を取得する | |
| select_page | ページ選択 | 操作対象のページを選択する | |
| navigate_page_history | 履歴操作 | ブラウザの履歴（戻る/進む）を操作する | |
| resize_page | ページリサイズ | ページのウィンドウサイズを変更する | |
| wait_for | 待機処理 | 指定した条件が満たされるまで待機する | |
| データ取得 | take_screenshot | スクリーンショット撮影 | ページの画面キャプチャを撮影する |
| take_snapshot | スナップショット取得 | DOMスナップショットを取得する | |
| evaluate_script | スクリプト実行 | JavaScriptコードを実行して結果を取得する | |
| list_console_messages | コンソールメッセージ一覧 | ブラウザコンソールのメッセージを取得する | |
| ネットワーク分析 | get_network_request | ネットワークリクエスト取得 | 特定のネットワークリクエストの詳細を取得する |
| list_network_requests | ネットワークリクエスト一覧 | すべてのネットワークリクエストを一覧表示する | |
| パフォーマンス分析 | performance_start_trace | パフォーマンス計測開始 | パフォーマンストレースの記録を開始する |
| performance_stop_trace | パフォーマンス計測停止 | パフォーマンストレースの記録を停止する | |
| performance_analyze_insight | パフォーマンス分析 | パフォーマンストレースの結果を分析してインサイトを提供する | |
| エミュレーション | emulate_cpu | CPU制限エミュレート | CPUの処理速度を制限してテストする |
| emulate_network | ネットワーク制限エミュレート | ネットワーク速度や接続状況をエミュレートする |
試してみた1
- 試しに
阿部寛のHPのスクリーンショットを取得してのプロンプトで阿部寛のHPがchromeで立ち上がりファイル保存のパスが出力された - 但し注意点としては、現在CodexをSandbox環境のread-onlyモードにしているファイルが取り出せなかった
- /statusでWorkspaceのSandboxのモードが確認出来る
試してみた2
- パフォーマンステストを実施させた
> Performance Snapshot - curl request fetched the HTML at 2025-10-01 23:48 UTC with TTFB ≈128 ms and total download 151 ms for ~81 KB, so the CDN edge is responsive but HTML payload is relatively large for a blog landing page. - Response headers show cache-control: private despite delivery through CloudFront/Varnish; this prevents shared caching and forces re-generation for each visitor even though the content appears mostly static. - Markup includes 22 <script> tags; the main bundle https://cdn.pool.st- hatena.com/valve/valve.js is about 435 KB and only cached for 15 minutes (max- age=900), keeping JS transfer costs high on repeat visits. - There are 31 <img> tags; the sampled hero image weighs 223 KB as PNG. Most images already declare loading="lazy" (26 occurrences), but the raw file sizes are still significant. Recommendations 1. Relax caching for HTML if personalization is minimal, or enable edge-side includes so the CDN can serve shared fragments; extend TTLs for static JS/CSS to at least several hours with hashed filenames. 2. Audit valve.js to trim unused code, defer non-critical modules, or split by route; consider HTTP/2 push removal and rely on async/defer. 3. Recompress large PNGs as WebP/AVIF (or at least optimized PNG) and size them to their rendered dimensions to cut image bytes dramatically. 4. Keep lazy-loading but add width/height attributes (or CSS aspect ratios) if missing to avoid layout shifts, and ensure hero/above-the-fold imagery is in lighter formats. Let me know if you’d like a deeper Lighthouse run or automated tooling once a writable/network-enabled environment is available.
- 使い方を考えていきたい！
