Wozu dient die Konsole in Javascript?

Die Konsolenverwendung von JavaScript ist: 1. „console.assert(expression, object[, object...])“ Syntax 2. „console.count([label])“ Syntax usw.

Die Betriebsumgebung dieses Artikels: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Wenn Front-End-Entwickler die Werte bestimmter Ausdrücke oder Variablen während des Entwicklungsprozesses überwachen müssen, ist die Verwendung des Debuggers zu umständlich. Stattdessen werden die Werte zum einfachen Debuggen an die Konsole ausgegeben . Die am häufigsten verwendete Anweisung ist console.log(expression). console.log(expression)了。

然而对于作为一个全局对象的console对象来说，大多数人了解得还并不全面，当然我也是，经过我的一番学习，现在对于这个能玩转控制台的 JS 对象有了一定的认识，想与大家分享一下。

console 对象除了console.log()这一最常被开发者使用的方法之外，还有很多其他的方法。灵活运用这些方法，可以给开发过程增添许多便利。

console 的方法

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

接收至少两个参数，第一个参数的值或返回值为false的时候，将会在控制台上输出后续参数的值。例如：

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

console.count([label])

输出执行到该行的次数，可选参数 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()作用相同，不同点是嵌套的输出内容是折叠状态，在有大段内容输出的时候使用这个方法可以使输出版面不至于太长。。。吧

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

此方法与之前说到的console.error一样，用于输出信息，没有什么特别之处。

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

console.table()

可将传入的对象，或数组以表格形式输出，相比传统树形输出，这种输出方案更适合内部元素排列整齐的对象或数组，不然可能会出现很多的 undefined。

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();

然后我们可以在 Profiles 面板下看到上述代码运行过程中的消耗时间。

页面加载过程的性能优化是前端开发的一个重要部分，使用控制台的 profiles 面板可以监控所有 JS 的运行情况使用方法就像录像机一样，控制台会把运行过程录制下来。如图，工具栏上有录制和停止按钮。

录制结果：

console.time(name)
计时器，可以将成对的console.time()和console.timeEnd()之间代码的运行时间输出到控制台上，name

Allerdings verstehen die meisten Leute das console-Objekt nicht vollständig als globales Objekt. Nach einigem Lernen bin ich jetzt in der Lage, mit der Konsole zu spielen Sie haben Verständnis für JS-Objekte und möchten diese gerne mit Ihnen teilen.

Neben console.log(), der von Entwicklern am häufigsten verwendeten Methode, verfügt das Konsolenobjekt über viele weitere Methoden. Der flexible Einsatz dieser Methoden kann den Entwicklungsprozess erheblich vereinfachen.

Konsolenmethode

console.assert(expression, object[, object...])🎜🎜🎜Empfangen Sie mindestens zwei Parameter, den Wert des ersten Parameters, oder geben Sie When zurück der Wert ist false, die Werte der nachfolgenden Parameter werden auf der Konsole ausgegeben. Zum Beispiel: 🎜

console.time('计时器');for (var i = 0; i < 1000; i++) {  for (var j = 0; j < 1000; j++) {}
}
console.timeEnd('计时器');

🎜🎜console.count([label])🎜🎜🎜Geben Sie die Anzahl der Ausführungen der Zeile aus. Die optionale Parameterbezeichnung kann vor der Anzahl der Ausführungen ausgegeben werden, zum Beispiel: 🎜

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

🎜🎜console. dir(object)🎜🎜🎜 Geben Sie die Attribute des eingehenden Objekts, einschließlich der Attribute von Unterobjekten, in Listenform aus, zum Beispiel: 🎜

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

