アドオンなしでも色々できるFirefox開発ツールのご紹介!

エンジニアのタケヨシです。
名前だけでも覚えて帰ってください。

この記事は Firefox 開発ツール Advent Calendar 2016 12日目の記事です。

皆様、Firefoxの開発ツールを利用していますでしょうか。
Firefoxユーザーの中にはまだFirebugメインの方もいるかと思います。

ただ、Firebugは先日開発終了の告知がされました。
今後は開発ツールの利用してほしいとのことです。

これを機に乗り換えようと思っている方、利用を始めたばかりの方など、
これから紹介する内容が参考になりましたら幸いです。

さて、さっそく本題へ。
今回は自分が普段業務で利用しているFirefoxの開発ツールの機能などをご紹介できればと思います。
※本記事の画像はFirefox Developer Editionの画像となります。

テーマの切替

Firebugの開発が終了の旨をお伝えしましたが、その実、開発ツールにいくつか統合されている機能があります。
その1つがテーマです。

Firefoxには三つテーマがあり、

  • Light
  • Dark
  • Firebug

の三種類。当初はLightとDarkのみでしたが、Firefox48のときに追加されました。
テーマの変更は設定画面(歯車のアイコン)から行うことができます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-09-19-45-12

スクリーンショット

続いて、Firefoxではブラウザでページのスクリーンショットをとる場合には、
追加でアドオンを入れる必要がありません。

なぜなら、開発ツールに既に統合されているからです。

利用方法

いくつか方法があると思いますが、ここでは自分が知っている二つのやり方をご説明いたします。

1.開発ツールバーから行う方法

デフォルトではスクリーンショットをするためのアイコンが表示されていないためまずは有効にする必要があります。
有効にするには、設定画面の「ページ全体のスクリーンショットを撮影します」の項目にチェックをいれます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-09-19-56-44

アイコンが表示されたら、あとはページを見ているときにそのカメラアイコンをクリックするだけで、キャプチャが自動的に作成されて保存されます。

2. 開発ツールバーから行う方法

FirefoxにはGUIな開発ツールだけでなく、コマンドラインで開発ツールを利用できる開発ツールバーというのがあります。
この開発ツールバーからもスクリーンショットを作成することができます。

開発ツールバーを起動するには ウインドウのツールバー、またはshift + f2で起動することができます。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-09-20-11-02

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-09-20-15-58

起動すると、ウインドウの下部にコマンドラインバーが出てきます。
表示されたら[screenshot]と入力すると、現在ウインドウに表示されている範囲のみでスクリーンショットが作成されます。

上記画像の横に青文字の[filename][option]と出ていますが、これはオプションとなっており、
全画面撮影(カメラアイコンと同じ)だったり、ファイル名の指定(拡張子はpng)をすることができます。
例えば、全画面撮影で名前をつけたい場合は[screenshot fullpagecapture.png –fullpage]と入力するとページ全体を撮影したfullpagecapture.pngというファイルが作成されます。
他にもいくつかオプションがあるので、実際に入力して試して見てください。

ノードのスクリーンショット

この機能は意外と知られていないんでしょうか。

例えば、ページの一部だけをスクリーンショットで利用したいときってありませんか。
その場合、全体をキャプチャして、一部を切り取って、またキャプチャツールで範囲選択して……など
といったのが一般的な手順かと思います。

ですが、Firefoxでは開発ツール簡単にスクリーンショットが取れるんです。

利用方法

開発ツールのインスペクタツール(Win: ctrl + shift + C, Mac: cmd + option+ C)で、好きなDOMツリーのところでコンテキストメニュー(右クリック)を開くと「ノードのスクリーンショットを撮影」というメニューをクリックすると、そのDOMの範囲だけのスクリーンショットが作成されます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-09-20-33-18

ページの一部だけを共有したいときに簡単に作成できるので、キャプチャを頻繁に利用される方には便利な機能だと思います!

カラースポイト

ページ上で使われている色を取得したい時に使うツールです。
この機能もアドオンなどを入れて利用している方は多いかと思います。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-09-20-41-20

利用方法

ツールバー -> web開発 -> スポイト

で利用が可能です。また、開発ツールのインスペクタモードの右側にスポイトアイコンがあるので、
そこからも利用可能です。※バージョン50の場合

ページの要素を表示・非表示を切り替える

ページ上の要素を一旦非表示にしたイメージを確認したいときとかに利用できるものです。
これもインスペクタツールです。

要素を選択している状態で h キーで表示・非表示の切替が簡単にできます。
これはcssのvisitbilty:hiddenを切り替えている状態です。

captureddd

要素に設定されているJSのイベントを見る

こちらもインスペクタツールです。
Javascriptでクリックやスクロールイベントで設定されているイベントをみれるツールです。

各ノードのところでイベントが設定されているものは[ev]というラベルがあります。
ここをクリックすると、どのイベントがどのファイルで設定されているのか見ることができます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-09-20-44-21

※注意点として、イベントバブリングを利用したもの(jQueryだと$(親要素).on(‘イベント名’,’子要素’, fnc)とか)だと、
子要素の方には表示されないのでご注意を。

終わりに

今回は個人的によく使っている機能を取り上げました。

Firefoxの開発ツールは他にもいろんな機能があります。
スクラッチパッドや、レスポンシブビューなど、JSデバッグのツールもです。
3Dビューは最近なくなってしまいましたが、以前はありました。
最近だと、position:absoluteやfixedが設定された要素をページ上で動かすことができる機能が増えました。

公式サイトのドキュメントにも沢山情報がありますので、ぜひいろいろ試して見てくださいませ!