JavaScriptでのコンソールの使い方は何ですか?-jsチュートリアル-php.cn

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

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

この記事の動作環境: 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(&#39;count&#39;);
  }
})();// count: 1// count: 2// count: 3// count: 4// count: 5

ログイン後にコピー

console.dir(object)

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

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

ログイン後にコピー

出力:

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

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

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

console.group

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

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

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

ログイン後にコピー

出力結果:

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

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

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

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

console.info(&#39;info&#39;); // 输出 info

ログイン後にコピー

console.table()

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

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

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

ログイン後にコピー

次のこともできます

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

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

console.log(&#39;log&#39;); // 输出 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(&#39;性能分析&#39;);
parent();
console.profileEnd();

ログイン後にコピー

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

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

記録結果:

console.time(name)

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

console.trace()

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

function tracer(a) {
  console.trace();  return a;
}function foo(a) {  return bar(a);
}function bar(a) {  return tracer(a);
}var a = foo(&#39;tracer&#39;);

ログイン後にコピー

输出：
console.warn(object[, object...])

输出参数的内容，作为警告提示。

console.warn(&#39;warn&#39;); // 输出 warn

ログイン後にコピー

占位符

console对象上的五个直接输出方法，console.log(),console.warn(),console.error(),console.exception()(等同于console.error())和console.info()，都可以使用占位符。支持的占位符有四种，分别是字符(%s)、整数(%d 或 %i)、浮点数(%f)和对象(%o)。

console.log(&#39;%s是%d年%d月%d日&#39;, &#39;今天&#39;, 2014, 4, 15);
console.log(&#39;圆周率是%f&#39;, 3.14159);var obj = {
  name: &#39;classicemi&#39;}
console.log(&#39;%o&#39;, obj);

ログイン後にコピー

还有一种特殊的标示符%c，对输出的文字可以附加特殊的样式，当进行大型项目开发的时候，代码中可能有很多其他开发者添加的控制台语句。开发者对自己的输出定制特别的样式就可以方便自己在眼花缭乱的输出结果中一眼看到自己需要的内容。想象力丰富的童鞋也可以做出有创意的输出信息，比如常见的招聘信息和个人介绍啥的。

输出结果：<span class="hljs-built_in">console.log(<span class="hljs-string">'%cMy name is classicemi.', <span class="hljs-string">'color: #fff; background: #f40; font-size: 24px;');</span></span></span>

%c标示符可以用各种 CSS 语句来为输出添加样式，再随便举个栗子，background属性的url()中添加图片路径就可以实现图片的输出了，各位前端童鞋快施展你们的 CSS 神技来把控制台玩坏吧~~

【推荐学习：javascript高级教程】

网友补充：

1.console.debug() 用于输出输出debug的信息。

2.console.timeStamp() 用于标记运行时的timeline信息。

3.console.memory 用于显示此刻使用的内存信息（这是一个属性而不是方法）。

4.console.clear() 清空控制台的内容（当然你可以用快捷键ctrl+L）。

5.$0 可以在控制台输出在Elements面板选中的页面元素。

6.$_ 表示上一次在控制台键入的命令，你也可以用快捷键“上方向键”来达到同样的效果。

7.$x 可以用xPath的语法来获取页面上的元素。
以上がJavaScriptでのコンソールの使い方は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

コンソール メソッド

コンソールメソッド