全体のサイクル: コンソール 、 コマンド 、 デバッグ 、 プロファイリング
Firebugには素晴らしい機能があります-独自の機能です。
たとえば、Prototypeでそれらのいくつかに既に会っています。
そして、すべてが正直であることを疑わないように、 Firebugホームページを引き続き苦しめます。 接続されたjsファイルはありません。
指定されたIDを持つ1つの要素を取得するには:
$(id) (idはページ上の一意の要素であることを忘れないでください)
$( 'main' );
$( 'content' );
このCSSセレクターに適合する要素の配列を取得するには :
$$(セレクター) (ただし、セレクターは多くの要素を返すことができます)
$$( 'p' );
$$( 'div > div#content > div.fullColumn' );
xpathで要素を選択することもできます:
ここで xpathについて学ぶ
$ x(xpath) (xpathは要素の配列も返します)
$x( '/html/body/div/img' );
$x( '/html/body/div/img[3]' );
そして今、新しいものを発見する必要があるため、上記のプロトタイプのサイトに行きます。
オブジェクトのすべてのプロパティの名前を含む配列を取得するには:
keys(Prototype);
keys(CodeHighlighter);
オブジェクトのすべてのプロパティの値を含む配列を取得するには:
values(Prototype);
values(CodeHighlighter);
マウスに触れることなくコンソールをクリーニングできます。
clear();
ページでhtmlを調べることもできます。
(2つのパラメーターを取ります。1つ目はオブジェクト、2つ目はFirebugタブです)
inspect($( 'content' )); /* , inspect($('content'), 'html'); */
inspect($( 'content' ), "css" );
inspect({a: 'b' }, "script" );
inspect($( 'content' ), "dom" );
次の記事では次の関数セットが必要になるため、すべてを順番に検討します。
次に、ブレークポイント(スクリプトを実行するためのブレークポイント)を設定し、すべてが機能することを確認し、後で気にならないように削除します。
( debug()は、指定された関数の最初の行にブレークポイントを設定します)。
element = $( 'header' );
element.hide();
debug(Element.Methods.hide);
element.hide();
undebug(Element.Methods.hide);
element.hide();
ロガーをインストールし(関数呼び出しをログに記録)、すべてが機能することを確認し、後で気にならないように削除しますが、同時にメインのものを元の形式に戻します:
( monitor()は、関数が呼び出されるたびにコンソールに書き込み、その名前とパラメーター)。
element = $( 'header' );
element.show();
monitor(Element.Methods.show);
element.show();
unmonitor(Element.Methods.show);
element.show();
次に、イベントロガー(ページで発生するイベントのログ)をインストールし、すべてが機能することを確認し、伝統的にそれを削除します。
( monitorEvents()は、オブジェクトに発生するすべてのイベントについてコンソールに書き込みます)。
デフォルトでは、すべてのイベントがキャッチされますが、さまざまなタイプのイベントをキャッチできます。
「マウス」と「キー」は私たちにとって最も興味深いものです(目的を推測するのは難しくないと思います)
ただし、特定のイベントにバインドすることもできます。
「構成」、「コンテキストメニュー」、「ドラッグ」、「フォーカス」、「フォーム」、「キー」、「ロード」、「マウス」、「突然変異」、「ペイント」、「スクロール」、「テキスト」、「UI 「、そして」xul。
/* */
monitorEvents(document.window);
/* , , ;) */
unmonitorEvents(document.window);
/* */
この記事は、 FirebugコマンドラインとMichael Syncブログに基づいています。
*このソースコードは、 ソースコードハイライターで強調表示されました。