javascript console_javascriptスキルの詳しい説明

1. 情報を表示するコマンド

console.log(); //コンソール入力は Web ページに出力されません

console.info(); //一般情報

console.debug(); //デバッグ情報

console.warn(); //警告プロンプト

console.error(); //エラープロンプト

「console.log();」は「alert();」または「document.write();」の代わりに使用できます。たとえば、Web では「console.log("Hello World");」と書きます。ページにアクセスすると、コンソールには入力されますが、Web ページには入力されません。

次のコードをコードに挿入します:

console.info( "これは情報です" );

console.debug( "これはデバッグです" );

console.warn( "これは警告です" );

console.error( "これはエラーです" );

ロード後、コンソールを開くと、次のような内容が表示されます:

2. プレースホルダー

コンソール オブジェクトの上記 5 つのメソッドはすべて、printf スタイルのプレースホルダーを使用できます。ただし、プレースホルダの種類は比較的少なく、文字 (%s)、整数 (%d または %i)、浮動小数点数 (%f)、およびオブジェクト (%o) の 4 種類のプレースホルダのみがサポートされています。例:

console.log( "%d 年 %d 月 %d 日" , 2011,3,26);

console.log( "Pi は %f" , 3.1415926 );

%o プレースホルダーは、オブジェクトの内部状態を表示するために使用できます。たとえば、次のようなオブジェクトがあります:

var 犬 = {} ;

dog.name = "大毛";

dog.color = "黄色";

次に、o% プレースホルダーを使用します。

console.log( "%o" , 犬 );

3. グループ表示

console.group(); console.groupEnd(); （这两个方法是成对使用的）
　　console.group("第一组信息");
　　　　console.log("第一组第一条");
　　　　console.log("第一组第二条");
　　console.groupEnd();
　　console.group("第二组信息");
　　　　console.log("第二组第一条");
　　　　console.log("第二组第二条");
　　console.groupEnd();

4. console.dir(); (オブジェクトのすべてのプロパティとメソッドを表示します)

たとえば、セクション 2 の犬オブジェクトに bark() メソッドを追加し、「dir();」を使用してそれを表示します。

dog.bark = function(){alert( "バークワン" );

console.dir( 犬 );

5. console.dirxml(); (ノードに含まれるすべての html/xml コードを取得します)

var table = document.getElementById("table1") //ノードを取得

console.dirxml( table ); // ノードのすべてのコードを表示します

6. console.assert(); (式または変数が true かどうかを判断するために使用されます。結果が no の場合、対応するメッセージがコンソールに出力され、例外がスローされます)

var result = 0;

console.assert( result ); //false

var year = 2000;

console.assert( year == 2011 ); //false

7. console.trace(); (関数呼び出しトレースをトレースするために使用されます)

/*加算関数*/

関数 add( a,b ){

b を返します;

}

この関数がどのように呼び出されるかを知りたいのですが、それに console.trace() メソッドを追加するだけです:

関数 add( a,b ){

console.trace();

b を返します;

}

この関数の呼び出しコードは次のとおりであると仮定します:

var x = add3(1,1);

関数 add3( a,b ){ return add2(a,b) }

関数 add2( a,b ){ return add1( a,b ) }

関数 add1( a,b ){ return add( a,b ) }

実行後、上からadd()、add1()、add2()、add3()の順にadd()の呼び出しトレースが表示されます

8. console.time(); および console.timeEnd(); (コードの実行時間を表示するために使用されます)

　　console.time( "计时器一" );

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

　　　　for(var j=0;j<1000;j++){}

　　}

　　console.timeEnd( "计时器一" );

9. パフォーマンス分析

パフォーマンス分析 (プロファイラー) は、プログラムの各部分の実行時間を分析し、ボトルネックがどこにあるのかを見つけるために使用されるメソッドは console.profile();

です。

関数 Foo() があり、他の 2 つの関数 funcA() と funcB() を呼び出します。そのうち funcA() は 10 回呼び出され、funcB() は 1 回呼び出されるとします。

　　function Foo(){

　　　　for(var i=0;i<10;i++){funcA(1000);}

　　　　funcB(10000);

　　}

　　function funcA(count){

　　　　for(var i=0;i<count;i++){}

　　}

　　function funcB(count){

　　　　for(var i=0;i<count;i++){}

　　}

次に、「Foo();」の実行パフォーマンスを分析します。

　　console.profile('性能分析器一');

　　Foo();

　　console.profileEnd();

タイトル バーは、合計 12 の関数が実行され、合計 2.656 ミリ秒かかったことが示されています。このうち、funcA() は 10 回実行され、1.391 ミリ秒かかります。最短の実行時間は 0.123 ミリ秒、最長の実行時間は 0.284 ミリ秒、平均は 0.139 ミリ秒です。funcB() は 1 回実行され、1.229 ミリ秒かかります。

「console.profile();」メソッドの使用に加えて、firebug には「プロファイラー」ボタンも用意されています。初めてボタンをクリックすると「パフォーマンス分析」が開始され、Web ページ上で特定の操作 (ajax 操作など) を実行できるようになります。その後、ボタンを 2 回目にクリックすると「パフォーマンス分析」が終了します。この操作によってトリガーされるすべての操作がパフォーマンス分析を実行します。

10. 属性メニュー

コンソールパネル名の後ろに逆三角形がありますので、クリックするとプロパティメニューが表示されます。

デフォルトでは、コンソールには Javascript エラーのみが表示されます。 [JavaScript 警告、CSS エラー、および XML エラーを送信する] を選択すると、関連するプロンプト情報が表示されます。

ここでさらに便利なのは、「XMLHttpRequests」を表示することです。これは、ajax リクエストを表示することです。選択すると、Web ページのすべての Ajax リクエストがコンソール パネルに表示されます。

たとえば、YUI サンプル をクリックすると、ajax を使用して GET リクエストを発行したことがコンソールに表示され、http リクエストとレスポンスのヘッダー情報とコンテンツ本文も表示されます。 。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。