JS30 Day 9 - Dev Tools Domination 学习笔记

今天主要是介绍一些我们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宣告在里面都是较慢的，而包起来后，发现每段程式码执行时间是差不多的(右图)。