Web 控制台终极指南 🔥

要调试代码，必不可少将使用控制台

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

一旦掌握了控制台，它将帮助我们更有条理、更快地调试并了解应用程序中发生的一切。所以我会试着用例子总结你需要知道的所有内容🔥

控制台日志（消息）

---

向控制台输出消息

    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 - 浮点数

控制台信息（消息）

---

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

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

控制台警告（消息）

---

向控制台输出警告消息

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

控制台错误（消息）

---

向控制台输出错误信息

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

控制台跟踪（）

---

将堆栈跟踪输出到控制台

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

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

控制台计数（）

---

记录这个特定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: "[e-mail]",
      tags: ['dev', 'react', 'js']
    };
    console.dir(obj);

控制台.dirxml()

---

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

    <div class="tryRender">
      <span>
        <button>Click Me</button>
      </span>
    </div>
    
    <script>
      console.dirxml(document.querySelector('.tryRender'));
    </script>
    

console.time(label) & timeEnd(label)

---

我们可以用 开始一个计时器，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

---

以表格格式输出对象

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

console.profile(message) & profileEnd(message)

---

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

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

控制台清除（）

---

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

console.clear()

---

作为Javascript开发人员，我们肯定已经使用过控制台。你可能不需要所有这些，但是当你的项目变得更大更复杂时，一些选项会促进你的调试过程💥