mhChrome DevToolsはデフォルトでも非常に強力ですが、拡張機能やSnippets（スニペット）を活用することで、定型作業の自動化やフレームワークに特化した支援が可能になります。
この章では、日常のWeb開発を加速させるこれらのツールを実践的に活用する方法を学びます。
13.1 自作スニペットによる自動化
Snippets（スニペット）とは？
Sourcesパネル内で管理できる、再利用可能なJavaScriptコードの断片- ブックマークレットに似ており、任意のページ上で実行可能
- よく使う操作を手作業ではなくコードで再現できるのが特徴
利用手順：
- DevToolsを開く →
Sourcesパネル → 左側の「Snippets」タブを選択 - 右クリック → 「New」→ スニペットに名前をつけて作成
- 例：全画像の枠線を表示するスニペット
document.querySelectorAll('img').forEach(img => {
img.style.border = '2px solid red';
});- 作成後、右クリック → 「Run」で即時実行
ユースケース例：
- ページ内のリンクを一覧取得して表示
- コンソールに簡易なパフォーマンスログを出力
- DOM構造を再帰的に走査してaria属性の漏れを検出
13.2 便利なChrome拡張機能の紹介
Chromeには、特定の技術スタックや用途に特化した拡張機能が数多く提供されています。
ここでは、現場で特に活用頻度の高い拡張機能を紹介します。
✅ Lighthouse
- Google公式のWebサイト監査ツール
- パフォーマンス、アクセシビリティ、SEO、PWA対応などを自動評価
- DevToolsの「Lighthouse」タブから実行可能（拡張機能版もあり）
✅ React Developer Tools
- Reactアプリケーションのコンポーネント構造やprops/stateを視覚的に確認
- 再レンダリングのトラッキングやフックの状態確認にも対応
✅ Redux DevTools
- Redux状態管理のアクション履歴やstateの変化を追跡
- time travel（時系列の巻き戻し・再生）にも対応し、バグ再現が容易
✅ Web Vitals
- Core Web Vitals（LCP、FID、CLSなど）をリアルタイムに計測
- ユーザー体験の指標を数値として把握できる
🧪 実践課題
課題①：Snippetsでカスタムツールを作ってみよう
- Snippetsで「ページ上のすべての
<a>タグのリンクをコンソールに出力するコード」を書く - 実行してリンク一覧が出力されることを確認
課題②：Lighthouseで簡易監査をしてみよう
- 任意のサイトを開き、DevToolsの「Lighthouse」タブを選択
- 全カテゴリを選び、「Generate report」で診断開始
- 結果から改善点を読み取り、自分のサイトに反映してみる
📝 まとめ
- Snippets機能を使えば、よく使う処理を簡単に再実行できる自動化スクリプトを作成可能
- Chrome拡張を導入することで、特定のフレームワークやパフォーマンス分析に最適化されたツール群を活用できる
- これらの機能を併用することで、デバッグ、改善、確認のサイクルを大幅に短縮
