Firefox Developer Editionとは？Firefoxとの違いや追加ツール・使い方を解説！

この記事をお読みになる方は、Firefox Developer Editionとはなんだろう、と思ってたどり着いた方がほとんどでしょう。なかには関係ない単語で検索してこの記事にたどり着いてしまい「Firefox Developer Editionって初めて見るけれど、なに？」と思った方もいらっしゃるかもしれません。

Firefox Developer Editionとは「Developer Edition」の名の通り、Firefoxの開発者向けバージョンです。そのため、FirefoxにはないWeb開発者向けの数多くの機能が追加されているのです。

Firefox Developer Editionが開発者向けのブラウザと聞くと、自分には関係のない代物に思えるかもしれませんが、そうではありません。これらの追加された機能は、使い方次第で開発者以外にも大いに役立つのです。

たとえば、スタイルエディタでブラウズしているページのCSSやHTML本体をいじれるので、その場で画面を変えることができます。スタイリッシュだけれど見づらいページを見易くしたり、別タブで開けない画像を探し出してじっくりと眺めたりと、できることが倍増するのです。

また、最近増えてきたスマートフォン用ブラウザ向けのサイトにパソコンのブラウザでアクセスしてしまって見づらく感じる場合も、スマートフォンの画面をエミュレートすることで見易くできます。

ほかにも思いもよらぬ使い方で、あなたのブラウズ環境を一層便利にしてくれるのが、Firefox Developer Editionなのです。

Firefox Developer Editionは、Firefoxとはブラウザとして様々な点で違いがあります。

もちろん開発者向けのツールが最初から多数組み込まれているのが一番の違いですが、アイコンやブラウザの外見にもかなりの違いがあります。

上のアイコンを見ても、明るい配色のFirefoxとは違い、Firefox Developer Editionの方がクールで落ち着いた感じを与えます。狐の抱えている地球がワイヤーフレームになっているのは、開発者向けらしく世界の構造を表しているのでしょう。

実際にFirefox Developer Editionでサイトにアクセスすると、アイコン同様に明るい印象のFirefoxとは違い、落ち着いた印象を与えてくれます。

これは画面上部のタブやアドレスバーが暗いためで、もしこの雰囲気が気にいったけれどもFirefox Developer Editionを使うまでには踏み切れないようでしたら、Firefoxのテーマを変更することで、似たような落ち着いた雰囲気にすることもできます。

テーマの使い方については、以下のリンク先の記事を参考にして下さい。

FirefoxユーザーがGoogle Chromeに移行しきれない理由には、Googleという大企業にブラウザを独占されたくない、という意向も少なくないでしょう。しかし一番の理由は、FirefoxのアドオンがGoogle Chromeの拡張機能よりも大幅にできることが多い点にあると言っていいでしょう。

こうしたFirefoxの自由度の高さは、Firefox Developer Editionになっても違いはありません。Firefox以上の機能が追加されながらも、使い勝手に変化はないのです。

冒頭でも述べましたが、開発者向けをうたうFirefox Developer Editionですが、使い方次第で普通のユーザーにも便利に使えますし、なによりもこれからWebについて勉強しようと思うのならFirefox Developer Editionに勝るブラウザはないでしょう。

あなたがWordPressなどで自分のブログを持っている、もしくは始めようとしているのであれば、Firefox Developer Editionを使わない手はありません。

Firefox Developer Editionに追加された機能である「スタイルエディタ」を使うと、ブラウザ上でサイトを開いたまま各種パラメーターをいじることで、ページを編集し、それをリアルタイムに確認できるのです。

普通ならパラメーターを変更したら、再レンダリングしてページがどうなるかを確かめる、というプロセスを踏むところが、リアルタイムで操作できるのですから、大幅に手間を省けます。あなたが満足できるスタイルのブログも容易に仕上がることでしょう。

画面サイズをスマートフォンやタブレット用に変更して内容を確認できるレスポンシブデザインビューや、JavaScriptの開発を促すJavaScriptデバッガーなどを使えば、Web開発が容易になります。

ブラウザとサーバーの間で交わされる通信のすべてをチェックできるネットワークモニタも大いに役立つはずです。

Firefox Developer Editionは以下のリンクからダウンロードが可能です。

早速インストールして、その力を試してみましょう。

Firefox Developer Editionが特別なFirefoxだからといって、ダウンロードやインストールに特別な点はありません。

上記リンクからFirefox Developer Editionのページに飛んだら、まずは”↓Firefox Developer Edition”と書かれたボタンをクリックします。

ダウンロードし終えれば、他のソフトと同様にインストールするだけです。以下はMacでのインストールの様子ですが、Firefox Developer Editionのアプリをアプリケーションフォルダに移動するだけで終了です。

インストールが終了したら、早速立ち上げてみましょう。

Firefox Developer Editionで追加された主な機能は以下の通りです。
 

なお、上で挙げた中でも特に便利な機能を、以下に使い方とともに紹介します

スタイルエディタは、Firefox Developer Editionで見ているページに関連付けられたすべてのCSSを閲覧・編集できるのみならず、新たなCSSを作成してページに適用したり、別途用意したCSSをページに適用したりできます。

変更は即座に画面に反映されますので、CSSを学ぶ教材としても強力です。

レスポンシブデザインビューでは、パソコンのみならずスマートフォンやタブレットなどの解像度に画面表示を切り替えられます。下の動画のように、iPhoneやGalaxyなどの主要端末での見え方を確認できるのです。

開発者のみならず、パソコン上からのスマートフォンを偽ってのアクセスにも利用できる非常に便利な機能です。

以上、Firefoxとは一味違うFirefox Developer Editionの使い方を中心にお伝えしました。Firefoxに追加された開発者向けの開発ツールを利用することで、これまでの一般的なブラウザとは一味違うWeb利用が可能となる、便利なFirefox Developer Editionを使って、Webの知らない側面に触れて新しい知識を得てくださることを祈っております。