JS console.log()提高工作效率的技巧

　　介绍

本篇文章给大家分享的是有关JS console.log()提高工作效率的技巧,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

我们知道console.log(消息)用法很简单,表示将参数消息打印到控制台上。

console.log(& # 39;前端小智& # 39;)
//前端小智

const myAge=28
console.log (myAge)//28

本文主要介绍5个有用的技巧,可帮助你在使用console.log()时提高工作效率。

<强> 1。打印全名变量

如果在控制台打印多个变量,是数量比较多的情况下,我们很难区别哪个变量对应哪个值。

函数之和(a, b) {
console.log (b),
返回a + b;
}

总和(1、2),
总和(4、5);

执行上述代码后,我们只会看到一系列数字

要表示值和变量之间关系,可以用花括号把变量包起来:{b}:

<强> 2。高级格式化

将某些东西打印到控制台最常见方法是简单地使用一个参数调用console.log ():

console.log(& # 39;前端小智& # 39;)//前端小智

有时我们可能想要一条包含多个变量的信息。幸运的是,console.log()可以使用% s, %我等说明符以sprintf()的方式格式化字符串。

const用户=& # 39;前端小智& # 39;;
const尝试=5;

console.log (& # 39; % s登录失败了%我次& # 39;,用户,尝试);
//前端小智登录失败了5次

%和%我被用户和尝试的值替换。说明符% s转换为字符串,而%我转换为数字。

以下是可用说明符的列表:

说明符作用% s元素转换为字符串% d或%我元素转换为整数% f元素转换为浮点数% o元素以最有效的格式显示% o元素以最有效的格式显示% c应用提供的css

<强> 3。具有样式的打印风格

浏览器控制台允许我们将样式应用于打印的消息,我们可以通过将% c说明符与相应的css样式一起使用来实现,如下所示:

console.log (& # 39; % c大消息# 39;,& # 39;字体大小:36 px;粗细:大胆# 39;);

说明符% c应用CSS样式& # 39;字体大小:36 px;粗细:大胆# 39;

<强> 4。交互展示

日志样式化依赖于主机的控制台实现。像Chrome和Firefox这样的浏览器提供对象和数组的交互展示,而节点控制台输出为文本。

来看看Chrome如何打印普通对象、数组和DOM树,可以通过展开和折叠与这些元素进行交互。

4.1对象

 const myObject={
　　名称:& # 39;约翰?给史密斯# 39;
　　专业:& # 39;代理# 39;
　　};
　　console.log (myObject);

可以展开和折叠对象属性列表,也可以看到对象的原型。

4.2数组

=常量字符(& # 39;neo # 39; & # 39;睡眠# 39;,& # 39;约翰给史密斯# 39;];

console.log(字符);
4.3 DOM树结构

我们可以直接与控制台中显示的DOM元素进行交互。

console.log (. getelementbyid(& # 39;根# 39;));

在Chrome控制台中,可以扩展DOM元素

4.4交互式嵌套里的消息

% o说明符(为值关联了正确的打印格式)可以在文本消息中插入数组,对象,DOM元素和常规文本,而不会失去交互性。

 const myObject={
　　名称:& # 39;约翰?给史密斯# 39;
　　专业:& # 39;代理# 39;
　　};
　　
　　console.log (& # 39; Neo,注意% o # 39;, myObject);

从控制台看,myObject数组不会转换为字符串,而是保持交互性。

<强> 5。在节点控制台中打印大对象

中节点的日志以纯文本形式输出。但是,节点中的console.log()不会显示具有深层嵌套的对象:第3级的对象显示为[对象]. 

 const myObject={
　　propA: {
　　propB: {
　　propC: {
　　propD: & # 39;你好# 39;
　　}
　　}
　　}
　　};
　　
　　console.log (myObject);

运行脚本时,propC的对象打印为【对象】:

JS console.log()提高工作效率的技巧

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

 const myObject={
　　propA: {
　　propB: {
　　propC: {
　　propD: & # 39;你好# 39;
　　}
　　}
　　}
　　};
　　
　　console.log (jsON。stringify (myObject, null, 2));

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

JS console.log()提高工作效率的技巧

JS console.log()提高工作效率的技巧