如何使用JS console.log()技巧提高工作效率


Posted in Javascript onOctober 14, 2020

我们知道 console.log(message)用法很简单,表示将参数message 打印到控制台上。

console.log('前端小智')
// 前端小智

const myAge = 28
console.log(myAge) // 28

本文主要介绍5个有用的技巧,可帮助你在使用console.log()时提高工作效率。

1. 打印全名变量

如果在控制台打印多个变量,是数量比较多的情况下,我们很难区别哪个变量对应哪个值。

function sum(a, b) {
console.log(b);
return a + b;
}

sum(1, 2);
sum(4, 5);

执行上述代码后,我们只会看到一系列数字

要表示值和变量之间关系,可以用花括号把变量包起来:{b}:

2.高级格式化

将某些东西打印到控制台最常见方法是简单地使用一个参数调用console.log():

console.log('前端小智') // 前端小智

有时我们可能想要一条包含多个变量的信息。 幸运的是,console.log()可以使用%s,%i等说明符以sprintf()的方式格式化字符串。

const user = '前端小智';
const attempts = 5;

console.log('%s 登录失败了 %i 次', user, attempts);
// 前端小智 登录失败了 5 次

%s和%i被user和attempts的值替换。 说明符%s转换为字符串,而%i转换为数字。

以下是可用说明符的列表:

说明符 作用
%s 元素转换为字符串
%d 或 %i 元素转换为整数
%f 元素转换为浮点数
%o 元素以最有效的格式显示
%O 元素以最有效的格式显示
%c 应用提供的css

3.具有样式的打印风格

浏览器控制台允许我们将样式应用于打印的消息,我们可以通过将%c说明符与相应的css样式一起使用来实现,如下所示:

console.log('%c Big message', 'font-size: 36px; font-weight: bold');

说明符%c应用CSS样式'font-size: 36px; font-weight: bold'

4. 交互展示

日志样式化依赖于主机的控制台实现。像Chrome和Firefox这样的浏览器提供对象和数组的交互展示,而 Node 控制台输出为文本。

来看看Chrome如何打印普通对象,数组和DOM树,可以通过展开和折叠与这些元素进行交互。

4.1 Objects

const myObject = {
 name: 'John Smith',
 profession: 'agent'
};
console.log(myObject);

可以展开和折叠对象属性列表,也可以看到对象的原型。

4.2 Arrays

const characters = ['Neo', 'Morpheus', 'John Smith'];

console.log(characters);
4.3 DOM 树结构

我们可以直接与控制台中显示的DOM元素进行交互。

console.log(document.getElementById('root'));

在Chrome控制台中,可以扩展DOM元素

4.4 交互式嵌套里的消息

%o说明符(为值关联了正确的打印格式)可以在文本消息中插入数组,对象,DOM元素和常规文本,而不会失去交互性。

const myObject = {
 name: 'John Smith',
 profession: 'agent'
};

console.log('Neo, be aware of %o', myObject);

从控制台看,myObject数组不会转换为字符串,而是保持交互性。

5.在 Node 控制台中打印大对象

Node中的log以纯文本形式输出。 但是,Node 中的console.log()不会显示具有深层嵌套的对象:第3级的对象显示为[Object]。

const myObject = {
 propA: {
  propB: {
   propC: {
    propD: 'hello'
   }
  }
 }
};

console.log(myObject);

运行脚本时,propC的对象打印为[Object]:

如何使用JS console.log()技巧提高工作效率

要查看完整的对象结构,可以使用jsON.stringify():

const myObject = {
 propA: {
  propB: {
   propC: {
    propD: 'hello'
   }
  }
 }
};

console.log(jsON.stringify(myObject, null, 2));

JSON.stringify(myObject, null, 2)返回该对象的JSON表示形式,第三个参数2在空格中设置缩进大小。

如何使用JS console.log()技巧提高工作效率

希望这5个技巧可以使你使用 console.log() 体验更加高效。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
asp javascript 实现关闭窗口时保存数据的办法
Nov 24 Javascript
juqery 学习之三 选择器 简单 内容
Nov 25 Javascript
js简单的表格添加行和删除行操作示例
Mar 31 Javascript
给js文件传参数(详解)
Jul 13 Javascript
jquery任意位置浮动固定层插件用法实例
May 29 Javascript
JS实现的简洁二级导航菜单雏形效果
Oct 13 Javascript
jQuery实现的简单提示信息插件
Dec 08 Javascript
详解Node.js利用node-git-server快速搭建git服务器
Sep 27 Javascript
vue2.0 datepicker使用方法
Feb 04 Javascript
深入浅析Vue 中 ref 的使用
Apr 29 Javascript
vue中监听返回键问题
Aug 28 Javascript
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
JavaScript Blob对象原理及用法详解
Oct 14 #Javascript
基于javascript原生判断DOM是否加载完毕
Oct 14 #Javascript
JavaScript常用进制转换及位运算实例解析
Oct 14 #Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
Oct 14 #Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
Oct 13 #Javascript
原生JS实现相邻月份日历
Oct 13 #Javascript
jquery简易手风琴插件的封装
Oct 13 #jQuery
You might like
php无限分类且支持输出树状图的详细介绍
2013/06/19 PHP
解析zend studio中直接导入svn中的项目的方法步骤
2013/06/21 PHP
php简单实现单态设计模式的方法分析
2017/07/28 PHP
php简单读取.vcf格式文件的方法示例
2017/09/02 PHP
js判断浏览器的比较全的代码
2007/02/13 Javascript
jquery的Tooltip插件 qtip使用详细说明
2010/09/08 Javascript
jQuery 表单验证扩展代码(一)
2010/10/11 Javascript
Event altKey,ctrlKey,shiftKey属性解析
2013/12/18 Javascript
javascript调试之DOM断点调试法使用技巧分享
2014/04/15 Javascript
JavaScript设计模式之建造者模式介绍
2014/12/28 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
jQuery控制div实现随滚动条滚动效果
2016/06/07 Javascript
10分钟掌握XML、JSON及其解析
2020/12/06 Javascript
angular.js实现购物车功能
2017/10/23 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
2019/05/05 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
JS数据类型STRING使用实例解析
2019/12/18 Javascript
微信小程序实现页面监听自定义组件的触发事件
2020/11/01 Javascript
[55:39]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第二场 1月19日
2021/03/11 DOTA
跟老齐学Python之Python文档
2014/10/10 Python
编写Python爬虫抓取暴走漫画上gif图片的实例分享
2016/04/20 Python
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
django站点管理详解
2017/12/12 Python
使用pygame实现垃圾分类小游戏功能(已获校级二等奖)
2020/07/23 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
Sarenza德国:法国最大的时尚鞋和包包网上商店
2019/06/08 全球购物
俄罗斯品牌服装和鞋子的在线商店:KUPIVIP
2019/10/27 全球购物
学雷锋活动倡议书
2014/08/30 职场文书
推广普通话共筑中国梦演讲稿
2014/09/21 职场文书
公司租车协议书
2015/01/29 职场文书
预备党员转正党小组意见
2015/06/01 职场文书
神秘岛读书笔记
2015/07/01 职场文书
班级联欢会主持词
2015/07/03 职场文书
2019年亲子运动会口号
2019/10/11 职场文书
golang 实现时间戳和时间的转化
2021/05/07 Golang
Python语言规范之Pylint的详细用法
2021/06/24 Python