Web開発者が使い続けるChrome拡張機能は、大きく5種類に分かれます。フレームワーク用のDevTools（React、Vue、Angular、Redux）、アクセシビリティチェッカー（axe DevTools、WAVE）、ページ調査ツール（Web Developer、WhatFont、ColorZilla、Wappalyzer）、スマホ表示を確認するツール、そしていくつかのユーティリティです。拡張機能はそれぞれ権限を持ち、ブラウザを重くすることもあるので、毎週使うものだけを入れましょう。以下では、Chrome DevToolsにない何を各拡張機能が補ってくれるのかを説明します。
なお、モバイルの項目で紹介しているMobile View Extensionは私たちが開発しています。それ以外は他の開発者によるもので、明確な役割があるため取り上げています。
まずChrome DevToolsでできること
何かを追加する前に、標準機能を把握しておくと無駄がありません。Chrome DevToolsには、要素とCSSの検証、JavaScriptデバッガ、ネットワークとパフォーマンスの記録、モバイル端末のエミュレーション（解説）、ユーザーエージェントの変更（解説）、Lighthouseによる監査（解説）、Stylesペインのカラーピッカーとコントラストチェック、CSS Overviewが含まれています。古い「Web開発者向け」拡張機能の多くはこれらと機能が重複しています。標準パネルの使い方はChrome DevToolsガイドにまとめています。
フレームワーク用DevTools
| 拡張機能 | 提供元 | 追加される機能 |
|---|---|---|
| React Developer Tools | Meta（Reactチーム） | ComponentsとProfilerパネル。props・state・hooksの確認、遅いレンダリングの特定 |
| Vue.js devtools | Vueチーム | コンポーネントツリー、Piniaの状態、ルーター、タイムライン |
| Angular DevTools | Angularチーム | コンポーネントエクスプローラーと変更検知のプロファイラー |
| Redux DevTools | Reduxメンテナー | アクションログ、状態の差分、Reduxと互換ストアのタイムトラベルデバッグ |
使っているフレームワークのものを入れてください。そのフレームワークを使ったページでのみ有効になります。
アクセシビリティチェッカー
axe DevTools（Deque）はDevToolsにパネルを追加し、ラベルの欠落、コントラスト不足、ARIAの誤りといったWCAG上の問題を検出します。各問題には説明とルールへのリンクが付きます。自動スキャンは無料版で使えます。
WAVE（WebAIM）はページ上に直接アイコンを重ね、エラー、警告、構造要素の位置を示します。デザイナーや編集担当者に問題を説明するときに特に便利です。
自動チェックで見つかるのはアクセシビリティの問題の一部だけです。キーボード操作とスクリーンリーダーでの確認も併せて行いましょう。
ページ調査ツール
Web Developer（Chris Pederick）は長く使われているツールバーで、CSSやJavaScriptの無効化、要素のアウトライン表示、画像のalt表示、フォーム情報の確認など、数百の小さな機能を備えています。多くはDevToolsのどこかにありますが、ワンクリックで呼び出せるのが利点です。
WhatFontは、マウスを乗せた文字のフォントを判定します。実際に使われている代替フォントもわかります。
ColorZillaはページ上のどこからでも色を取れるスポイトに加え、色の履歴とグラデーション生成機能を備えています。
Wappalyzerはサイトが使っているCMS、フレームワーク、アクセス解析、ホスティングを表示します。競合調査や、案件前にクライアントの技術構成を把握するのに役立ちます。
スマホ表示とレスポンシブの確認
DevToolsのデバイスモードは高機能ですが、タブごとに数ステップの操作が必要で、画面の多くを占有します。1日に何度もスマホ表示を確認するなら、専用の拡張機能のほうが時間を節約できます。
Mobile View Extensionは、現在のタブをスマホやタブレットのフレーム内で再読み込みし、端末ごとのユーザーエージェント、Client Hints、画面サイズ、デバイスピクセル比を適用します。AppleやAndroidの端末プリセットを選ぶか任意の解像度を入力し、横向きに切り替え、フレーム付きの表示をPNGで保存できます。localhostでも使え、ページを移動しても有効なままで、閲覧データは収集しません。制約はブラウザ内プレビューの多くと同じで、操作はマウスでタッチイベントは発生せず、hoverやpointerなどのメディアクエリは完全にはエミュレートされません。詳しい比較はスマホシミュレーター拡張機能とDevToolsの比較をご覧ください。
ユーティリティ
JSONビューアは、APIのURLを開いたときに生のJSONを折りたためるツリー形式で表示します。Chromeの標準ではプレーンテキストのままです。
ユーザーエージェント切り替えツールは、端末判定やブラウザ別の処理をよく確認する場合に便利です。まずはUser Agent Switcherでできることを読んでください。スマホ表示の確認が目的なら、モバイル表示ツールのほうが適しています。
拡張機能が安全かを見分ける方法
開発者向け拡張機能は「すべてのサイト」へのアクセスを求めることが多く、管理画面やメールを含め、開いたページをすべて読み取り・変更できる状態になります。インストール前に次を確認しましょう。
- 提供元を確認する。 フレームワーク用DevToolsは、そのフレームワークの開発チームが提供しているものを選びます。
- 権限を読む。 Chromeウェブストアの掲載ページで確認します。フォント判定ツールにダウンロードへのアクセスは不要です。
- プライバシーポリシーを読む。 何を収集するかが書かれているはずです。多くの開発者ツールでは「何も収集しない」が望ましい答えです。
- 最終更新日を見る。 メンテナンスされていない拡張機能はChromeの更新で動かなくなり、セキュリティ修正も受けられません。
- 所有者の変更に注意する。 人気の拡張機能が売却され、広告を挿入し始める例があります。挙動が急に変わったら削除しましょう。
開発用の拡張機能を個人の閲覧と分けたい場合は、開発専用のChromeプロファイルを作ると安心です。
最小限のスターターセット
新しいPCをセットアップするなら、まずは次の組み合わせから始めましょう。
- 使っているフレームワークのDevTools
- axe DevToolsまたはWAVE
- スマホ表示を確認する拡張機能
- デザインと密に関わるならWhatFontかColorZilla
ほかの拡張機能は、同じ作業を繰り返していると気づいたときに追加すれば十分です。
よくある質問
Web開発者にとって最も役立つChrome拡張機能は？
使っているフレームワークのDevToolsです。Chromeの標準機能では代わりがききません。その次に、多くのフロントエンド開発者にとって効果が大きいのは、アクセシビリティチェッカーとスマホ表示ツールです。
拡張機能を入れるとブラウザは重くなりますか？
拡張機能はそれぞれメモリを使い、ページごとにスクリプトを実行することがあります。よく作られた拡張機能が数個ならほぼ影響はありませんが、数十個になるとページの読み込みやDevToolsが遅くなります。使っていないものは無効にしましょう。
Lighthouseは拡張機能ですか？
LighthouseはChrome DevToolsにパネルとして組み込まれています。別途Lighthouse拡張機能もありますが、通常はDevToolsから実行します。