前言
作为前端工程师, 我们每天都离不开用控制台调试代码, console.log 也成了我们最常用的命令, 那除了用 console.log, 还有许多 console 的方法可以使用, 熟练掌握它们, 可以让我们在控制台看到的信息更美观准确, 也会大大提高我们的开发效率哦, 下面就跟小肆一起来看看吧.
Chrome 的控制台
大部分常用浏览器都有各自的控制台, 不过小肆用着最习惯的还是 Chrome 的控制台, 打开 Chrome,win 系统按 F12,Mac 系统按 command+option+J 就可以呼出控制台了, 切换到 Console 标签就能看到如下信息:
图 1
我们可以看到, baidu 还在控制台给我们留了个小彩蛋, 我想这个彩蛋也是为我们程序员同学留的吧. 让我们先学第一个命令清除控制台来开始吧.
清除控制台
在 chorme 下清除控制台的方法有很多:
输入 console.clear()命令或 clear()命令
使用快捷键 Control + J 或 Command + K
点击控制台左上角第二个图标
显示信息的命令
- console.log('技术放肆聊') // 输出普通信息
- console.info('技术放肆聊') // 输出提示信息
- console.warn('技术放肆聊') // 输出警告信息
- console.error('技术放肆聊') // 输出错误信息
- console.debug('技术放肆聊') // 输出调试信息
console.log,console.info,console.debug 这三个命令可以理解为一个, 我们只需要用 console.log 就行, 并且 Chrome 还不支持 console.debug 命令.
console.warn 命令输出警告信息, 信息前带有黄色警告符号.
console.error 输出错误信息, 信息前带有红色错误符号, 表示出错, 同时会显示错误发生的堆栈.
上段代码在 Chrome 控制台输出效果如下:
图 2
在 Safari 输出效果如下:
图 3
占位符
console 上述的命令支持 printf 的占位符格式, 支持的占位符有: 字符 (%s), 整数(%d 或 %i), 浮点数(%f) 和对象(%o):
占位符 | 作用 |
---|---|
%s | 字符串 |
%d or %i | 整数 |
%f | 浮点数 |
%o | 可展开的 DOM |
%O | 列出 DOM 的属性 |
%c | 根据提供的 CSS 样式格式化字符串 |
- // 字符(%s)
- console.log("%s","技术放肆聊");
- // 整数(%d 或 %i)
- console.log("%d 年 %d 月 %d 日",2019,1,6);
- // 浮点数(%f)
- console.log("PI=%f",3.1415926);
显示效果如下:
图 4
%o,%O 都是用来输出 Object 对象的, 对普通的 Object 对象, 两者没区别, 但是打印 dom 节点时就不一样了:
图 5
%c 占位符是最常用的. 使用 %c 占位符时, 对应的后面的参数必须是 CSS 语句, 用来对输出内容进行 CSS 渲染. 常见的输出方式有两种: 文字样式, 图片输出.
图 6
信息分组
console.group()用于将显示的信息分组, 可以把信息进行折叠和展开.
console.groupEnd()结束内联分组
图 7
将对象以树状结构展现
console.dir()可以显示一个对象所有的属性和方法.
图 8
显示某个节点的内容
console.dirxml()用来显示网页的某个节点 (node) 所包含的 html/xml 代码
图 9
判断变量是否是真
console.assert()用来判断一个表达式或变量是否为真,
此方法接受两个参数, 第一个参数是表达式, 第二个参数是字符串. 只有当第一个参数为 false, 才会输出第二个参数, 否则不会有任何结果.
图 10
计时功能
console.time()和 console.timeEnd(), 用来显示代码的运行时间
- console.time("控制台计时器");
- for(var i = 0; i < 10000; i++){
- for(var j = 0; j < 10000; j++){}
- }
- console.timeEnd("控制台计时器");
图 11
性能分析 performance profile
console.profile()和 console.proileEnd()用来分析程序各个部分的运行时间, 找出瓶颈所在.
- function All(){
- for(var i = 0; i < 10; i++){
- funcA(100);
- }
- funcB(1000);
- }
- function funcA(count){
- for(var i = 0; i < count; i++){};
- }
- function funcB(count){
- for(var i = 0; i < count; i++){};
- }
- console.profile("性能分析器");
- All();
- console.profileEnd();
详细的信息在 Chrome 控制台里的 "profile" 选项里查看
console.count()统计代码被执行的次数
- function myFunction(){
- console.count("myFunction 被执行的次数");
- }
- myFunction(); //myFunction 被执行的次数: 1
- myFunction(); //myFunction 被执行的次数: 2
- myFunction(); //myFunction 被执行的次数: 3
console.table 表格显示方法
-w948
总结
合理的利用 console 的各种方法, 会使我们的调试过程更加愉悦, 今天的分享就到这里了.
来源: http://www.jianshu.com/p/1cf4aa8550fa