5个console.log() 技巧帮你提高工作效率

更新日期: 2020-03-20阅读: 2.3k标签: 效率

我们知道 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数组不会转换为字符串,而是保持交互性。

在 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() 体验更加高效。

原文:https://dmitripavlutin.com/

链接: https://fly63.com/article/detial/8337

jQuery 效率提升建议

jQuery简洁通用的方法集把编码者从繁重的工作中解脱出来,也拉低了进入javascript的门槛,初学者对浏览器兼容性一无所知的情况下,几行代码就可以写出超炫的特效。

7大笔记应用,让你的代码效率翻7倍

编程容易产生挫折,即使作为一种业余爱好也可能是这样。建立一个网页,手机APP或桌面应用都是个很大的工程,好的记笔记技能是让这个工程井然有序的关键,也是克服压力、绝望和倦怠的好方法。

html5前端开发工程师_如何提高前端开发效率

不知大家有没类似这样的经历:一天忙到晚,一会被PM叫去确认需求,一会被设计拉去确认UI是否能实现,一会又被测试叫去确认bug,然后貌似做了很多事,但好像工作进度也没什么进展。然后,只能晚上加班,在夜深人静时还得敲代码,苦逼

使用这些 CSS 属性选择器来提高前端开发效率!

属性选择器非常神奇。它们可以使你摆脱棘手的问题,帮助你避免添加类,并指出代码中的一些问题。但是不要担心,虽然属性选择器非常复杂和强大,但是它们很容易学习和使用。在本文中,我们将讨论它们是如何运行的,并给出一些如何使用它们的想法。

提高远程工作效率的工具

近年来,远程工作愈来愈流行。远程工作能够帮助雇主能够降低运营成本,同时员工有机会实现工作与生活之间的平衡并避免通勤。下面我们就为大家推荐13个有用的工具

你是一直认为MySQL count(1) 比 count(*) 效率高么?

MySQL count(1) 真的比 count(*) 快么? 反正同事们都是这么说的,我也姑且觉得对吧,那么没有自己研究一下究竟?如果我告诉你他们一样,你信么?

提高开发效率的 Vue 技巧

vue 提供了组件功能,组件又可以分为全局组件和非全局组件。区别是全局组件你可以直接在 .vue 文件中直接使用自定义的 html 即可。非全局组件必须在 Vue 的对象中定义 components 引入这个组件

有哪些可以提升编程效率的技巧和方法?

传说程序员打字速度要快,很多人仍然会以这样一个标准来片面判断技术水平.拜托,你是一个程序员,不是一个打字员,打字快可以代表一些,但也并不代表什么.互联网行业还在纠结打字速度的,不是外行,就是一个没有独立思考的人.

推荐几款能提升代码效率的笔记应用

编程容易产生挫折,即使作为一种业余爱好也可能是这样。建立一个网页,手机APP或桌面应用都是个很大的工程,好的记笔记技能是让这个工程井然有序的关键,也是克服压力、绝望和倦怠的好方法

PHP开发提高效率技巧

因为代码对于性能的优化还是有实际性的价值的,并不是冰山哪一张,代码的编写实际对性能就起到了很大占比,就比如:一个常用common类,如果每一次使用都实例化那么这个类在内存中就会用很多个实例

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!