如何使用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读取注册表的键值示例
Sep 25 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
Dec 20 Javascript
js动态获取子复选项并设计全选及提交的实现方法
Jun 24 Javascript
javascript中获取元素标签中间的内容的实现方法
Oct 08 Javascript
js仿微信公众平台打标签功能
Apr 08 Javascript
详解react如何在组件中获取路由参数
Jun 15 Javascript
带你了解session和cookie作用原理区别和用法
Aug 14 Javascript
vue 计时器组件的实现代码
Sep 14 Javascript
JavaScript代码实现txt文件的上传预览功能
Mar 27 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
Nov 13 Javascript
微信提示 在浏览器打开 效果实现过程解析
Sep 10 Javascript
vue 授权获取微信openId操作
Nov 13 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
我的论坛源代码(九)
2006/10/09 PHP
PHP中for循环与foreach的区别
2017/03/06 PHP
ThinkPHP开发--使用七牛云储存
2017/09/14 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
JavaScript进阶教程(第四课第一部分)
2007/04/05 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
2012/02/27 Javascript
jquery cookie实现的简单换肤功能适合小网站
2013/08/25 Javascript
javascript Event对象详解及使用示例
2013/11/22 Javascript
jquery插件之定时查询待处理任务数量
2014/05/01 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
2014/06/27 Javascript
js 函数式编程学习笔记
2017/03/25 Javascript
jQuery实现QQ空间汉字转拼音功能示例
2017/07/10 jQuery
mui back 返回刷新页面的实例
2017/12/06 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
JS实现常见的查找、排序、去重算法示例
2018/05/21 Javascript
JS块级作用域和私有变量实例分析
2019/05/11 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
2019/08/28 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
2019/12/30 Javascript
详解JavaScript执行模型
2020/11/16 Javascript
[00:10]DOTA2全国高校联赛 以DOTA2会友
2018/05/30 DOTA
浅谈对yield的初步理解
2017/05/29 Python
python实现决策树分类算法
2017/12/21 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
Python 装饰器原理、定义与用法详解
2019/12/07 Python
tensorboard实现同时显示训练曲线和测试曲线
2020/01/21 Python
PyQT5 实现快捷键复制表格数据的方法示例
2020/06/19 Python
荷兰超市:DEEN
2018/03/14 全球购物
大学生村官事迹材料
2014/01/21 职场文书
平安建设实施方案
2014/03/19 职场文书
立志成才演讲稿
2014/09/04 职场文书
领导班子群众路线与四风问题对照检查材料思想汇报
2014/10/11 职场文书
80后婚前协议书范本
2014/10/24 职场文书
欠条范文
2015/07/03 职场文书
新娘婚礼致辞
2015/07/27 职场文书
MySQL连接控制插件介绍
2021/09/25 MySQL