Firebug:パート1-コンソール

この記事では、Firebugと呼ばれる、みんなのお気に入りのFirefoxへのアドオン専用のシリーズを始めたいと思います。



全体のサイクル: コンソールコマンドデバッグプロファイリング



Web開発者に役立つかもしれない(または役に立たないかもしれないが、これはありそうにない)よく知られた、それほどではない機能を明らかにしようとします。



まだお持ちでない場合は、 http://getfirebug.comからダウンロードできます。







すべての例はhttp://getfirebug.com/index.htmlで実行されたので、私をフォローしてすべてを確認できます。



簡単なものから始めましょう:

文字列「Hello World!」をコンソールに出力します。

console.log( 'Hello World!' );









データ変数に含まれる文字列をコンソールに出力します。

この関数の利点は、ファイルが右側に表示され、呼び出し元の行が表示されることです。

data = $$( '.bigPara' )[0].firstChild.data;

console.debug( ' ".bigPara" = %s' , data);









コンソールを「装飾」したい場合、次の3つの機能が最適です。

リンクの総数をコンソールに出力します。

(情報メッセージに使用)

links = $$( 'a' );

console.info( ' = %i' , links.length);









コンソールの小数への出力:

(人生で何でも重宝します)

console.warn( ' Pi = %f' , Math.PI);









「.bigPara」オブジェクト自体のコンソールへの出力。クリックすると、そのすべてのプロパティが表示されます。

(エラーメッセージに使用)

console.error( ' ".bigPara" = %o' , $$( '.bigPara' )[0].firstChild);









グループ内のメッセージを表示する場合は、次を実行できます。

groupname = ' 1' ;

console.group(groupname);

console.log( " 1 %s" , groupname);

console.log( " 2 %s" , groupname);

console.log( " 3 %s" , groupname);

console.groupEnd();









また、任意のオブジェクト(dir)/要素(dirxml)の中を見ることができます

(残念なことに、彼らのサイトはオブジェクトに乏しいので、私たちは自分でやる):

console.dir({a: 'test' , b: function () { return true ;}});

console.dirxml($$( '.bigPara' ));









ちょっとしたチェックでも傷つかないことがあります:

console.assert(1 === true );









コードで迷子になり、呼び出されたすべての関数を見つけるには、適切な場所に挿入することができます。

console.trace();









操作の時間を測定することもできます。

timeName = '100' ;

console.time(timeName);

for ( var i=0;i<100;i++){

console.log(i);

}

console.timeEnd(timeName);









この記事は、 Firebug Console APIMichael Sync Blogに基づいています



*このソースコードは、 ソースコードハイライターで強調表示されました。



All Articles