Firefox Developer Edition 6で一番クールなツール

Firefox開発者版は、今日開発者のために特別に作られた唯一のブラウザです。標準版の開発者向けツールは、開発者向け版の最初に表示されます。標準版では提供されない予定のツールもあります。今日は、現時点でいくつかのツールを見てみるつもりです。 開発者版でのみ見つけることができます.

あなたがまだ使ったことがない人、あるいは標準版のものでさえ開発者ツールにあまり慣れていない人であれば、まずMozillaによるこのクールな "DevTools Challenger"をチェックしてください。ここでは、Firefox開発者版ブラウザで以下に説明されているツールのいくつかを使って練習することができます。例は楽しくわかりやすく、説明は簡単で、追いつかない場合はビデオチュートリアルに従ってください。.

1.アニメーションインスペクタツール

CSSアニメーションはますます一般的になりつつあり、そしてFirefox開発者版によって提供されるCSSアニメーションツールは、作成されたアニメーションのあらゆるステップをたどって調べそして調べるのを容易にします。任意のアニメーションを一時停止、再生、反転することができます。スクラビングを介してフレームごとに発生していることも確認できます。.

ツールにアクセスするには、 検査官 動いている要素を右クリックして "inspect element"を選択し、次に開発ツールウィンドウの右側にある "Animations"をクリックしてツール.

2.アニメーションタイミング機能エディタ

アニメーションのタイミングは開発ツールで編集可能です、あなたは単に機能の横にあるアイコンをクリックします 規則 のセクション 検査官 ツールと関数曲線を表示するポップアップが開きます。これをドラッグして変更して、アニメーションのタイミングを調整できます。曲線を変更すると、それに応じてアニメーションの速度も変わります。.

あなたがまだキュービックベジエのアニメーション機能に慣れていないのであれば、私はそれについての詳細を学ぶためにこの記事をお勧めします.

3. CSSプロパティのカラーピッカー

Firefoxの標準版にはすでにカラーピッカーが用意されています（この記事で詳しく説明しています）。カラーピッカーは、ページから色を選択してクリップボードにコピーします。今言及しているカラーピッカーは プロパティのCSSカラー値に固有.

すべてのCSSカラー値の横に 規則 のセクション 検査官 ツール、クリックするとポップアップするカラーホイールを開くアイコンがあります。ホイールから好きな色を選択できます.

あなたがすでに欲しい色を持っていて、そしてそれがたまたまそのページにある色を持っているならば、単にカラーピッカーを開くためにポップアップの一番下のスポイトツールをクリックし、そしてあなたが欲しい色にピッカーをドラッグし、そしてそれをクリックしなさい。 CSSの色の値は、選択した色の値に変更されます。.

測定ツール

このツールを使用すると、カーソルのXY位置、および選択した部分の高さ、幅、および対角線の寸法をピクセル単位で確認できます。このツールを使用するには、まず開発者でそれを有効にする必要があります。 ツールボックスのオプション, [利用可能なツールボックスボタン]の下の[ページの一部を測定する]というチェックボックスをオンにします。.

有効にすると、ルーラーアイコンが開発ツールウィンドウの上部に表示されます。そのアイコンをクリックして、ページ上にカーソルを移動します。カーソルの近くにXY位置が表示されます。幅、高さ、対角線を測定するには、測定したい部分をクリックしてドラッグします。.

5. CSSフィルタエディタ

ページ上の要素にCSSフィルタを適用した場合は、横にアイコンが表示されます。 規則 のセクション 検査官 クリックするとCSSフィルタエディタを開くツール.

フィルタを削除するには、フィルタ名の右端にある×マークをクリックします。フィルタを追加するには、一番下のフィルタボックスをクリックして追加したいフィルタを選択し、 + 符号。各項目をドラッグして、フィルタを任意の順序に並べ替えることもできます。.

6.記憶ツール

あなたはこのツールの助けを借りて、あなたのWebページのメモリを消費しているものを見つけることができます。これにより、メモリ使用量を減らしてページ速度を向上させるための対策を講じることができます。.

このツールを使用するには、まずこのツールを有効にする必要があります。 ツールボックスのオプション "Default Firefox Developer Tools"の下の "Memory"という名前のチェックボックスをチェックしてください。チェックすると、devツールウィンドウの上部にある "Performance"の直後に "Memory"セクションが表示されます。それを選択.

このツールを使用するには、[スナップショットを撮る]またはカメラのボタンをクリックしてください。オブジェクトやスクリプトなど、メモリを消費しているアイテムのリストが表示されます。 .