Console 3000字完整指南,让你不只会用console.log !

本文涉及的产品
日志服务 SLS,月写入数据量 50GB 1个月
简介: Console 3000字完整指南,让你不只会用console.log !

创作不易,求一个免费的赞,谢谢啦 !!!

image.png

前言

为啥会突然想起写一篇关于console的文章?笔者接触JS也不少时间了,除了用vscode的debuger,其实大部分时间都在使用console.log()方法来输出一些或者调试程序,我相信很多刚开始接触JS的同志,应该也都习惯使用console.log()。但是log的能力是有限的,并不能满足所有的场景。比如我们相用表格数据对象。

下面这张图,纯粹是看了扫黑风暴想到的!!!

image.png

console.log()

大家最常用的应该就是这个属性了,不过你有没有使用这个方法输出console对象。

console.log(console)

image.png

语法

console.log(常见JS数据)

console.log(123)
>> 123

console.log( %s %d %f %o 等占位符写法(类似C的print))

console.log('我是 %s','前端picker')
>> 我是 前端picker

console.log(ES6 模板字符串)

const nickName = "前端picker"
console.log(`我是 ${nickName}``)
>> 我是 前端picker

数组/对象会显示在一行

console.log({object: 'object'}, {object: 'object'});
console.log(['array', 'array'], ['array', 'array']);

image.png

CSS样式美化输出

在上面我们介绍了占位符输出,其实还有占位符%c,可以用来接收css样式。

console.log('我是红色 %c 文字', 'color: red;');

image.png

每个%c只负责它之后的文字,知道遇到下一个%c;

console.log('This is %cred text %c 我没颜色 %c 我是绿色.', 'color: red;', '', 'color: green;');

image.png

当然你也可以选择把样式定义成变量。

let style="background: white;border: 3px solid red;color: red;font-size: 50px;margin: 40px;padding: 20px;"
undefined
console.log('%c我是log!', style);

image.png

console.clear()

大部分的浏览器在开发者工具都内置了清除控制条的方法。

image.png

其实console对象也提供了clear方法来清空控制台。

当你执行console.clear()之后

image.png

cosole.debug()

输出“调试”级别的消息,并且在浏览器中只有你配置了debug才可以显示。

例如在火狐浏览器中:

当你没有勾选调试的时候:是无法显示debug的信息的。

只有你勾选调试的时候,才会显示。

image.png

error()

向 Web 控制台输出一条错误消息,并且只有才浏览器配置了errors才可以显示。

下图是在火狐浏览器的效果

下图是在chrome的效果

image.png

两个浏览器都会在error的前面加上一个小图标。

info()

向web控制台输出一个通知信息,并且只有在浏览器配置info可见的时可以显示。

下图是在火狐浏览器的效果

image.png

下图是在chrome的效果

image.png

在火狐浏览器中会在前面加上小图标,而chrome没有

warn()

向 Web 控制台输出一条警告信息,并且只有在浏览器配置warning可见的时可以显示。

下图是在火狐浏览器的效果

image.png

下图是在chrome的效果

image.png

两个浏览器都会在warn的前面加上一个小图标。

console.count()

输出 count() 被调用的次数。此函数接受一个可选参数 label,如果你不设置参数的话,这个参数默认名叫**“default”**。

image.png

用来统计

console.count('我是');
console.count('前端picker');
console.count('我是');
console.count('前端picker');
console.count('我是');
console.count('前端picker');

通过下图可以看到,针对不同的参数,count()是分别累计的。

image.png

console.countReset()

用来重启计数器的.同样也接收一个label参数,

image.png

如果提供了参数label,此函数会重置与label关联的计数。

如果省略了参数label,此函数会重置默认的default计数器。

image.png

console.dir()

在控制台中显示指定JavaScript对象的属性,并通过类似文件树样式的交互列表显示。

也就是语法是:

console.dir(object)
const auther = {
  name: '前端picker',
  age: '18',
};
console.log(auther);
console.dir(auther);

在chrome浏览器中,是支持这个属性的,下图可以看出与log的不同

image.png

但是在火狐浏览器中,log和dir的输出一致,不同的是火狐会默认展开dir的结果。

image.png

当然log和dir在输出dom结构的时候是完全不同的。不过这个我们放在dirxml方法中学习。

console.dirxml()

显示一个明确的XML/HTML元素的包括所有后代元素的交互树。 如果无法作为一个element被显示,那么会以JavaScript对象的形式作为替代。 它的输出是一个继承的扩展的节点列表,可以让你看到子节点的内容。

同时也支持object。

image.png

在dir中我们把DOM留到了这里。

创建一个DOM对象

var childNode = document.createElement('p');
childNode.innerHTML = '<span>这里是提示信息〜〜</span>';

使用log/dir/dirxml输出

log

image.png

dir

image.png

dirxml

image.png

可以看出log和dirxml的输出效果是一致的,是以DOM的形式输出的,dir则输出的是属性的值。

group()、groupCollapsed() 和 groupEnd()

将不同的控制台输出组合在一起以显示它们之间的一种关系形式。通常是组合在一起使用的。

group接收一个参数,表示组名,如果不设置的话,在不同的浏览器表现不一致,浏览器默认展开组。

groupCollapsed()与group的不同在于groupCollapsed会自动折叠组。

groupEnd()表示组的结束。

group+groupEnd

console.group();
console.log('name:');
console.log('前端picker');
console.groupEnd();
console.group('参数');
console.log('age');
console.log('18');
console.groupEnd();
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

下面是chrome的效果。不设置组名的话,默认是console.group,同时一组的输出会缩进。

image.png

下面是火狐的效果不设置组名的话,默认是<无组标签>

image.png

groupCollapsed+grounEnd

console.groupCollapsed();
console.log('name:');
console.log('前端picker');
console.groupEnd();
console.group('参数');
console.log('age');
console.log('18');
console.groupEnd('参数');

image.png

嵌套

console.group('下面是作者信息');
console.log('第1项');
console.group('name');
console.log('前端picker');
console.groupEnd();
console.log('第2项');
console.group('age');
console.log('18');
console.groupEnd();
console.groupEnd();

image.png

CSS样式美化-%c

console.group('%c下面是作者信息','color:red;');
console.log('第1项');
console.group('name');
console.log('前端picker');
console.groupEnd();
console.log('第2项');
console.group('age');
console.log('18');
console.groupEnd();
console.groupEnd();

image.png

console.table()

这个方法需要一个必须参数,参数 必须是一个数组或者是一个对象;还可以使用一个可选参数 columns。

它会参数以表格的形式打印出来。数组中的每一个元素(或对象中可枚举的属性)将会以行的形式显示在表格中。

表格的第一列是 index。如果数据 data 是一个数组,那么这一列的单元格的值就是数组的索引。 如果数据是一个对象。

数组

let ary = [
  '1',
  '2',
  '3'
];
console.table(ary);

image.png

object对象

let obj = {
  name: '前端picker',
  age: '18',
};
console.table(obj);

image.png

对象数组

let aryOfObjects = [
  {
    name: '张三',
    age: '12',
  },
  {
    name: '李四',
    age: '18',
  },
  {
    name: '王五',
    age: '19',
  }
];
console.table(aryOfObjects);

如图所示,table()为我们提供了一个很好的对象布局,其中重复键作为列标签。,每个对象中的所有键都将表示为一列,无论其他对象中是否有对应的键与数据。如果对象没有键列的数据,则它显示为空。

image.png

数组数组

let aryOfArray = [
[1,2,3],[3,4,5],[6,7,8]
];
console.table(aryOfArray);

数组数组类似于对象数组。它使用内部数组的索引作为列标签,而不是作为列标签的键。因此,如果一个数组的项目数比其他数组多,那么这些列的表中将有空白项目。就像对象数组一样。

image.png

对象数组数组

let aryOfArraysWithObject = [
  ['1', '2',  {
    name: '张三',
    age: '12',
  },],
  ['3', '4',  {
    name: '李四',
    age: '18',
  },}],
  ['5', '6',  {
    name: '王五',
    age: '19',
  }]
];
console.table(aryOfArraysWithObject);

在Chrome中,要查看第三列中这些对象中包含的内容,是无法展开的,也就是无法查看。。

image.png

不过在火狐浏览器中,会自动展开,可以清除的看到结果

image.png

time()、timeLog() 和 timeEnd()

time()

你可以启动一个计时器来跟踪某一个操作的占用时长。每一个计时器必须拥有唯一的名字,页面中最多能同时运行10,000个计时器。当以此计时器名字为参数调用 console.timeEnd() 时,浏览器将以毫秒为单位,输出对应计时器所经过的时间。

console.time(计时器名称)

timeEnd()

停止一个通过 console.time() 启动的计时器,并并输出结束的时间

console.timeEnd(计时器名称)

timeLog()

在控制台输出计时器的值,该计时器必须已经通过 console.time() 启动。

console.timeLog()(计时器名称)

使用

console.time('this is a timer');
console.timeLog('this is a timer');
console.timeEnd('this is a timer');

image.png

计算for的时间

console.time('this is a timer');
for(let  i=0; i<10000000;i++){
}
console.timeLog('this is a timer');
console.timeEnd('this is a timer');

image.png

console.assert()

console.assert()命令类似于前面提到的错误命令。不同之处在于断言允许使用布尔条件来确定是否应该将文本输出到控制台。

例如:你想测试一个变量的值,并且这个值不等于’前端picker’,

如果变量低于该数字并且条件解析为 true,则 assert 命令不执行任何操作。如果条件解析为 false,则显示输出文本。通过这种方式,你就不需要通过if判断是不是需要输出之后,再使用console.error()输出。

let name = '张三';
console.assert(name === '前端picker', '不是是前端picker,无法输出');
let name1 = '前端picker';
console.assert(name1 === '前端picker', '不是前端picker------1,可以输出');

在Chrome中, 还可以输出显示断言来自何处。

let value = 2;
function chackValue() {
    chackValue3();
}
function chackValue2() {
    chackValue3();
}
function chackValue3() {
  console.assert(value < 1, 'This was false.');
}
chackValue();

为了方便看,我们使用vscode标注了行数。

image.png

通过下图可以看出,Chrome告诉我们断言在9行。

console.trace

调用堆栈

在学习trace之前我们先来学习什么是调用堆栈!!!

有这样四个函数 function1调用function2 ,function2调用function3,function3调用function4

看这张图,这几个函数呈现出堆栈的特征。最后被调用的函数出现在最上方。因此称呼这种关系为调用堆栈(call stack)。

image.png

trace可以干啥

用来记录 JavaScript 堆栈跟踪,同时我们还还可以添加参数,用来表示当前跟踪的名册灰姑娘。

function f1(){
     console.log('f1')
     f2()
}
function f2(){
     console.log('f2')
     f3()
}
function f3(){
     console.log('f3')
     f4()
}
function f4(){
     console.log('f4')
     console.trace("f4的追踪记录");
}

从图中我们可以看到:触发 console.trace 之前调用的最后一个函数是f4。所以这将是调用堆栈的顶部。然后一次是f3,f2 ,f1

image.png


相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
相关文章
IDEA--Grep Console-日志管理神器
IDEA--Grep Console-日志管理神器
339 0
|
4月前
|
监控 程序员 数据库
分享一个 .NET Core Console 项目中应用 NLog 写日志的详细例子
分享一个 .NET Core Console 项目中应用 NLog 写日志的详细例子
|
JavaScript
Vue配置自动隐藏console打印日志
vue项目中,自动把console.log()打印日志隐藏
1700 41
|
前端开发
还在console.log一把梭吗?console还有其他骚操作
相信很多童鞋在开发中都是使用console.log()进行调试,本篇文章介绍一下console对象中的一些其他方法,这里并不是常用的方法。
159 0
还在console.log一把梭吗?console还有其他骚操作
|
Web App开发 前端开发 API
Chrome操作指南——入门篇(七)console中的await和log
Chrome操作指南——入门篇(七)console中的await和log
Chrome操作指南——入门篇(七)console中的await和log
|
Web App开发
chrome调试11-在console中调试日志
chrome调试11-在console中调试日志
107 0
chrome调试11-在console中调试日志
|
Web App开发 开发工具 Android开发
Flutter Web:运行后console中不停的打印debug日志
我们用android studio直接运行flutter web项目,会启动chrome来执行,这时候如果我打开开发者工具(右键-》检查),就会发现非常卡 (前提是用Html Render来渲染,用CanvasKit好像就没问题) 在console上边的操作栏上可以看到一个数字在不停的增长,这是因为console默认不显示debug日志,所以这些日志回以计数的形式显示。我们在操作栏的level中将debug选中,就会看到debug日志了。
790 0
|
Web App开发 JavaScript 前端开发
[console,log,添加1,参数,定义]javascript:数组详细操作方法及解析合集(9改变8不变12遍历)
  改变原数组的方法(9个):   1   2   3   4   5   let a=[1,2,3];   ES5:   a.pop()/ a.shift()/ a.push()/ a.unshift()/ a.reverse()/ a.splice()/ a.sort()
204 0
|
小程序 开发者
[console,log,时执行,页面节点树,组件实例]微信小程序中使用async/await语法的方法
  1、在微信小程序项目添加package.json文件或者直接npm init.   2.在package.json中添加regenerator包和版本   `"devDependencies": {   "regenerator":"0.13.3"}`   3.微信开发者工具-》工具-》npm构建
165 0
下一篇
DataWorks