如何使用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 相关文章推荐
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
Nov 05 Javascript
JS trim去空格的最佳实践
Oct 30 Javascript
jquery 利用show和hidden实现级联菜单示例代码
Aug 09 Javascript
jQuery 中国省市两级联动选择附图
May 14 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
Mar 11 Javascript
全面了解js中的script标签
Jul 04 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
Aug 09 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
Sep 19 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
Jun 15 Javascript
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
vue.js内置组件之keep-alive组件使用
Jul 10 Javascript
React优化子组件render的使用
May 12 Javascript
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生成xml简单实例代码
2009/12/16 PHP
PHP中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
php生成excel列名超过26列大于Z时的解决方法
2014/12/29 PHP
Symfony2实现从数据库获取数据的方法小结
2016/03/18 PHP
ThinkPHP表单令牌错误的相关解决方法分析
2016/05/20 PHP
客户端脚本中常常出现的一些问题和调试技巧
2007/01/09 Javascript
pjblog修改技巧汇总
2007/03/12 Javascript
关于extjs4如何获取grid修改后的数据的问题
2013/08/07 Javascript
解析javascript瀑布流原理实现图片滚动加载
2016/03/10 Javascript
javascript url几种编码方式详解
2016/06/06 Javascript
jquery checkbox的相关操作总结
2016/10/17 Javascript
JavaScript内存泄漏的处理方式
2017/11/20 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
vue.js实现的幻灯片功能示例
2019/01/18 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
jQuery实现简单日历效果
2020/07/05 jQuery
vue 封装面包屑组件教程
2020/11/16 Javascript
js实现限定区域范围拖拉拽效果
2020/11/20 Javascript
[01:11]steam端dota2实名认证操作流程视频
2021/03/11 DOTA
Python读写Excel文件方法介绍
2014/11/22 Python
python实现弹跳小球
2019/05/13 Python
python查询MySQL将数据写入Excel
2020/10/29 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
纯CSS实现聊天框小尖角、气泡效果
2014/04/04 HTML / CSS
详解CSS3中字体平滑处理和抗锯齿渲染
2017/03/29 HTML / CSS
基于ccs3的timeline时间线实现方法
2020/04/30 HTML / CSS
Staples英国官方网站:办公用品一站式采购
2017/10/06 全球购物
维多利亚的秘密官方网站:Victoria’s Secret
2018/10/24 全球购物
社区庆中秋节活动方案
2014/02/07 职场文书
计算机应届毕业生自荐信范文
2014/02/23 职场文书
法院信息化建设方案
2014/05/21 职场文书
2014年房地产个人工作总结
2014/12/20 职场文书
出租车拒载检讨书
2015/01/28 职场文书
个人先进事迹总结
2015/02/26 职场文书
开学典礼校长致辞
2015/07/29 职场文书
如何Tomcat中使用ipv6地址
2022/05/06 Servers