如何使用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() 体验更加高效。

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

时间: 2020-10-13

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 用法图文详解

大家都有用过各种类型的浏览器,每种浏览器都有自己的特色,本人拙见,在我用过的浏览器当中,我是最喜欢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

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()输出的方法

本文实例讲述了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()方法查看js代码的执行情况

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

javascript的console.log()用法小结

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

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

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

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

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

关于JavaScript和jQuery的类型判断详解

对于类型的判断,JavaScript用typeof来进行. 栗子: console.log(typeof null); //object console.log(typeof []); //object console.log(typeof {}); //object console.log(typeof new Date()); //object console.log(typeof new Object); //object console.log(typeof function(){});

Javascript类型系统之String字符串类型详解

javascript没有表示单个字符的字符型,只有字符串String类型,字符型相当于仅包含一个字符的字符串 字符串String是javascript基本数据类型,同时javascript也支持String对象,它是一个原始值的包装对象.在需要时,javascript会自动在原始形式和对象形式之间转换.本文将介绍字符串String原始类型及String包装对象 定义 字符串String类型是由引号括起来的一组由16位Unicode字符组成的字符序列 字符串类型常被用于表示文本数据,此时字符串中的

javascript类型系统_正则表达式RegExp类型详解

前面的话 前面已经介绍过javascript中正则表达式的基础语法.javascript的RegExp类表示正则表达式,String和RegExp都定义了方法,使用正则表达式可以进行强大的模式匹配和文本检索与替换.本文将介绍正则表达式的RegExp对象,以及正则表达式涉及 到的属性和方法 对象 javascript中的正则表达式用RegExp对象表示,有两种写法:一种是字面量写法:另一种是构造函数写法 Perl写法 正则表达式字面量写法,又叫Perl写法,因为javascript的正则表达式特性

JavaScript中push(),join() 函数 实例详解

定义和用法 push方法 可向数组的末尾添加一个或多个元素,并返回一个新的长度. join方法 用于把数组中所有元素添加到一个指定的字符串,元素是通过指定的分隔符进行分割的. 语法 arrayObject.push(newelement1,newelement2,....,newelementX) arrayObject.join(separator). 参数描述newelement1必需.要添加到数组的第一个元素.newelement2可选.要添加到数组的第二个元素.newelementX可选

JavaScript类型系统之布尔Boolean类型详解

前面的话 布尔值Boolean类型可能是三种包装对象Number.String和Boolean中最简单的一种.Number和String对象拥有大量的实例属性和方法,Boolean却很少.从某种意义上说,为计算机设计程序就是与布尔值打交道,作为最基本的事实,所有的电子电路只能识别和使用布尔数据.本文将介绍布尔Boolean类型 定义 布尔Boolean类型表示逻辑实体,它只有两个值,保留字true和false,分别代表真和假这两个状态 Boolean包装类型是与布尔值对应的引用类型,在布尔表达式

Javascript的无new构建实例详解

看jquery源代码第一步的时候,对于jquery对象的创建就看的云里雾里,琢磨半天终于有点感觉了,在此记录下 第一种方式: var A = function(){ return A.prototype.init(); } A.prototype = { init:function(){ this.age = 50; console.log(this); return this; }, age:100 } console.log(A() === new A()); 1.分析下结果为什么为true

JavaScript原型及原型链终极详解

JavaScript原型及原型链终极详解 一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object,Function 是JS自带的函数对象.下面举例说明 function f1(){}; var f2 = function(){}; var f3 = new Function('str','console.log(str)'); var o3 = new f1(); var o1 = {}; var o2 =new Object()

JavaScript实现各种排序的代码详解

冒泡排序 function Bubble(arr){ var temp; for(var i=0;i<arr.length-1;i++){ for(var j=i+1;j<arr.length;j++){ if(arr[i]>arr[j]){ temp=arr[i]; arr[i]=arr[j]; arr[j]=temp; } } } return arr; } console.log(Bubble([2,5,1,0,6,2])) //[0,1,2,2,5,6] 选择排序 functio

关于javascript的一些知识以及循环详解

javascript的一些知识点: 1.常用的五大浏览器:chrome,firefox,Safari,ie,opera 2.浏览器是如何工作的简化版: 3.Js由ECMAjavascript;DOM;BOM组成: 4.js是弱类型语言(即需要游览器解析了才知道是什么类型的): 5.js是脚本语言(边解析边执行): 6.script也分行内样式,嵌套样式和外联样式. 外联样式一般写在body的最后,因为放在前面会先加载js代码然后再干其他的,影响用户体验. 7.同步和异步 同步:一行一行依次执行.