Firefox 31 の開発ツールに便利なカラーピッカー機能が実装される

Firefox 31 の開発ツールに、閲覧中の Web ページから色情報を取得する新しいカラーピッカー機能 「Eyedropper」 が実装されました。1px 単位で選択できるため、細かいグラデーションなどの一部でもピックアップしやすくなっていて便利です。

Firefox Aurora現在、Firefox Aurora としてリリースされている、Firefox 31 の開発ツールに新しいカラーピッカー機能 「Eyedropper」 が実装されました。

閲覧中の Web ページから、色情報をピックアップできますが、1px 単位で選択できるため、細かいグラデーションなどの一部でもピックアップしやすくなっていて便利です。

開発ツールの設定に、「Grab a color from the page」 (ページから色を取得) という設定項目がありますので、チェックを入れて有効にします。

カラーピッカー機能を有効にする - Firefox 31

すると、開発ルールにカラーピッカーのアイコンが表示されます。このとき、インスペクタのカラー設定 (Default color unit) で選択されている形式で色情報が取得されますので、お好みで設定しておくといいでしょう。

カラーピッカー機能のアイコンが表示された例 - Firefox 31

カラーピッカーのアイコンをクリックすると、ページの任意の場所を選択して色情報を取得できます。カーソル周辺は拡大されて、1px 単位で選択ができますので、細かい部分の色情報を調べたいときにも便利。

カラーピッカーで選択 - Firefox 31

ピックアップした色情報はクリップボードに保存されますので、ペーストして使うことができますよ。

また、同機能はインスペクタからも使用できます。

インスペクタからカラーピッカーを使用 - Firefox 31

今まで個人的にカラーピッカー機能は ColorZilla のお世話になっていました。ColorZilla は色々と便利機能もついていますのでこれはこれで重宝するんですが、今回実装された Firefox 標準の機能も便利なので今後は活躍しそう。

インスペクタでボックスモデルの編集も可能に

あと、インスペクタで表示されるボックスモデルの情報、今までは数値を見るだけでしたが、この各数値を編集できるようになりました。数字部分をクリックすると編集モードになります。結構便利かも。

ボックスモデルの編集 - Firefox 31

関連エントリー

関連リンク

記事をここまで御覧頂きありがとうございます。
この記事が気に入ったらサポートしてみませんか?