자바스크립트에서 콘솔을 어떻게 사용하나요?

JavaScript의 콘솔 사용법은 다음과 같습니다: 1. "console.assert(expression, object[, object...])" 구문 2. "console.count([label])" 구문 등.

이 문서의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

프론트엔드 개발자의 경우 개발 과정에서 특정 표현식이나 변수의 값을 모니터링해야 할 때 디버거를 사용하는 것은 너무 번거로울 수 있습니다. 대신 쉽게 디버깅할 수 있도록 값을 콘솔에 출력합니다. . 가장 일반적으로 사용되는 문은 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

그러나 대부분의 사람들은 console 개체를 전역 개체로 완전히 이해하지 못합니다. 물론 저도 어느 정도 연구한 후에는 콘솔을 사용할 수 있게 되었습니다. JS 객체에 대해 이해하고 이를 여러분과 공유하고 싶습니다.

콘솔 객체에는 개발자들이 가장 많이 사용하는 메소드인 console.log() 외에도 다양한 메소드가 있습니다. 이러한 방법을 유연하게 사용하면 개발 프로세스에 많은 편의성을 추가할 수 있습니다.

콘솔 메서드

console.assert(expression, object[, object...])🎜🎜🎜최소 2개의 매개변수를 수신하거나, 첫 번째 매개변수의 값을 반환하거나, 값이 false이면 후속 매개변수의 값이 콘솔에 출력됩니다. 예: 🎜

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

🎜🎜console.count([label])🎜🎜🎜행이 실행된 횟수를 출력합니다. 선택적 매개변수 레이블은 횟수 이전에 출력될 수 있습니다(예: 🎜

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)🎜🎜🎜 하위 개체의 속성을 포함하여 들어오는 개체의 속성을 목록 형식으로 출력합니다. 예: 🎜

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

🎜Output:
🎜🎜🎜console.error(object[, object ...])🎜🎜🎜이 출력에 사용됩니다. 오류 메시지는 일반적인 console.log와 동일하게 사용됩니다. 차이점은 쉽게 식별할 수 있도록 출력 내용에 오류 스타일이 표시된다는 것입니다. . 출력 결과:
🎜🎜🎜console.group🎜🎜🎜이것은 흥미로운 방법입니다. 콘솔의 명령문 출력이 각 console.group() 코드에서 다양한 수준의 중첩 관계를 생성하도록 할 수 있습니다. > 중첩 레이어를 추가합니다. 반대로 중첩 레이어를 줄이려면 <code>console.groupEnd() 메서드를 사용할 수 있습니다. 언어 표현이 상대적으로 약합니다. 코드를 보세요: 🎜

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

🎜출력 결과: 🎜🎜 console.group()과 비슷한 메서드는 console.groupCollapsed()인데, 차이점은 중첩된 출력입니다. 콘텐츠가 축소된 상태인 경우 세그먼트 콘텐츠를 출력할 때 이 방법을 사용하면 출력 레이아웃이 너무 길어지는 것을 방지할 수 있습니다. . . 🎜🎜🎜console.info(object[, object...])🎜🎜🎜이 메소드는 앞서 언급한 console.error와 동일하며 특별한 정보를 출력하는 데 사용됩니다. 그것에 대해.
🎜rrreee🎜🎜console.table()🎜🎜🎜 들어오는 객체나 배열을 테이블 형식으로 출력할 수 있습니다. 기존 트리 출력과 비교할 때 이 출력 방식은 객체나 내부 요소가 깔끔하게 정리된 객체에 더 적합합니다. 배열, 그렇지 않으면 정의되지 않은 내용이 많이 있을 수 있습니다. 🎜rrreee🎜 다음도 가능합니다
🎜🎜🎜console.log(object[, object...])🎜🎜🎜말할 것도 없이, 이것은 아마도 개발자들이 가장 일반적으로 사용하는 것일 것입니다. 누가 지정했는지는 모르겠습니다. 그것 . . . 🎜rrreee🎜🎜console.profile([profileLabel])🎜🎜🎜성능 분석에 사용할 수 있는 매우 고급 기능입니다. JS 개발에서는 코드 조각이나 특정 기능의 성능을 평가해야 하는 경우가 많습니다. 함수에서 시간을 수동으로 인쇄하는 것이 가능하지만 유연성이 부족하고 오류가 있습니다. 콘솔과 console.profile() 메서드의 도움으로 실행 성능을 쉽게 모니터링할 수 있습니다. 🎜🎜예를 들어 다음 코드는 🎜rrreee🎜 그러면 프로필 패널에서 위 코드를 실행하는 동안 소비된 시간을 확인할 수 있습니다. 🎜🎜페이지 로딩 프로세스의 성능 최적화가 전면- 개발 종료 중요한 부분은 콘솔의 프로필 패널을 사용하여 모든 JS의 실행 상태를 모니터링할 수 있다는 것입니다. 사용법은 비디오 레코더와 같으며 콘솔은 실행 중인 프로세스를 기록합니다. 그림과 같이 툴바에 녹화버튼과 정지버튼이 있습니다. 🎜🎜기록 결과: 🎜🎜🎜console.time(name)🎜
타이머를 페어링할 수 있습니다. 실행 시간 console.time()과 console.timeEnd() 사이의 코드가 콘솔에 출력됩니다. name 매개변수는 라벨 이름. 🎜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的语法来获取页面上的元素。 

위 내용은 자바스크립트에서 콘솔을 어떻게 사용하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!