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);
学习的道路很长,以上是我学习的总结笔记,如有错误请大佬们指出,一起进步!