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

我们知道 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]：

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

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

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • javascript的console.log()用法小结

    console.log 原先是 Firefox 的"专利",严格说是安装了 Firebugs 之后的 Firefox 所独有的调试"绝招". 这一招,IE8 学会了,不过用起来比 Firebugs 麻烦,只有在开启调试窗口(F12)的时候,console.log 才能出结果,不然就报错. 今天看到 Opera 也有个叫 dragonfly 的东东,用这东西查看 DOM,已经可以和 Firebug 媲美,然而还是不能用 console.log.于是有人就提供了这样两句

  • JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)

    JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)

    JavaScript 输出 JavaScript 没有任何打印或者输出的函数. JavaScript 显示数据 JavaScript 可以通过不同的方式来输出数据: 使用 window.alert() 弹出警告框. 使用 document.write() 方法将内容写到 HTML 文档中. 使用 innerHTML 写入到 HTML 元素. 使用 console.log() 写入到浏览器的控制台. 使用 window.alert() 你可以弹出警告框来显示数据: <!DOCTYPE html>

  • js console.log打印对象时属性缺失的解决方法

    1. 序 在编写代码时,我们常常用 console.log() 的方式将信息在控制台中打印出来以帮助我们进行前端调试.一般情况下,我们打印普通值都没有问题,但在打印对象类型时,我们就需要注意点了,要不然可能会出现不符合期望的结果. 2. console.log()输出对象属性缺失 首先,定义了一个 cat对象 ,其拥有 name, age, color, birthday 四个属性. 接着,我们又定义了一个函数 test ,它接收一个对象作为参数.调用test函数时,我们想知道传入test函数的

  • js console.log打印对像与数组用法详解

    js console.log打印对像与数组用法详解

    本文实例讲述了js console.log打印对像与数组用法.分享给大家供大家参考,具体如下: console.log是什么东西,其实就是一个打印js数组和对像的函数而已,就像是php的print_r,var_dump.console.log这个函数本身没什么好说的,这篇博客告诉大家怎么去用这个函数.在说这个函数之前,我想大家用的最多查看js输出,是alert吧,但是alert,只能弹string或者是int的 一.测试文件test.html <html xmlns="http://www

  • javascript代码调试之console.log 用法图文详解

    javascript代码调试之console.log 用法图文详解

    大家都有用过各种类型的浏览器,每种浏览器都有自己的特色,本人拙见,在我用过的浏览器当中,我是最喜欢Chrome的,因为它对于调试脚本及前端设计调试都有它比其它浏览器有过之而无不及的地方.可能大家对console.log会有一定的了解,心里难免会想调试的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来替代alert输出信息呢,下面我就介绍一些调试的入门技巧,让你爱上console.log 先的简单介绍一下chrome的控制台,打开chrome浏览器,按f12就可以轻松

  • node.js中的console.log方法使用说明

    方法说明: 向标准输出流打印字符并以换行符结束. 语法: 复制代码 代码如下: console.log([data], [...]) 接收参数: console.log接受若干个参数,如果只有一个参数,则输出这个参数的字符串形式. 如果有多个参数,则以类似于C语言printf()命令的格式输出. 如果没有参数,只打印一个换行符. 例子: 复制代码 代码如下: var count = 1234; console.log('count: %d', count); //输出结果  count : 12

  • js调试工具console.log()方法查看js代码的执行情况

    我之前在调试代码的时候,跟砸js代码执行情况,一般都是通过在代码块中使用alert的方式查看js代码的执行情况,今天也是看到有朋友使用console.log函数打印输出函数,变量,对象,下边就console.log的使用情况进行记录,具体的语法是: console.log("值为:",fn); console.log()能够输出变量,函数,数组,对象等等 <html> <head> <title>this关键字_函数调用</title>

  • JavaScript调试技巧之console.log()详解

    JavaScript调试技巧之console.log()详解

    一.什么是console.log()?除了一些很老版本的浏览器,现今大多数浏览器都自带调试功能:即使没有调试功能,也可以通过安装插件来进行补充.比如,老版本的Firefox没有自带调试工具,在这种情况下可以通过安装Firebug插件来添加调试功能.在具备调试功能的浏览器上,window对象中会注册一个名为console的成员变量,指代调试工具中的控制台.通过调用该console对象的log()函数,可以在控制台中打印信息.比如,以下代码将在控制台中打印"Sample log": 复制代

  • JS中捕获console.log()输出的方法

    本文实例讲述了JS中捕获console.log()输出的方法.分享给大家供大家参考.具体分析如下: 我们知道console.log()可以将信息输出到debugger中供开发者查看.但如果我们想要在JS中获取console.log()的输出结果呢?其实不难,先将原本的console.log保存起来,然后替换成另外一个实现即可.代码如下: var lastLog; console.oldLog = console.log; console.log = function(str) { console

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

    我们知道 console.log(message)用法很简单,表示将参数message 打印到控制台上. console.log('前端小智') // 前端小智 const myAge = 28 console.log(myAge) // 28 本文主要介绍5个有用的技巧,可帮助你在使用console.log()时提高工作效率. 1. 打印全名变量 如果在控制台打印多个变量,是数量比较多的情况下,我们很难区别哪个变量对应哪个值. function sum(a, b) { console.log(

  • 18 个 Python 编程技巧,提高工作效率

    目录 01交换变量 02字典推导(Dictionarycomprehensions)和集合推导(Setcomprehensions) 03计数时使用Counter计数对象. 04漂亮的打印出JSON 05解决FizzBuzz 06if语句在行内 07连接 08数值比较 09同时迭代两个列表 10带索引的列表迭代 11列表推导式 12字典推导 13初始化列表的值 14列表转换为字符串 15从字典中获取元素 16获取列表的子集 17迭代工具 18FalseTrue 前言: 初识Python语言,觉得

  • 20个JS简写技巧提升工作效率

    目录 当同时声明多个变量时,可简写成一行 利用解构,可为多个变量同时赋值 巧用三元运算符简化if else 使用||运算符给变量指定默认值 使用&&运算符简化if语句 使用解构交换两个变量的值 适用箭头函数简化函数 使用字符串模板简化代码 多行字符串也可使用字符串模板简化 对于多值匹配,可将所有值放在数组中,通过数组方法来简写 巧用ES6对象的简洁语法 使用一元运算符简化字符串转数字 使用repeat()方法简化重复一个字符串 使用双星号代替Math.pow() 使用双波浪线运算符(~~)

  • 17条提高工作效率的Python技巧分享

    目录 1.引言 2.技巧总结 2.1.处理用户的多个输入 2.2.处理多个条件语句 2.3.判断数字奇偶性 2.4.交换变量 2.5.反转字符串 2.6.判断字符串是否为回文串 2.7.尽量使用 Inline if statement 2.8.删除list中的重复元素 2.9.找到list中重复最多的元素 2.10.list 生成式 2.11.使用*args传递多个参数 2.12.在循环时处理下标 2.13.拼接list中多个元素 2.14.将两个字典进行合并 2.15.使用两个list生成一个

  • 用Python调用win命令行提高工作效率的实例

    作为程序猿,每天一上班打开电脑要做的时候就是打开各种工作所需的工具,如QQ,SQL Server,浏览器,编辑器等,每天都要一个个点,重复性的工作做多了也觉得烦(关键是影响了我上班倒水的时间). 于是就寻思着用python写一个简单的脚本来帮我一次性打开这些东西,解放我的双手,让我有时间去倒水. 环境是win10 64 Python3.6.5,使用到的模块是os,webbrowser. 其实实现的原理很简单,就是在相当于在win下的dos打开程序一样. 举个例子:如果我要打开我的qq. 在win

  • 学好Java MyBatis拦截器,提高工作效率

    学好Java MyBatis拦截器,提高工作效率

    目录 场景: 1.麻瓜做法 2.优雅做法 3.什么是拦截器? 4.使用拦截器更新审计字段 5.自定义拦截器 6.配置拦截器插件 场景: 在后端服务开发时,现在很流行的框架组合就是SSM(SpringBoot + Spring + MyBatis),在我们进行一些业务系统开发时,会有很多的业务数据表,而表中的信息从新插入开始,整个生命周期过程中可能会进行很多次的操作. 比如:我们在某网站购买一件商品,会生成一条订单记录,在支付完金额后订单状态会变为已支付,等最后我们收到订单商品,这个订单状态会变成

  • 分享十个Python提高工作效率的自动化脚本

    目录 01.解析和提取 HTML 02.二维码扫描仪 03.截图 04.创建有声读物 05.PDF 编辑器 06.迷你 Stackoverflow 07.自动化手机 08.监控 CPU/GPU 温度 09.Instagram 上传机器人 10.视频水印 在这个自动化时代,我们有很多重复无聊的工作要做. 想想这些你不再需要一次又一次地做的无聊的事情,让它自动化,让你的生活更轻松. 那么在本文中,我将向您介绍 10 个 Python 自动化脚本,以使你的工作更加自动化,生活更加轻松. 因此,没有更多

  • Git 命令使用技巧提供工作效率

    与其他技术相比,Git应该拯救了更多开发人员的饭碗.只要你经常使用Git保存自己的工作,你就一直有机会可以将代码退回到之前的状态,因此就可以挽回那些你深夜里迷迷糊糊犯下的错误. 尽管这么说,Git的命令行界面可是出了名的难掌握.接下来,就给大家介绍7个小技巧,最大限度发挥Git的作用. 通常,大部分时间我们都只会用到add.commit.branch和push/pull这些命令.大部分人熟悉这套只往一个方向运转的工作流.你们有没有想过,如果自己往仓库中添加了错误的文件,或是将代码提交到了错误的分

随机推荐