Web開発者必見！Firefox Quantumで使いたいおすすめアドオン5選

近年、多くのWeb開発者がFirefoxへ乗り換えています。そのきっかけとなったのが「Firefox Quantum」のリリースです。Quantumの登場により、FirefoxはGoogle Chromeに匹敵する高速なパフォーマンスを実現しました。

Firefoxはデフォルトでも、CSS Gridインスペクターといった先進的な機能を備えた優れた開発者ツールを提供しています。さらにアドオンエコシステムを活用すれば、より便利な機能をブラウザに追加することも可能です。

そこで本記事では、Web開発にFirefoxを活用している方にぜひ試してほしい拡張機能を厳選してご紹介します。

1. Compat Report

Compat Reportは、WebサイトやWebアプリケーションの開発時に発生しうるブラウザ間の互換性問題を特定できるツールです（現在はCSSのみ対応）。

インストールすると、開発者ツールに新しい「Compatibility」パネルが追加されます。ここから、任意のサイトが各主要ブラウザでどのように動作するかをひと目で確認できます。

互換性の問題がないブラウザバージョンは緑色、問題がいくつかあるものは黄色、多数の問題があるものは赤色で表示されます。特定のバージョンを掘り下げれば、問題の原因となっている具体的なCSSルールまでチェック可能です。

2. JSON Lite

JSON APIを頻繁に扱う方なら、ブラウザ上でJSONデータを閲覧するのが面倒だと感じたことがあるでしょう。デフォルトではデータが整形されずに表示されるため、非常に読みにくいのです。

JSON Liteはこの課題を解決してくれます。JSONおよびJSONPレスポンスをシンタックスハイライト付きで整形表示し、巨大なJSONデータを調査する際に役立つノード折りたたみ機能も備えています。

すべての機能が必要ない場合は、Firefoxに内蔵されたJSONビューアを有効にするのも一案です。アドレスバーに「about:config」と入力してdevtools.jsonview.enabledを検索し、該当項目をダブルクリックして「true」に設定しましょう。あとは任意のJSONファイルをブラウザで開くだけで、整形された結果を確認できます。

3. React DevTools

Reactは現在のWeb開発エコシステムにおいて最も人気のあるライブラリの一つです。ReactでWebアプリケーションを開発しているなら、公式のブラウザ拡張機能を使ったデバッグは大きな価値をもたらします。

インストールすると、Reactを使用している任意のWebサイト上でReactコードを調査できるようになります。アドオンのアイコンがブラウザツールバーに表示され、他のDevToolsパネルと並んで「React」タブも追加されます。このパネルでは、コンポーネント階層、props、stateなどを含むReactツリーを詳細に検査できます。

なお、Vue.jsやReduxで開発している場合は、「Vue.js devtools」「Redux DevTools」も同様にインストールしておくと便利です。

4. Fontanello

Fontanelloは、任意のWebサイトで使われているフォントを素早く特定できるツールです。このアドオンがあれば、フォントの種類を調べるためにわざわざ開発者ツールを開く必要はありません。テキストの基本的なタイポグラフィ情報が、右クリックのコンテキストメニューから直接確認できます。

5. Wappalyzer

お気に入りのWebサイトがどんな技術で構築されているのか、気になったことはありませんか？Wappalyzerを使えば、その情報をワンクリックで取得できます。CMS（コンテンツ管理システム）、ECプラットフォーム、Webサーバー、JavaScriptフレームワーク、データベースソフトウェア、アクセス解析ツールなど、さまざまな技術を自動検出できます。

まとめ

開発ワークフローをさらに強化したいなら、今回紹介した拡張機能のどれを選んでも間違いありません。あなたのお気に入りのアドオンがあれば、ぜひコメント欄で教えてください。

※本記事は2010年10月に初公開され、2018年3月に更新されました。