当前位置: 首页 > Web前端 > HTML

你所不知道的控制台,让JS调试更轻松

时间:2023-03-28 19:41:12 HTML

对于前端工程师来说,你一定对控制台不陌生,但你又了解多少呢?今天就让小鹏一睹大千世界的风采。ChromeConsole-DeveloperToolsWindows按F12,MAC按Command+Option+C或Command+Option+J打开控制台1.向Web控制台输出一条消息console.log('Helloworld!');console.info('Helloworld!');console.warn('Helloworld!');console.error('Helloworld!');console.debug('Helloworld!');2.console.dir()显示一个对象的所有属性和方法console.dir(document);3.console.table()以表格形式显示数据此方法需要一个必填参数data,data必须是数组或对象varnames=[{name:"小明",age:20,gender:'男'},{name:"小红",age:18,gender:'女'},{name:"小李",age:22,gender:'男'}]console.table(names)4.时刻关注到计算操作:每个定时器必须有一个唯一的名字console.time('timer');letcount=0;for(leti=0;i<100;i++){count++;}console.timeEnd('timer');5.输出它被调用的次数console.count()这个函数接受一个可选参数return'hi'+user;}user='Bob';//此时的label是Bobgreate();user='John';//此时的label是Johngreate();greate();console.count('John');6.判断断言是否为真console.assert()如果断言为假,向控制台写入错误信息,如果断言为真则没有任何响应console.assert(1==1,'Success');console.assert(1==2,'错误');7、分组console.group()在控制台中创建分组,直到调用console.groupEnd()分组结束后console.group('今日事件');console.log('吃');console.log('睡眠');console.log('打豆豆');console.groupEnd();console.group('明天');console.log('赏花');console.log('赏月');console.log('赏秋香');console.groupEnd();