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

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

一旦把握了控制台，它将帮忙咱们更有条理、更快地调试并理解应用程序中产生的所有。所以我会试着用例子总结你须要晓得的所有内容🔥

控制台日志（音讯）

向控制台输入音讯

    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: "test@test.com",
      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: "test@test.com",
      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开发人员，咱们必定曾经应用过控制台。你可能不须要所有这些，然而当你的我的项目变得更大更简单时，一些选项会促成你的调试过程💥