適切に構成されている場合、Firefoxは究極のWeb開発ツールになり、作業中のページに直接アクセスできるため、リアルタイムでページのスタイルを設定したり、JavaScriptをデバッグしたり、HTMLを編集したりすることができます。
Web開発用に個別のプロファイルを作成する
これらの開発ツールをすべてインストールすると、Firefoxは非常に重いブラウザになるため、最初にFirefoxの新しいプロファイルを作成する必要があります。
これらの引数を使用して新しいショートカットを作成し、WebDevをプロファイルの名前に置き換えることで、通常のプロファイルと同時に別のプロファイルを起動できます。もあります より詳細な説明 これを行う方法の。
firefox.exe -P WebDev -no-remote
これで、FirefoxをWeb開発専用の個別のプロファイルで構成したので、Firefoxを究極のWeb開発ツールにするために使用できる拡張機能を見てみましょう。
必須のWeb開発拡張機能
これらはすべて、私がWeb開発に定期的に使用している拡張機能です。
Firebugは、JavaScriptをデバッグし、CSSとhtmlを表示するための最も強力な拡張機能です。コードとCSSに動的な変更を加え、それを使用してAjaxコードをデバッグできます。それは本当に最高の拡張機能です。
x年連続で最高の拡張機能の1つ。これはすべての開発者にとってなくてはならないものですが、すでに聞いたことがあるでしょう。
この拡張機能は非常に軽量な拡張機能であり、ページ上の要素とそれに割り当てられたクラス/ IDを簡単に表示できます。要素の簡単な情報が必要な場合は、Web開発者拡張機能よりも簡単に使用できます。また、ページから要素を削除するために使用することもできます。
簡単に色を選択できます。スタイルシートのどこかに埋め込まれている色を見つけるのに苦労する必要はもうありません。
複数のビューソースプロファイルを設定して、さまざまなアプリケーションでソースを開くことができます。
この拡張機能を使用すると、ページのHTMLを簡単に検証し、[ソースの表示]パネルにインストールできます。
これは正確にはウェブ開発者向けの拡張機能ではありませんが、Greasemonkeyは特に、一般的に実行されるアクションを自動化する機能に優れています。これは、ウェブ開発者にとって大きな時間の節約になります。
この拡張機能を使用すると、画面上の距離を簡単に測定できます。面積を測定したら、画面の周りの長方形をドラッグして比較に使用できます。
いえ ゔぃえｗ ／ IEタブ ／ OperaView ／ FirefoxView ／ Safariビュー ／ IE View Lite
これらの拡張機能（選択してください）を使用すると、さまざまなブラウザーで現在のページを簡単に表示できます。 IE Tabを使用すると、タブ内でIEを実行することもできます。
キャッシュをクリアします。新しいCSSの変更をチェックするのに特に便利です。
Firefoxの再起動拡張機能は、すべてのタブとセッションをそのままにしてFirefoxを閉じて再起動するのに非常に便利です。
Tab Mix Plus拡張機能は一般的に優れた拡張機能ですが、ウェブ開発者にとって本質的に便利な機能がいくつかあります。タブの複製とタブのURLのコピーです。
YSlow拡張機能は、Yahooの新しい拡張機能であり、ページを分析して、どこで間違いを犯しているかを知らせます。サイトのパフォーマンスを評価することもできます。右下隅に小さなゲージがあります…ページの合計サイズと読み込み時間がわかります。非常に便利な拡張機能ですが、Firebug拡張機能が必要です。
Dummy Lipsumジェネレーター拡張機能は、有名なLorem Ipsumテキストに基づいてダミーコンテンツを生成します。これは、サイトに偽のコンテンツを配置するのに非常に役立ちます。
Screengrab拡張機能を使用すると、ページのスクリーンショットを撮ることができますが、通常のスクリーンショットツールではできないことを実行できます。つまり、表示可能な部分だけでなく、ページ全体の画像を撮ることができます。
使用できる拡張機能は他にもたくさんありますが、これらは私が見た中で最高のものです。定期的に使用する別の拡張機能がある場合は、コメントに言及を残してください。
この時点で、Firefoxは究極のWeb開発ツールになりました。特にFirebugの使い方を学ぶために時間をかけてください。
