FirefoxのWeb開発者ツールの使い方

FirefoxのWeb Developerメニューには、ページの検査、任意のJavaScriptコードの実行、およびHTTPリクエストやその他のメッセージの表示用のツールがあります。 Firefox 10ではまったく新しいInspectorツールが追加され、スクラッチパッドが更新されました.

Firefoxの新しいWeb開発者機能は、FirebugやWeb開発者ツールバーなどの素晴らしいWeb開発者アドオンと組み合わせることで、FirefoxをWeb開発者にとって理想的なブラウザにします。すべてのツールはFirefoxのメニューのWeb Developerの下にあります。.

ページインスペクタ

特定の要素を右クリックして選択することによって特定の要素を調べる 検査する （または押す Q）あなたはまた起動することができます 検査官 Web開発者メニューから.

画面の下部にツールバーが表示され、それを使ってインスペクタを制御できます。選択した要素は強調表示され、ページ上の他の要素は淡色表示されます.

新しい要素を選択したい場合は、 検査する ツールバーのボタンをクリックし、ページ上にマウスを移動して要素をクリックします。 Firefoxはカーソルの下の要素を強調表示します.

ツールバーのブレッドクラムをクリックして、親要素と子要素間を移動できます。.

HTMLインスペクタ

クリック HTML 現在選択されている要素のHTMLコードを表示するボタン.

HTMLインスペクタを使用すると、HTMLタグを展開したり折りたたんだりすることで、一目で簡単に視覚化できます。ページのHTMLをフラットファイルで表示したい場合は、 ページのソースを表示 Web開発者メニューから.

CSSインスペクタ

クリック スタイル 選択した要素に適用されているCSSルールを表示するボタン.

CSSプロパティパネルもあります - をクリックして2つを切り替えます規則そして プロパティ ボタン特定のプロパティを見つけやすくするために、プロパティパネルには検索ボックスがあります。.

ルールパネルから要素のCSSをその場で編集できます。いずれかのチェックボックスをオフにしてルールを無効にするか、テキストをクリックしてルールを変更するか、ペイン上部の要素に独自のルールを追加します。ここで、私は追加しました フォントの太さ：太字。 CSSルール、要素のテキストを太字にする.

JavaScriptスクラッチパッド

ScratchpadもFirefox 10でアップデートされ、構文の強調表示が追加されました。現在のページで実行するJavaScriptコードを入力できます.

いったんクリックしたら、 実行する メニューと選択 実行する. コードは現在のタブで実行されます.

Webコンソール

Webコンソールは古いエラーコンソールに代わるものです。これは廃止予定であり、Firefoxの将来のバージョンでは削除される予定です。.

コンソールには、ネットワークリクエスト、CSSエラーメッセージ、JavaScriptエラーメッセージ、Web開発者メッセージの4種類のメッセージが表示されます。.

Web開発者からのメッセージは何ですか？それはwindow.consoleオブジェクトに出力されたメッセージです。たとえば、 window.console.log（“ Hello World”）; 開発者メッセージをコンソールに出力するためのスクラッチパッド内のJavaScriptコード。 Web開発者はこれらのメッセージをJavaScriptコードに統合してデバッグに役立てることができます。.

ページを更新すると、生成されたネットワーク要求と他のメッセージが表示されます。.

検索ボックスを使用してメッセージをフィルタリングします。詳細を表示したい場合は、リクエストをクリックしてください。.

Firefox 10以降、Webコンソールはページインスペクタと連携して動作することができます。 $ 0変数は、インスペクタで現在選択されているオブジェクトを表します。たとえば、現在選択されているオブジェクトを非表示にしたい場合は、次のように実行します。 $ 0.style.display =” none” コンソール内.

コンソールとその組み込み機能の使用についてもっと知りたい場合は、MozillaのDeveloper Network WebサイトのWeb Consoleページを調べてください。.

より多くのツールを入手

の より多くのツールを入手 オプションを選択すると、Mozilla Add-Ons WebサイトのWeb Developer's Toolboxアドオンコレクションに移動します。 FirebugやWeb Developer Toolbarなど、Web開発者にとって最適なアドオンがいくつか含まれています。.

Firefoxを数年間使用してきた方は、DOM Inspectorを覚えているかもしれません。それ以来、Firefoxの統合開発ツールは大きな進歩を遂げました。.