ホームページ > 記事 > ウェブフロントエンド > JavaScriptでのコンソールの使い方は何ですか?

JavaScriptでのコンソールの使い方は何ですか?

藏色散人オリジナル: 2021-04-27 09:12:446001ブラウズ

コンソールでの JavaScript の使用法は次のとおりです: 1. "console.assert(expression, object[, object...])" 構文; 2. "console.count([label])" 構文など。

この記事の動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

フロントエンド開発者にとって、開発プロセス中に特定の式や変数の値を監視する必要がある場合、デバッガーを使用するのは非常に面倒です。代わりに、値はデバッグが簡単なコンソール。最も一般的に使用されるステートメントは、console.log(expression) です。

しかし、ほとんどの人は、console オブジェクトをグローバルオブジェクトとして完全に理解していません。もちろん、私も理解しています。少し勉強した後、今ではこれが再生できることを理解しました。コンソールに転送される JS オブジェクトについてある程度理解できたので、それを共有したいと思います。

開発者によって最も一般的に使用されるメソッドである console.log() に加えて、コンソールオブジェクトには他にも多くのメソッドがあります。これらのメソッドを柔軟に使用すると、開発プロセスが大幅に便利になります。

コンソールメソッド

console.assert(expression, object[, object...])

少なくとも 2 つのパラメータを受け取ります。最初のパラメータは Whenパラメータの値または戻り値が false の場合、後続のパラメータの値がコンソールに出力されます。例:

console.assert(1 == 1, object); // 无输出，返回 undefined
console.assert(1 == 2, object); // 输出 object

console.count([label])

行が実行された回数を出力します。オプションのパラメータラベルは数値の前に出力できます。

(function() {  for (var i = 0; i < 5; i++) {
    console.count('count');
  }
})();// count: 1// count: 2// count: 3// count: 4// count: 5

console.dir(object)

サブオブジェクトのプロパティを含む受信オブジェクトのプロパティをリスト形式で出力します。例:

var obj = {
  name: 'classicemi',
  college: 'HUST',
  major: 'ei'};
console.dir(obj);

出力:

##console.error(object[, object...])

は出力に使用されます。エラー情報、使用法、および共通の

console .log は同じですが、違いは、出力内容が簡単に識別できるようにエラースタイルでマークされることです。出力結果:

console.group

これは興味深い方法で、コンソールによって出力されるステートメントでさまざまなレベルの入れ子関係を生成できます。

console.group() はネストの層を追加しますが、逆に、ネストの層を減らすには、console.groupEnd() メソッドを使用できます。言語表現は比較的弱いです。コードを見てください:

console.log('这是第一层');
console.group();
console.log('这是第二层');
console.log('依然第二层');
console.group();
console.log('第三层了');
console.groupEnd();
console.log('回到第二层');
console.groupEnd();
console.log('回到第一层');

出力結果:

console.group() と同様のメソッドは です。 console.groupCollapsed( )関数は同じですが、ネストされた出力コンテンツが折りたたまれた状態になる点が異なります。コンテンツの大部分を出力する場合、出力レイアウトが長くなりすぎるのを防ぐためにこのメソッドを使用します。。。 Bar

console.info(object[, object...])

このメソッドは、前に説明した

console.error と同じです。 , 情報を出力するために使用され、特別なものではありません。

console.info('info'); // 输出 info

console.table()

は、受信したオブジェクトまたは配列をテーブル形式で出力できます。従来のツリー出力と比較して、この出力スキームはさらに複雑です。内部要素がきちんと配置されているオブジェクトまたは配列に適しています。そうでない場合は、未定義の要素が多くなる可能性があります。

var obj = {
  foo: {
    name: 'foo',
    age: '33'
  },
  bar: {
    name: 'bar',
    age: '45'
  }
};var arr = [
  ['foo', '33'],
  ['bar', '45']
];

console.table(obj);
console.table(arr);

次のこともできます

##console.log(object[, object...])

言うまでもなく、これは次のようにする必要があります。これは開発者によって最も一般的に使用されるものですが、誰が指定したかはわかりません。。。

console.log('log'); // 输出 log

console.profile([profileLabel])

これは、パフォーマンス分析に使用できる非常に長いものです。 JS 開発では、コードの一部や特定の関数のパフォーマンスを評価する必要があることがよくあります。関数内で時刻を手動で出力することも可能ですが、柔軟性が低く、エラーが発生します。コンソールと

console.profile()

メソッドを使用すると、実行パフォーマンスを簡単に監視できます。たとえば、次のコード:

function parent() {  for (var i = 0; i < 10000; i++) {
    childA()
  }
}function childA(j) {  for (var i = 0; i < j; i++) {}
}

console.profile('性能分析');
parent();
console.profileEnd();

これにより、[プロファイル] パネルで上記のコードの実行中に消費された時間を確認できます。

ページ読み込みプロセスのパフォーマンスの最適化は、フロントエンド開発の重要な部分です。コンソールのプロファイルパネルを使用して、すべての JS の実行ステータスを監視します。使用方法はビデオレコーダーのようなものです。コンソールに実行中のプロセスが記録されます。図に示すように、ツールバーには録音ボタンと停止ボタンがあります。

記録結果:

console.time(name)

タイマー、console.time( ) とペアにすることができます。
console.timeEnd() 間のコードの実行時間がコンソールに出力され、name パラメーターはラベル名として使用できます。 <pre class="brush:php;toolbar:false">console.time('计时器');for (var i = 0; i < 1000; i++) { for (var j = 0; j < 1000; j++) {} } console.timeEnd('计时器');</pre>

console.trace()

console.trace()用来追踪函数的调用过程。在大型项目尤其是框架开发中，函数的调用轨迹可以十分复杂，console.trace()方法可以将函数的被调用过程清楚地输出到控制台上。

以上がJavaScriptでのコンソールの使い方は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：なぜコンピューターにはJavaScriptがないのですか?次の記事：なぜコンピューターにはJavaScriptがないのですか?

続きを見る

JavaScriptでのコンソールの使い方は何ですか?

コンソール メソッド

関連記事

コンソールメソッド