嘘,这里可能有你不知道的console小技巧
时间:2022-06-19
本文章向大家介绍嘘,这里可能有你不知道的console小技巧,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
程序员的日常应该是不断的制造Bug与修复Bug了,而修复Bug的速度往往象征着你经验的高低。身为前端工程师的你console应该是最常用到的调试工具了。殊不知,console居然还有很多你未曾体验过的好方法,本文将带你一探究竟。
console是window对象的属性之一,你可以通过通过console输出有助于调试代码的字符串、数组以及对象,然后通过浏览器控制台(chrome->单击右键->检查->console)查看。
1、输出的四种方式
// 用于输出普通信息console.log("normal:你我皆凡人,生在人世间");// 用于输出提示性信息(应该会有个小图标,不过谷歌不支持)console.info("information:人生不如意十有八九,还有一二三四五六七特别不如意。");// 用于输出错误信息console.error("error:我就是传说中的Bug");// 用于输出警示信息console.warn("warn:没有注释留给你,难写的代码必定难读");
打印结果:
以上四种方法虽然都可以打印,但给予你的视觉冲击是不一样的(info应该会有一个小图标,不过谷歌不支持),这样非常有助于你快速找到相应的信息。
如果要清除打印信息你可以通过:
console.clear()
2、判断
assert方法用于判断。接受两个参数,第一个参数是表达式,第二个参数是字符串。只有当第一个参数为false,才会输出第二个参数,否则不会有任何结果。
//无任何输出console.assert(1===1,"真");//给予一个错误提示“Assertion failed: 假”console.assert(1!==1,"假");
3、统计
count方法用于计数,输出它被调用了多少次。
(function() { for (var i = 0; i < 5; i++) { console.count('count'); }})();
打印结果:
4、分组打印
console.group("A组");console.log("张三");console.log("李四");console.groupEnd();
console.group("B组");console.log("王五");console.log("赵六");console.groupEnd();
// 默认折叠console.groupCollapsed("C组");console.log("低调1");console.log("低调2");console.groupEnd();
打印结果:
5、打印对象
先来定义二个对象:
const box = { userName:"laoTie", age:18, sex:"女"};const desk = { userName:"laoWang", age:88, sex:"男"};
如果现在要将这两个对象全部打印出来,我们一般这样:
console.log(box,desk);
运行结果:
从结果来看,我们并不知道打印出来的内容具体来自于哪一个对象。如果我们换一种方式:
console.log({box,desk});
这样我们就可以知道具体打印的是哪一个对象了:
6、CSS渲染
如果需要添加打印样式的话,就需要用到%c 占位符。%c 占位符也是console最常用的。使用 %c 占位符时,对应的后面的参数必须是 CSS 语句,用来对输出内容进行 CSS 渲染。
const str = "十行代码九个警告八个错误竟然敢说七日精通六天学会五湖四海也不见如此三心二意之项目经理简直一等下流。"// 输出带样式文字console.log("%c "+str,"color: red; font-size: 30px;font-weight:bold");
打印结果:
7、将对象打印成表格
我们可以使用table方法来用表格方式打印对象:
const box = { userName:"laoTie", age:18, sex:"女"};const desk = { userName:"laoWang", age:88, sex:"男"};console.table({box,desk})
打印结果:
8、计时器
我们可以通过time方法打印代码的耗时情况:
// 计时开始console.time('计时器');let i = 0;while (i < 9999999){ i++;}// 计时结束console.timeEnd('计时器');
打印结果:
9、追踪函数调用过程
通过trace可以追踪到我们的方法被调用的情况:
function one(a) { console.trace(); return a;}function two(a) { return three(a);}function three(a) { return one(a);}var a = two(666);
打印结果:
最后
合理的利用console的各种方法,会使我们的调试过程更加愉悦。
不过console除了本身作为调试利器以外,还被一些网站作为招聘人才的一种广告手段,例如百度:
输出代码:
try{ window.console && window.console.log && ( console.log("同学,祝贺你喜提彩蛋~n" + "或许你们还在犹豫是否加入,我会坦诚的告诉你我们超酷;n" + "在这里大家都用无人车代步,AI音箱不仅播放还可以交互;n" + "人工智能是发展的核心技术,做自己让未来不只领先几步;n" + "在这里做自己,欢迎来到百度!n"), console.log("%c百度2019校园招聘简历提交:" + "http://dwz.cn/XpoFdepe " + "你将有机会直接获得面试资格)" ,"color:red") )}catch(e){}
天猫可以说是将console利用到了极致!除了招聘信息外,它还在警告你:别在我的控制台瞎折腾,后果很严重!
输出代码:
var e={ "info":"喵~ 加入我们吧 https://tb.cn/iS8NBOy", "logo":" ::: ::: n" + " ::::::: ::::: n" + "::::::::: ::::::::n" + ":::::::::::::::::::::::::::::::::::::::::::n" + ":::: ::: :::::::::::::::: ::: ::::n" + "::: Smart :::::cool:::: Crazy :::n" + "::::: ::: ::::::::::::::: ::: :::n" + ":::::::::::::::::::::::::::::::::::::::::::"};try { window.console && console.log && ( console.log("%c 安全警告", "font-size:50px;" + "color:red;" + "-webkit-text-fill-color:red;" + "-webkit-text-stroke: 1px black;"), console.log("%c 此浏览器功能专供开发者使用。" + "请不要在此粘贴执行任何内容," + "这可能会导致您的账户受到攻击," + "给您带来损失 !", "font-size: 20px;color:#333"), console.info(e.logo+"nn"+e.info) )}catch(e){}
[公众号回复“电子书”,送你经典前端电子书籍]
—————END—————
- 重温delphi之控制台程序:Hello World!
- Docker集中化web界面管理平台-Shipyard部署记录
- "Goole项目托管"及"CodePlex发布开源项目"要点
- Docker网络解决方案-Calico部署记录
- c#中开发ActiveX的学习笔记
- Android新手之旅(4) 通过HTTP访问web
- Flash/Flex学习笔记(9):ActionScript3.0与Javascript的相互调用
- Flash/Flex学习笔记(8):ActionScript3.0中的面对对象
- Docker网络解决方案-Weave部署记录
- Flash/Flex学习笔记(7):FMS3.5基于IIS的安装
- Netdata---Linux系统性能实时监控平台部署记录
- linux下向一个文件中的某行插入数据的做法
- Flash/Flex学习笔记(2):捕获摄像头
- split-brain 脑裂问题(Keepalived)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Kears 使用:通过回调函数保存最佳准确率下的模型操作
- django form和field具体方法和属性说明
- 总结PHP中初始化空数组的最佳方法
- tensorflow使用CNN分析mnist手写体数字数据集
- PHP7 mongoDB扩展使用的方法分享
- 主流开源分布式图数据库 Benchmark
- PHP封装的简单连接MongoDB类示例
- 基于Tensorflow的MNIST手写数字识别分类
- Yii框架ACF(accessController)简单权限控制操作示例
- tensorflow 动态获取 BatchSzie 的大小实例
- TP5.0框架实现无限极回复功能的方法分析
- Tensorflow之MNIST CNN实现并保存、加载模型
- tensorflow 大于某个值为1,小于为0的实例
- YII框架模块化处理操作示例
- 基于tensorflow for循环 while循环案例