Web開発者にとって必須のFirefoxツールを見る

Firefoxは長い間Web開発に好まれてきたブラウザです。その仕事をするのに便利なアドオンがたくさんあります。この記事では、Web開発を行う場合にインストールすることが不可欠であると考えるアドオンをいくつか調べます。また、これらのアドオンに含まれている可能性のあるいくつかの機能についても説明します。.

まず、Firebugをインストールする必要があります。.

Firebug

FirebugはWeb開発に必須のアドオンです。 Firebugの入手先がわからない場合は、ここでインストールできます。おそらく、Firefoxをアクティブにする前に再起動する必要があります。.

その後、次のいずれかの方法でFirebugを見ることができます。このメニューに従う ツール> Web開発者> Firebug, Webページを右クリックして “Firebugで要素を調べる”.

あるいは、FirefoxでFirebugアイコンを見つけてクリックすると、firebugウィンドウが表示されます。

Firebugはまったく同じです Chromeデベロッパーツール. HTMLの構造とスタイルを見るためのパネルと、エラー、警告、ログを見るためのコンソールパネルもあります。しかし、私はあなたが役に立つと思うかもしれない願っているかもしれないいくつかのより多くのヒントがあります.

ボックスのサイズ調整

HTML要素は、余白、余白、オブジェクトの大きさ（幅/高さ）で構成されるCSSボックスモデルで構成されています。これらのプロパティを変更する必要があるかもしれません。その場合は、変更したい要素の1つを選択してから、 レイアウト パネル.

このパネルには、CSSボックスモデルの図とその情報があります。 幅 そして 高さ. これら2つのプロパティはCSSでは規定されていませんが, このツールは値を決定するのに十分賢いです。値を変更する必要がある場合は、値をクリックして上下の矢印キーを使って値を増減することができます。.

計算スタイル

多くの状況で、あなたはおそらく特定のスタイルが適用されない理由を疑問に思います。特に数千行のスタイルがある場合は、より簡単で速い方法の1つは、 計算スタイル パネル。この例は、アンカータグのテキストの色が次のように上書きされることを示しています。 .ボタン の背景は .ボタン クラスはによって上書きされます .button.add.

フォントファミリーを調べる（簡単な方法）

あなたはおそらくこのようなものを見つけることが多いでしょう。 フォントファミリー さまざまなフォントファミリを持つCSSのプロパティ。残念ながら、これはブラウザにどのフォントを使用するかを具体的に教えてくれるわけではありません。識別を容易にするために、このFirebugエクステンションをインストールすることができます。 FireFontFamily.

インストールが完了したら、あなたのWebページをロードしてください。そうすれば、どのフォントファミリーが適用されているかがはっきりわかります。私たちの場合、それは事実です Helvetica Neue （ショット参照）.

パフォーマンスの分析

これはひどいかもしれませんが、サイトスピードはウェブサイトの品質を決定する際のGoogleのパラメータ（アルゴリズム）の1つです。より速くロードされるWebサイトは、よく開発されていると見なされ、コンテンツの観点から上位にランクされます。だからスピードは見落とされるべきものではありません.

ネットパネル

あなたのウェブサイトのパフォーマンスを検査するためにあなたが訪問する必要があるかもしれない最初の場所は ネット パネル。このパネルはあなたのウェブサイトがロードされた時にあなたのウェブサイトのHTTPリクエストを記録します。以下のスクリーンショットは、ロードしたWebページを示しています。 42リクエスト と周り 4.36秒 ロードする.

それから、HTTPリクエストをHTML、CSS、そして画像のようなタイプでソートすることができます。.

イースロー!

さらに、あなたもインストールすることができます YSlow, Yahoo！からのFirebugの拡張。それが活性化された後、あなたは明示的にYslowと呼ばれる追加のパネルを見つけるでしょう。!.

に似ている ネット パネル、Yslow！ Webページが読み込まれたときのパフォーマンスを記録しますが、その理由はWebページが遅い理由とそれを解決するために何ができるかについても教えてくれます。この例では、Webページに対してテストを実行し、スコアが付けられています。 全体的なパフォーマンスは86, どれがOKと見なされます.

ページスピード

あるいは、GoogleからPage Speedをインストールすることもできます。に似ている イースロー!, テスト結果は多少異なる場合がありますが、Webサイトの速度パフォーマンスをテストします。この例は、同じWebページであることを示しています ページスピードによると82のスコア.

Web開発者ツール

Web開発者向けツールは明らかにWeb開発者向けであり、このツールバーにはたくさんの機能がまとめられています。しかし、以下のこれは私のお気に入りの一つです.

画像検査

Webページから画像情報を取得する必要がある場合があります。私は一般的に人々がブラウザを横切ってつまずくことによってまたはイメージを右クリックして選択することによってこれをするのを見ます 画像情報を見る, そのようです：

しかし、多くの画像から情報を取得する必要がある場合、この方法はあまり効率的ではありません。その場合は、画像アドオンからの機能。この機能はツールバーのImageメニューから簡単にアクセスできます。.

そして、この例は、画像の大きさと画像ファイルのサイズを同時に表示する方法を示しています。

Firefox組み込みツール

最近のバージョンでは、FirefoxはWeb開発者向けにその組み込み機能を大幅に強化しました。それらのいくつかは以下のとおりです。

ネイティブ検査エレメント

このネイティブ 要素を検査 Firefoxから “Firebugの要素を調べる”, それは実際には異なる方法で動作します.

今回は、この機能については詳しく説明しません。レイアウトとデザインの違いはありますが、FirebugのHTMLとCSSのパネルと基本的に同じです。しかし、試してみる価値がある1つの際立った特徴があります。 3Dビュー.

を使う 3Dビュー Webページの構造を詳しく見ることができます。このビューをアクティブにするには、ボタンの右下にあるボタンを見つけます。 “Firefoxネイティブ検査エレメント”. これが 3Dビュー のように見えます.

私は他の機能ほど頻繁には使用しませんが、それは私が認めるMozillaからの非常に革新的な機能であり、確かに特定の状況で非常に役に立ちます。.

Webデザインビュー

レスポンシブWebデザインの人気が高まって以来、Firefoxはレスポンシブブックマークレットをブラウザに取り入れました。このツールにより、ブラウザウィンドウのサイズを変更せずに、さまざまなビューポートでレスポンシブWebサイトをテストできます。.

このビューはこのメニューから利用できます。 ツール> Web開発者> Webデザインビュー. そして、これはビューがどのように見えるかです.

スタイルエディタ

最後に、CSSを頻繁に使用しているのであれば、おそらくこの機能に夢中になるでしょう。 11のバージョン以来、Firefoxは追加しました スタイルエディタ ネイティブ開発者ツールで.

この機能は、 Webデザインビュー, それはあなたがCSSを編集し、ブラウザ上で即座に影響を見て、CSSソースファイルに直接影響する変更を保存することを可能にします.

スタイルエディタは次のメニューから利用できます。 ツール> Web開発者>スタイルエディタ.

最終的な考え

これらのFirefoxアドオンにはたくさんの機能が満載されています。ここで説明している機能は、Web開発中によく使用する機能のほんの一部です。それにもかかわらず、FirefoxでWeb開発の生産性を向上させるのに役立つかもしれない他のいくつかのヒントがあるかもしれません.

頻繁に使用する機能は何ですか？あなたは下のコメントボックスであなたの考えを共有することができます.