今天主要是介紹一些我們console的tool

在開始前我們將console設成變數，並將會用到的console給寫進去，方便用來如果要開啟或關閉全部console比較方便。

      let console = {
        isDev: true,
        log(...args) {
          if (!this.isDev) return;
          window.console.log(...args);
        },
        warn(...args) {
          if (!this.isDev) return;
          window.console.warn(...args);
        },
        error(...args) {
          if (!this.isDev) return;
          window.console.error(...args);
        },
        info(...args) {
          if (!this.isDev) return;
          window.console.info(...args);
        },
        assert(...args) {
          if (!this.isDev) return;
          window.console.assert(...args);
        },
        dir(...args) {
          if (!this.isDev) return;
          window.console.dir(...args);
        },
        table(...args) {
          if (!this.isDev) return;
          window.console.table(...args);
        },
        count(...args) {
          if (!this.isDev) return;
          window.console.count(...args);
        },
        time(...args) {
          if (!this.isDev) return;
          window.console.time(...args);
        },
        timeEnd(...args) {
          if (!this.isDev) return;
          window.console.timeEnd(...args);
        }
      }

1.Regular

      console.log(123456789);

2.Interpolated:可以插入如 %s字串,%f浮點數,%d取整數

      console.log("my name is %s", "jojo");
      console.log("I have %f dollars", 1.23);
      console.log("I have %d dollars", 1.23);

      // 但現可用es6 template string模板字符串代替
      console.log(`my name is ${name}`);

3.Styled:%c:CSS，大多是拿來娛樂用

      window.console.log("%c STOP!", "font-size:87px; color:red;");

4.warning!:用來警告

      console.warn("warning");

5.Error :|用來顯示錯誤

      console.error("error");

上述兩個效果如下:

6.Info:(少用)會有藍色圖標。

      console.info("在chrome沒有圖標，跟log沒什麼差別");

7.Testing:如果前面參數不是true，會跳後面的訊息

      console.assert("", "測試");
      console.assert(false, "測試");
      console.assert(null, "測試");
      console.assert(undefined, "測試");
      console.assert(NaN, "測試");

8.clearing:按下ctrl+L可清除，或直接開Dev tool點清除圖標

9.Viewing DOM Elements:將object展開

      let p = document.querySelector('p');
      console.log(p);
      console.dir(p);
      
      console.dir(dogs);
      console.log(dogs);
      
      console.dir(console);

10.Grouping together:用於資料非常多，較易篩選

      console.table(dogs);
      console.table(dogs, ["name"])

11.counting:可以幫我們計算參數出現幾次

      console.count('jojo');
      console.count('jojo');
      console.count('giogio');
      console.count('giogio');
      console.count('jojo');
      console.count('giogio');
      console.count('jojo');
      console.count('giogio');
      console.count('giogio');
      console.count('giogio');
      console.count('giogio');
      console.count('giogio');

12.timing:可以判斷一段程式執行了多少時間

// i,j都宣告在裡面
      console.time("test in"); // fast
      for (let i1 = 1; i1 < 8700000; i1++) {
        let j1 = i1;
      }
      console.timeEnd("test in");
// i,j都宣告在外面
      console.time("test out"); // slow
      let i2;
      let j2;
      for (i2 = 1; i2 < 8700000; i2++) {
        j2 = i2;
      }
      console.timeEnd("test out");

// i宣告在裡面
      console.time("test i in"); // fast
      let j3;
      for (let i3 = 1; i3 < 8700000; i3++) {
        j3 = i3;
      }
      console.timeEnd("test i in");

// j宣告在裡面
      console.time("test j in"); // slow
      let i4;
      for (i4 = 1; i4 < 8700000; i4++) {
        let j4 = i4;
      }
      console.timeEnd("test j in");
    

在此處可得知，將全部程式碼包起來( (()=>{code})() )前(左圖)，i,j都放在外面及j宣告在裡面都是較慢的，而包起來後，發現每段程式碼執行時間是差不多的(右圖)。