Console 3000字完整指南,让你不只会用console.log !
创作不易,求一个免费的赞,谢谢啦 !!!
前言
为啥会突然想起写一篇关于console的文章?笔者接触JS也不少时间了,除了用vscode的debuger,其实大部分时间都在使用console.log()方法来输出一些或者调试程序,我相信很多刚开始接触JS的同志,应该也都习惯使用console.log()。但是log的能力是有限的,并不能满足所有的场景。比如我们相用表格数据对象。
下面这张图,纯粹是看了扫黑风暴想到的!!!
console.log()
大家最常用的应该就是这个属性了,不过你有没有使用这个方法输出console对象。
console.log(console)
语法
console.log(常见JS数据)
console.log(123)
>> 123
console.log( %s %d %f %o 等占位符写法(类似C的print))
console.log('我是 %s','前端picker')
>> 我是 前端picker
console.log(ES6 模板字符串)
const nickName = "前端picker"
console.log(`我是 ${nickName}``)
>> 我是 前端picker
数组/对象会显示在一行
console.log({object: 'object'}, {object: 'object'});
console.log(['array', 'array'], ['array', 'array']);
CSS样式美化输出
在上面我们介绍了占位符输出,其实还有占位符%c,可以用来接收css样式。
console.log('我是红色 %c 文字', 'color: red;');
每个%c只负责它之后的文字,知道遇到下一个%c;
console.log('This is %cred text %c 我没颜色 %c 我是绿色.', 'color: red;', '', 'color: green;');
当然你也可以选择把样式定义成变量。
let style="background: white;border: 3px solid red;color: red;font-size: 50px;margin: 40px;padding: 20px;"
undefined
console.log('%c我是log!', style);
console.clear()
大部分的浏览器在开发者工具都内置了清除控制条的方法。
其实console对象也提供了clear方法来清空控制台。
当你执行console.clear()之后
cosole.debug()
输出“调试”级别的消息,并且在浏览器中只有你配置了debug才可以显示。
例如在火狐浏览器中:
当你没有勾选调试的时候:是无法显示debug的信息的。
只有你勾选调试的时候,才会显示。
error()
向 Web 控制台输出一条错误消息,并且只有才浏览器配置了errors才可以显示。
下图是在火狐浏览器的效果
下图是在chrome的效果
两个浏览器都会在error的前面加上一个小图标。
info()
向web控制台输出一个通知信息,并且只有在浏览器配置info可见的时可以显示。
下图是在火狐浏览器的效果
下图是在chrome的效果
在火狐浏览器中会在前面加上小图标,而chrome没有
warn()
向 Web 控制台输出一条警告信息,并且只有在浏览器配置warning可见的时可以显示。
下图是在火狐浏览器的效果
下图是在chrome的效果
两个浏览器都会在warn的前面加上一个小图标。
console.count()
输出 count() 被调用的次数。此函数接受一个可选参数 label,如果你不设置参数的话,这个参数默认名叫**“default”**。
用来统计
console.count('我是');
console.count('前端picker');
console.count('我是');
console.count('前端picker');
console.count('我是');
console.count('前端picker');
通过下图可以看到,针对不同的参数,count()是分别累计的。
console.countReset()
用来重启计数器的.同样也接收一个label参数,
如果提供了参数label,此函数会重置与label关联的计数。
如果省略了参数label,此函数会重置默认的default计数器。
console.dir()
在控制台中显示指定JavaScript对象的属性,并通过类似文件树样式的交互列表显示。
也就是语法是:
console.dir(object)
const auther = {name: '前端picker',age: '18',};console.log(auther);
console.dir(auther);
在chrome浏览器中,是支持这个属性的,下图可以看出与log的不同
但是在火狐浏览器中,log和dir的输出一致,不同的是火狐会默认展开dir的结果。
当然log和dir在输出dom结构的时候是完全不同的。不过这个我们放在dirxml方法中学习。
console.dirxml()
显示一个明确的XML/HTML元素的包括所有后代元素的交互树。 如果无法作为一个element被显示,那么会以JavaScript对象的形式作为替代。 它的输出是一个继承的扩展的节点列表,可以让你看到子节点的内容。
同时也支持object。
在dir中我们把DOM留到了这里。
创建一个DOM对象
var childNode = document.createElement('p');
childNode.innerHTML = '<span>这里是提示信息〜〜</span>';
使用log/dir/dirxml输出
log
dir
dirxml
可以看出log和dirxml的输出效果是一致的,是以DOM的形式输出的,dir则输出的是属性的值。
group()、groupCollapsed() 和 groupEnd()
将不同的控制台输出组合在一起以显示它们之间的一种关系形式。通常是组合在一起使用的。
group接收一个参数,表示组名,如果不设置的话,在不同的浏览器表现不一致,浏览器默认展开组。
groupCollapsed()与group的不同在于groupCollapsed会自动折叠组。
groupEnd()表示组的结束。
group+groupEnd
console.group();
console.log('name:');
console.log('前端picker');
console.groupEnd();console.group('参数');
console.log('age');
console.log('18');
console.groupEnd();
下面是chrome的效果。不设置组名的话,默认是console.group,同时一组的输出会缩进。
下面是火狐的效果不设置组名的话,默认是<无组标签>
groupCollapsed+grounEnd
console.groupCollapsed();
console.log('name:');
console.log('前端picker');
console.groupEnd();console.group('参数');
console.log('age');
console.log('18');
console.groupEnd('参数');
嵌套
console.group('下面是作者信息');
console.log('第1项');
console.group('name');
console.log('前端picker');
console.groupEnd();
console.log('第2项');
console.group('age');
console.log('18');
console.groupEnd();
console.groupEnd();
CSS样式美化-%c
console.group('%c下面是作者信息','color:red;');
console.log('第1项');
console.group('name');
console.log('前端picker');
console.groupEnd();
console.log('第2项');
console.group('age');
console.log('18');
console.groupEnd();
console.groupEnd();
console.table()
这个方法需要一个必须参数,参数 必须是一个数组或者是一个对象;还可以使用一个可选参数 columns。
它会参数以表格的形式打印出来。数组中的每一个元素(或对象中可枚举的属性)将会以行的形式显示在表格中。
表格的第一列是 index。如果数据 data 是一个数组,那么这一列的单元格的值就是数组的索引。 如果数据是一个对象。
数组
let ary = ['1','2','3'
];
console.table(ary);
object对象
let obj = {name: '前端picker',age: '18',
};
console.table(obj);
对象数组
let aryOfObjects = [{name: '张三',age: '12',},{name: '李四',age: '18',},{name: '王五',age: '19',}
];
console.table(aryOfObjects);
如图所示,table()为我们提供了一个很好的对象布局,其中重复键作为列标签。,每个对象中的所有键都将表示为一列,无论其他对象中是否有对应的键与数据。如果对象没有键列的数据,则它显示为空。
数组数组
let aryOfArray = [
[1,2,3],[3,4,5],[6,7,8]
];
console.table(aryOfArray);
数组数组类似于对象数组。它使用内部数组的索引作为列标签,而不是作为列标签的键。因此,如果一个数组的项目数比其他数组多,那么这些列的表中将有空白项目。就像对象数组一样。
对象数组数组
let aryOfArraysWithObject = [['1', '2', {name: '张三',age: '12',},],['3', '4', {name: '李四',age: '18',},}],['5', '6', {name: '王五',age: '19',}]
];console.table(aryOfArraysWithObject);
在Chrome中,要查看第三列中这些对象中包含的内容,是无法展开的,也就是无法查看。。
不过在火狐浏览器中,会自动展开,可以清除的看到结果
time()、timeLog() 和 timeEnd()
time()
你可以启动一个计时器来跟踪某一个操作的占用时长。每一个计时器必须拥有唯一的名字,页面中最多能同时运行10,000个计时器。当以此计时器名字为参数调用 console.timeEnd() 时,浏览器将以毫秒为单位,输出对应计时器所经过的时间。
console.time(计时器名称)
timeEnd()
停止一个通过 console.time() 启动的计时器,并并输出结束的时间
console.timeEnd(计时器名称)
timeLog()
在控制台输出计时器的值,该计时器必须已经通过 console.time() 启动。
console.timeLog()(计时器名称)
使用
console.time('this is a timer');
console.timeLog('this is a timer');
console.timeEnd('this is a timer');
计算for的时间
console.time('this is a timer');
for(let i=0; i<10000000;i++){}
console.timeLog('this is a timer');
console.timeEnd('this is a timer');
console.assert()
console.assert()命令类似于前面提到的错误命令。不同之处在于断言允许使用布尔条件来确定是否应该将文本输出到控制台。
例如:你想测试一个变量的值,并且这个值不等于’前端picker’,
如果变量低于该数字并且条件解析为 true,则 assert 命令不执行任何操作。如果条件解析为 false,则显示输出文本。通过这种方式,你就不需要通过if判断是不是需要输出之后,再使用console.error()输出。
let name = '张三';
console.assert(name === '前端picker', '不是是前端picker,无法输出');
let name1 = '前端picker';
console.assert(name1 === '前端picker', '不是前端picker------1,可以输出');
在Chrome中, 还可以输出显示断言来自何处。
let value = 2;
function chackValue() {chackValue3();
}
function chackValue2() {chackValue3();
}
function chackValue3() {console.assert(value < 1, 'This was false.');
}
chackValue();
为了方便看,我们使用vscode标注了行数。
通过下图可以看出,Chrome告诉我们断言在9行。
console.trace
调用堆栈
在学习trace之前我们先来学习什么是调用堆栈!!!
有这样四个函数 function1调用function2 ,function2调用function3,function3调用function4
看这张图,这几个函数呈现出堆栈的特征。最后被调用的函数出现在最上方。因此称呼这种关系为调用堆栈(call stack)。
trace可以干啥
用来记录 JavaScript 堆栈跟踪,同时我们还还可以添加参数,用来表示当前跟踪的名册灰姑娘。
function f1(){console.log('f1')f2()
}
function f2(){console.log('f2')f3()
}
function f3(){console.log('f3')f4()
}
function f4(){console.log('f4')console.trace("f4的追踪记录");
}
从图中我们可以看到:触发 console.trace 之前调用的最后一个函数是f4。所以这将是调用堆栈的顶部。然后一次是f3,f2 ,f1
Console 3000字完整指南,让你不只会用console.log !相关推荐
- python小论文范文3000字_完整的论文范文3000字
2019-08-18 [完整的 英文]完整的同义词 [完整的拼音]:wán zhěng[完整的意思]:具有或保持着应有的各部分:没有损坏或残缺.[完整的同义词]:完好 完全完整的造句1.爸爸送给小军一 ...
- react测试组件_如何测试React组件:完整指南
react测试组件 When I first started learning to test my apps back in the day, I would get very frustrated ...
- rails i18n模型_Rails国际化的完整指南(i18n)
rails i18n模型 by Anastasia 由Anastasia Rails国际化的完整指南(i18n) (The Complete Guide to Rails Internationali ...
- 毛概社会实践报告3000字
完整实践报告下载地址->>>毛概社会实践报告 一共13页,3000字以上,主题是疫情对家乡经济的影响.(含调查问卷) 部分展示: 完整实践报告下载地址->>>毛概社 ...
- 关于计算机物联网的文章,物联网认识论文3000字_关于物联网认识论文3000字_物联网导论论文3000字...
高等数学与物联网800字论文 展开全部·题名(Title,Topic) 题名又2113称题目或标题.题5261名是以最恰当.最简明的词语反映论文中4102最重要的特定内1653容的逻辑组合.论文题目是 ...
- JavaScript IndexedDB 完整指南
JavaScript IndexedDB 完整指南 JavaScript IndexedDB 完整指南 1. 浏览器存储方式 2. 使用案例 3. 性能和其他考虑因素 4. 小结 JavaScript ...
- 医院计算机岗位实践报告,it实习报告范文3000字
金工实习到了一定的阶段了,那么这次实习中,你有了一些怎样的收获和总结了呢?下面是由出国留学网小编为大家整理的"大学生金工实习报告范文3000字",仅供参考,欢迎大家阅读. 大学生金 ...
- 《刻意学习》读后感心得体会3000字左右
<刻意学习>读后感心得体会3000字左右: 清晨,天微微亮.床边的手机闹铃开始疯狂的振动,持续的振动深入灵魂,像一位不速之客闯进我的梦里,睡眼惺忪的我极不情愿的半睁双眼,顺着铃声的方向,挣 ...
- 可以用来分析文本数据的Python工具的完整指南
探索性数据分析是任何机器学习工作流程中最重要的部分之一,自然语言处理也是如此. 但是,应该选择哪些工具来有效地浏览和可视化文本数据? 在本文(Shahul Es最初在 Neptune博客 上发布 )中 ...
最新文章
- centos7 安装 Mysql 5.7.28,详细完整教程
- 百度AI攻坚战:PaddlePaddle中国突围
- 最近的一次敏捷项目Scrum经验总结
- cygwin nginx php mysql_Windows 下 Nginx + PHP5 的安装与配置
- 浅析企业网站进行seo都会带来哪些优势呢?
- 2、ShardingSphere 之 Sharding-JDBC实现水平分表
- 多线程对于共享变量访问带来的安全性问题
- spring boot 入门荔枝
- jQuery Mobile基础 学习笔记
- C#LeetCode刷题之#326-3的幂(Power of Three)
- matlab 排课代码,matlab遗传算法排课问题,程序一直有错,求解答
- 给大家推荐一个经典的ping工具-MTR
- php如何实现运算符重载,JS怎样实现运算符重载
- matlab 产生时域波形,matlab时域波形图
- 不积跬步无以至千里,反思
- html设置右键失灵,鼠标右键失灵是怎么回事
- python输入如何加单位_Python中的单位转换
- Lync2013 升级Skype For Bussiness 2015 升级思路整理
- 差分进化算法_想用遗传算法?来看看这些已为你做好的开源优化框架
- APP定制开发:APP软件开发的语言和开发环境
热门文章
- 网络工程师的昨天今天明天
- 二次封装图片第三方框架——简单工厂模式的运用
- 投资人朱啸虎:给创业者和新品牌的五大建议
- 现在计算机这个行业的技术更新换代怎么可以这么快(在不学点东西真的会被淘汰)
- 用计算机学数学日记,【精华】小学生数学日记十篇
- DAMA数据管理知识体系指南-读书笔记6
- php图片动画源码,JavaScript_jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载),ImageDrawer.js是一款可以实现动 - phpStudy...
- 百度6面经历!!!实习2面,提前offer1面(挂了),校招3面
- 百度地图API限制地图范围,拖拽出区域自动弹回
- 【正则表达式】 校验密码大小写,数字,特殊符号