JavaScript关于console的使用

1、关于HTML（无CSS）

1.1 HTML部分

<p onClick="makeGreen()">BREAK×DOWN</p>

2、JavaScript部分

2.1 开头部分

先定义一个数组，方便后面使用

const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];

2.2 一般的开发测试

由于一行一行的关闭console.log()比较麻烦，所以设置一个方法，只要控制isDev:false，那么就显示不出来了

let console = {
	isDev:true,
	log(...args){
		if(!this.isDev) return;
		window.console.log("%c住手","font-size:60px;color:red;");
		window.console.log(...args);
	}
}

2.3 常规的方式

console.log(123,456);

2.4 在普通的字符串中嵌入表达式

// （把数值传递给对方，有%d（整数），%s（字符串），%f（浮点数））
  console.log("My name is %s !!!","Alex");
  console.log("I have %f yuan",3.45);
  console.log("I have %d yuan",3.45);
  
//现在ES6，是使用`${}`的方法
let name = "Alex";
console.log(`My name is ${name} !!!`);

2.5 警告、错误、信息

console.warn("警告");
console.error("错误");
console.info("火狐会有一个❗");

// Testing
  console.assert(false,"讯息");
  console.assert("","讯息");
  console.assert(0,"讯息");
  console.assert(NaN,"讯息");
  console.assert(null,"讯息");
  console.assert(undefined,"讯息");

//要记得前面要写
let console = {
    isDev:true,
	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.info(...args);
	}
}//后面略写

2.6 dir和dogs（物件）

let p = document.querySelector("p");

  console.log(p);
  console.log(dogs);//出物件

  /**
   * dir有点向目录，把所有的东西展开
   * window.console.log(console);前面一个console是系统的，后面的console是自己写的
   *  */
  console.dir(p);
  console.dir(dogs);//物件

  // Grouping together
  //console.log(dogs,["name"]);
  console.table(dogs);

2.7 计算

  console.count('Wes');
  console.count('Wes');
  console.count('Steve');
  console.count('Steve');
  console.count('Wes');
  console.count('Steve');
  console.count('Wes')

2.8 时效

你可以启动一个计时器来跟踪某一个操作的占用时长。每一个计时器必须拥有唯一的名字，页面中最多能同时运行10,000个计时器。当以此计时器名字为参数调用 console.timeEnd() 时，浏览器将以毫秒为单位，输出对应计时器所经过的时间。

/*
  * 如果在整个代码外面加一个{}，把它包起来，那么就会加速时间，下面的加上括号后就时间差不多。
  * */
  //第一种时间（i，j定义都在外面）test out: 301.48876953125 ms
  console.time("test out");
  let i1 ,j1;

  for(i1 =1 ;i1<100000000;i1++){
      j1=i1;
  }
  console.timeEnd("test out");

  //第二种时间(i,j定义都在里面)test in: 58.506103515625 ms
  console.time("test in");
  for(let i2 =1 ;i2<100000000;i2++){
      let j2=i2;
  }
  console.timeEnd("test in");

  //第三种时间（i的定义在外面，j定义在里面）test3: 194.106201171875 ms
  console.time("test3");
  let i3;

  for(i3 =1 ;i3<100000000;i3++){
      let j3=i3;
  }
  console.timeEnd("test3");

  //第四种时间（j的定义在外面，i定义在里面）test4: 135.25 ms
  console.time("test4");
  let j4;

  for(let i4 =1 ;i4<100000000;i4++){
      j4=i4;
  }
  console.timeEnd("test4");