Firefox Developer Editionを使ってみよう

ここまでで、Firefox Developer Editionが、開発者にとっていかに魅力的かご理解いただけたのではないでしょうか。

ここからは、ダウンロードから簡単な操作方法までをご紹介していきます。

ダウンロード方法

01.png
スクリーンショット：2017年10月

ダウンロードの方法は、極めて簡単です。
Firefox Developer Editionのページにアクセスして、中央にあるダウンロードボタンをクリックするだけです。

OSに最適な形のファイルが自動的にダウンロードされるので、指示に従ってインストールまでを行いましょう。

Web開発ツールの場所

02.png
スクリーンショット：2017年10月

基本的な外見は、ダークなUIを採用した、一般的なFirefoxと変わりがないように見えるかもしれません。
確かに、そのままでも使うことはできますし、Quantumエンジンを搭載しているという点では一般ユーザーでもその表示速度に驚くでしょう。

しかし、Developer Editionの醍醐味は開発ツールです。

03.png
スクリーンショット：2017年10月

この開発ツールは、右上のハンバーガーメニューをクリックし、*「ウェブ開発」*と書かれたメニューをクリックすることで、各種ツールにアクセスすることができます。

便利な機能が満載

「ウェブ開発」の各種ツールには、Web開発者が本当に欲しかった機能が一通り揃っています。

04.png
スクリーンショット：2017年10月

例えば、レスポンシブデザインモードにアクセスすると、このような新しい画面に切り替わります。
タップしたり、スクリーンショットを撮ったりすることも可能です。

05.png
スクリーンショット：2017年10月

また、スポイトツールを使って、色を調べることもできます。
確認したいところでマウスを動かすと、その色を16進数で表示し、またクリックすることでその色のカラーコードをクリップボードに保存します。

06.png
スクリーンショット：2017年10月

インスペクターも従来以上に使いやすくなっています。
カーソルを合わせた部分の要素名・クラス名・ID名を表示し、その領域の大きさも自動で表示してくれます。
その領域がCSSグリッドであれば、領域上のグリッドを視覚化することも可能です。

他にも、Web Audio APIやService Workerなど、実験的な機能にもいち早く対応しています。