FirefoxのWeb開発者メニューには、ページの検査、任意のJavaScriptコードの実行、HTTPリクエストやその他のメッセージの表示を行うためのツールが含まれています。 Firefox 10は、まったく新しいInspectorツールを追加し、Scratchpadを更新しました。
Firefoxの新しいWeb開発者機能は、FirebugやWeb開発者ツールバーなどのすばらしいWeb開発者アドオンと組み合わせることで、FirefoxをWeb開発者にとって理想的なブラウザにします。すべてのツールは、FirefoxのメニューのWebDeveloperで利用できます。
ページインスペクター
特定の要素を右クリックして選択し、検査します 検査する （またはを押す Q ）。を起動することもできます インスペクター Web開発者メニューから。
画面の下部にツールバーが表示されます。このツールバーを使用して、インスペクターを制御できます。選択した要素が強調表示され、ページ上の他の要素が淡色表示されます。
新しい要素を選択する場合は、[ 検査する ツールバーのボタンをクリックし、マウスをページに合わせて要素をクリックします。 Firefoxは、カーソルの下の要素を強調表示します。
ツールバーのブレッドクラムをクリックすると、親要素と子要素の間を移動できます。
HTMLインスペクター
クリック HTML ボタンをクリックして、現在選択されている要素のHTMLコードを表示します。
HTMLインスペクターを使用すると、HTMLタグを展開したり折りたたんだりできるため、一目で簡単に視覚化できます。ページのHTMLをフラットファイルで表示する場合は、[ ページソースを表示 Web開発者メニューから。
CSSインスペクター
クリック スタイル ボタンをクリックして、選択した要素に適用されているCSSルールを確認します。
CSSプロパティパネルもあります—をクリックして2つを切り替えます ルール そして プロパティ ボタン。特定のプロパティを見つけやすくするために、プロパティパネルには検索ボックスがあります。
ルールパネルからその場で要素のCSSを編集できます。いずれかのチェックボックスをオフにしてルールを非アクティブ化するか、テキストをクリックしてルールを変更するか、ペインの上部にある要素に独自のルールを追加します。ここに、 font-weight：太字; 要素のテキストを太字にするCSSルール。
JavaScriptスクラッチパッド
ScratchpadもFirefox10のアップデートを確認し、構文の強調表示が含まれるようになりました。 JavaScriptコードを入力して、現在のページで実行できます。
取得したら、をクリックします 実行する メニューを選択して選択します 実行します。 コードは現在のタブで実行されます。
Webコンソール
Webコンソールは、廃止され、Firefoxの将来のバージョンで削除される古いエラーコンソールを置き換えます。
コンソールには4種類のメッセージが表示され、ネットワークリクエスト、CSSエラーメッセージ、JavaScriptエラーメッセージ、Web開発者メッセージの表示を切り替えることができます。
Web開発者のメッセージとは何ですか？これは、window.consoleオブジェクトに出力されるメッセージです。たとえば、 window.console.log（ "Hello World"）; 開発者メッセージをコンソールに出力するためのスクラッチパッドのJavaScriptコード。 Web開発者は、これらのメッセージをJavaScriptコードに統合して、デバッグに役立てることができます。
ページを更新すると、生成されたネットワークリクエストやその他のメッセージが表示されます。
検索ボックスを使用してメッセージをフィルタリングします。詳細を確認したい場合は、リクエストをクリックしてください。
Firefox 10以降、Webコンソールはページインスペクターと連携して動作できます。 $ 0変数は、インスペクターで現在選択されているオブジェクトを表します。したがって、たとえば、現在選択されているオブジェクトを非表示にする場合は、 $ 0.style.display =” none” コンソールで。
コンソールとその組み込み関数の使用について詳しく知りたい場合は、 Webコンソールページ MozillaのDeveloperNetworkWebサイトにあります。
その他のツールを入手する
ザ・ その他のツールを入手する オプションを選択すると、Mozilla Add-OnsWebサイトのWebDeveloperのToolboxアドオンコレクションに移動します。それはいくつかが含まれています Web開発者向けの最高のアドオン 、FirebugとWeb開発者ツールバーを含みます。
Firefoxを数年間使用している場合は、DOMInspectorを覚えているかもしれません。それ以来、Firefoxの統合開発ツールは長い道のりを歩んできました。
