浏览器控制台的一些输出方法---console

1.首选是常见的console.log();

    console.log('hello');
    console.log('hi','friend');

在浏览器按F12，控制台输出的是这样的

2.在console.log()里使用%s

    console.log('Hello, my name is %s','kon');

%s会替换成第二个参数

3.在console.log()里使用%c

    console.log('%c styled texts','font-size:70px ; color:red');

%c，可以对其添加样式

4.警告

    console.warn('警告的信息');

如图：↓

5.错误

    console.error('错误的信息');

如图：↓

6.Info

    console.log('this is soething...');

如图：↓

7.Testing

    console.assert(1===2,'This isWrong!');

如图：↓ 当前面的为false，才会输出后面的，反之，则不输出。

8.clearing

    console.clear();

如图：↓

9. Viewing DOM Elements

	<p class="guo">逢考必过</p>
	const p = document.querySelector('p')
	console.log(p);
    console.log([p]);
    console.dir(p);

如图：↓

10.counting

    console.count('hello')
    console.count('hello')
    console.count('hello')
    console.count('hi')
    console.count('hi')
    console.count('hello')
    console.count('hi')
    console.count('hello')

如图：↓

11.分组

	const dogs = [{ name: '小红', age: 7 }, { name: '小黑', age: 8 }];
	// Grouping together
    dogs.forEach(dog =>{
      //console.groupCollapsed(`${dog.name}`) //这个是合并状态
      console.group(`${dog.name}`)  // 这个是展开状态
      console.log(`Tshis is ${dog.name}`);
      console.log(` ${dog.name} is ${dog.age} years old`);
      console.groupEnd(`${dog.name}`)
    })

如图：↓

12.计时

    console.time('时间为');
    const endpoint = '';//这里为请求的地址
    const cities =[]
    fetch(endpoint)
      .then(res=>res.json())
      .then(data=>{
        console.timeEnd('时间为')
      });

如图：↓

13.表格

	const dogs = [{ name: '小红', age: 7 }, { name: '小黑', age: 8 }];
    console.table(dogs);

学习的道路很长，以上是我学习的总结笔记，如有错误请大佬们指出，一起进步！