全体のサイクル: コンソール 、 コマンド 、 デバッグ 、 プロファイリング
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 APIとMichael Sync Blogに基づいています 。
*このソースコードは、 ソースコードハイライターで強調表示されました。