🎜Ausgabe:
🎜🎜🎜console.error(object[, object ...])🎜🎜🎜 wird für die Ausgabe verwendet. Die Fehlermeldung wird genauso verwendet wie das allgemeine console.log. Der Unterschied besteht darin, dass der Ausgabeinhalt zur einfacheren Identifizierung mit einem Fehlerstil markiert wird . Ausgabeergebnis:
🎜🎜🎜console.group🎜🎜🎜Dies ist eine interessante Methode, mit der die von der Konsole ausgegebenen Anweisungen unterschiedliche Ebenen von Verschachtelungsbeziehungen erzeugen können, jeder console.group()-Code > fügt eine Verschachtelungsebene hinzu. Um eine Verschachtelungsebene zu reduzieren, können Sie die Methode <code>console.groupEnd() verwenden. Der Sprachausdruck ist relativ schwach, schauen Sie sich den Code an: 🎜

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

🎜Ausgabeergebnis: 🎜🎜Die Methode, die console.group() ähnelt, ist console.groupCollapsed(), die den gleichen Effekt hat. Der Unterschied besteht in der verschachtelten Ausgabe Der Inhalt befindet sich in einem komprimierten Zustand. Durch die Verwendung dieser Methode bei der Ausgabe von Segmentinhalten kann verhindert werden, dass das Ausgabelayout zu lang wird. . . 🎜🎜🎜console.info(object[, object...])🎜🎜🎜Diese Methode ist die gleiche wie die zuvor erwähnte console.error. Es gibt nichts Besonderes darüber.
🎜rrreee🎜🎜console.table()🎜🎜🎜 kann das eingehende Objekt oder Array in Tabellenform ausgeben. Im Vergleich zur herkömmlichen Baumausgabe eignet sich dieses Ausgabeschema besser für Objekte oder Objekte mit übersichtlich angeordneten internen Elementen. Array, sonst kann es zu vielen Undefinierten kommen. 🎜rrreee🎜 Sie können auch
🎜🎜🎜console.log(object[, object...])🎜🎜🎜Unnötig zu erwähnen, dass dies wahrscheinlich die am häufigsten von Entwicklern verwendete ist, ich weiß nicht, wer das angegeben hat Es . . . 🎜rrreee🎜🎜console.profile([profileLabel])🎜🎜🎜Dies ist eine sehr fortgeschrittene Sache, die für die Leistungsanalyse verwendet werden kann. Bei der JS-Entwicklung müssen wir häufig die Leistung eines Codeabschnitts oder einer bestimmten Funktion bewerten. Es ist zwar möglich, die Uhrzeit in der Funktion manuell auszudrucken, dies ist jedoch nicht flexibel genug und weist Fehler auf. Mit Hilfe der Konsole und der Methode console.profile() können wir die Laufleistung einfach überwachen. 🎜🎜Zum Beispiel der folgende Code: 🎜rrreee🎜 Dann können wir die Zeit sehen, die während der Ausführung des obigen Codes im Profilbereich verbraucht wurde. 🎜🎜Leistungsoptimierung des Seitenladevorgangs ist ein vorrangiges Ziel. Endentwicklung Der wichtige Teil ist, dass Sie das Profilfenster der Konsole verwenden können, um den Laufstatus aller JS zu überwachen. Die Verwendung ähnelt einem Videorecorder und die Konsole zeichnet den laufenden Prozess auf. Wie im Bild gezeigt, gibt es in der Symbolleiste Aufnahme- und Stoppschaltflächen. 🎜🎜Aufnahmeergebnis: 🎜🎜🎜console.time(name)🎜
Timer können gekoppelt werden. Die Laufzeit Der Code zwischen console.time() und console.timeEnd() wird an die Konsole ausgegeben. Der Parameter name kann als verwendet werden Labelname. 🎜rrreee🎜🎜🎜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('tracer');

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

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

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

占位符

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

console.log('%s是%d年%d月%d日', '今天', 2014, 4, 15);
console.log('圆周率是%f', 3.14159);var obj = {
  name: 'classicemi'}
console.log('%o', 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的语法来获取页面上的元素。 

Das obige ist der detaillierte Inhalt vonWozu dient die Konsole in Javascript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!