Web 控制台终极指南🔥

要调试代码，您将使用控制台

控制台对象提供对浏览器调试控制台的访问。

掌握控制台后，你将更有条理，调试速度更快，并了解应用中发生的一切。因此，我将尝试通过示例，简短地总结你需要了解的所有内容🔥

console.log（消息）

向控制台输出一条消息

const A = 'World';
console.log(`Hello ${A}`);

添加样式

console.log('%c Test One', 'color: #bada55; font-size: 20px');

console.log('%c JavaScript', 'font-weight: bold; font-size: 50px; color: blue; text-shadow: 6px 6px #E485F8, 3px 3px #E485F8;');

%o / %O - 对象
%d / %i - 整数
%s——字符串
%f——浮点数

console.info（消息）

向控制台输出一条消息
，如果是 Firefox，它将添加一个i图标

console.log('This is log');
console.info('This is info');

控制台.warn（消息）

向控制台输出警告消息

console.warn('This is Warning message');

console.error（消息）

向控制台输出错误消息

console.error('This is Error message');

控制台.trace()

将堆栈跟踪输出到控制台

function a() {
  b();
}
function b() {
  console.trace();
}
function trace() {
  a();
}
trace();

console.group() 和 groupEnd()

分组输出

console.group("Alphabet")
  console.log("A");
  console.log("B");
  console.log("C");
  console.group("Numbers");
    console.log("One");
    console.log("Two");
  console.groupEnd("Numbers");
console.groupEnd("Alphabet");

console.assert（条件，失败信息）

const A = 20;
console.assert(A === 20, 'This is true');
console.assert(A === 21, 'This is false');

如果为真，则失败时不会打印任何消息：

console.count()

count()记录此特定被调用的次数

function count(label) {
  console.count(label);
}
count("One");
count("Two");
count("One");
count("One");

console.countReset()

重置计数

console.count();
console.count();
console.countReset();
console.count();
console.count("time");
console.count("time");
console.countReset("time");
console.count("time");

控制台.dir()

以格式化的方式输出对象

const obj = {
  name: "user name",
  email: "test@test.com",
  tags: ['dev', 'react', 'js']
};
console.dir(obj);

console.dirxml()

如果可能的话，输出元素，或者 JavaScript 表示

<div class="tryRender">
  <span>
    <button>Click Me</button>
  </span>
</div>

<script>
  console.dirxml(document.querySelector('.tryRender'));
</script>

控制台.时间（标签）&时间结束（标签）

我们可以用启动计时器console.time，然后用结束计时器console.endTime。通过这种方式，我们可以找到执行某个函数所需的时间

function a () {
  for(let i = 0 ;i < 10; i ++) {
    // operation;
  }
}

function b () {
  for(let i = 0 ;i < 10000; i ++) {
    // operation;
  }
}

console.time();
a();
console.timeEnd();

console.time();
b();
console.timeEnd();

控制台.table（obj）

以表格格式输出对象

const obj = {
  name: "user name",
  email: "test@test.com",
  tags: ['dev', 'react', 'js']
};
console.table(obj);

console.profile（消息）&profileEnd（消息）

输出消息，除非在检查器中使用或检查器打开，否则不显示任何内容

console.profile('This is profile');
console.profileEnd('This is profile');

控制台.clear()

删除所有控制台消息和打印Console was cleared

作为Javascript开发者，你肯定用过控制台。你可能不需要所有这些，但当你的项目变得更大、更复杂时，其中一些选项会提升你的调试效率💥

文章来源：https://dev.to/awedis/master-the-console-5cj3