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

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

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

在浏览器按F12,控制台输出的是这样的
浏览器控制台的一些输出方法---console

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

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

%s会替换成第二个参数
浏览器控制台的一些输出方法---console

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

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

%c,可以对其添加样式
浏览器控制台的一些输出方法---console

4.警告

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

如图:↓
浏览器控制台的一些输出方法---console

5.错误

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

如图:↓
浏览器控制台的一些输出方法---console

6.Info

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

如图:↓
浏览器控制台的一些输出方法---console

7.Testing

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

如图:↓ 当前面的为false,才会输出后面的,反之,则不输出。
浏览器控制台的一些输出方法---console

8.clearing

    console.clear();

如图:↓
浏览器控制台的一些输出方法---console

9. Viewing DOM Elements

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

如图:↓
浏览器控制台的一些输出方法---console

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')

如图:↓
浏览器控制台的一些输出方法---console

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}`)
    })

如图:↓

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

12.计时

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

如图:↓
浏览器控制台的一些输出方法---console

13.表格

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

浏览器控制台的一些输出方法---console
学习的道路很长,以上是我学习的总结笔记,如有错误请大佬们指出,一起进步!
浏览器控制台的一些输出方法---console浏览器控制台的一些输出方法---console浏览器控制台的一些输出方法---console

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

上一篇:Selenium?Puppeteer?都弱爆了,Neter 自己的爬虫神器!Playwright 录制+自动生成结构清晰的代码!


下一篇:向下转型