2022年02月03日发布javascript的console用法是什么意思

大家好，今日小科来聊聊一篇关于2022年02月03日整理发布：javascript的console用法是什么的文章，现在让我们往下看看吧！

javascript的控制台用法是：1。" Console.assert(表达式，对象[，对象.]”语法；2." console.count([label])"语法等等。

对于前端开发人员来说，当开发过程中需要监控某些表达式或变量的值时，使用调试器会过于繁琐，反而会将值输出到控制台进行调试。最常用的语句是console.log(表达式)。

但是，对于控制台对象作为全局对象，大多数人并没有完全理解。当然我也是，经过一番学习，现在对这个可以绕着控制台玩的JS对象有了一定的了解，想和大家分享一下。

Console对象除了console.log()还有很多其他方法，这是开发人员最常用的方法。灵活使用这些方法可以为开发过程增加很多便利。

console.assert(表达式，对象[，对象.])

接收至少两个参数。当第一个参数的值或返回值为假时，后续参数的值将在控制台上输出。例如：

console.assert(1==1，object)；//无输出，返回未定义

console.assert(1==2，object)；//输出object console . count([标签])

将次数输出到此行，可选参数标签可以在次数之前输出，例如：

(function(){ for(var I=0；i5；I){ 0

console . count(' count ')；

}

})();//count : 1//count : 2//count : 3//count : 4//count : 5 console . dir(对象)

以列表形式输出传入对象的属性，包括子对象的属性，例如：

var obj={

名称为： 'classicemi '，

学院： 'HUST '，

major : ' ei ' }；

console . dir(obj)；输出：

console.error(对象[，对象.])

用于输出错误信息，用法与普通console.log相同，只是输出内容会标记为错误样式，便于区分。输出：

console.group

这是一个有趣的方法，可以使控制台输出的语句生成不同层次的嵌套关系。每个console.group()都会添加一个嵌套级别，而console.groupEnd()方法可以用来减少嵌套级别。语言表达无力，看看代码：

Console.log('这是第一层')；

console . group()；

Console.log('这是第二层')；

Console.log('还是第二层')；

console . group()；

Console.log(“级别3”)；

console . GroupEnd()；

Console.log('返回到级别2 ')；

console . GroupEnd()；

Console.log('返回第一级')；产出：

与console.group()类似的方法是console.groupCollapsed()具有相同的功能，但不同的是嵌套的输出内容处于折叠状态。当有一大段输出内容时，使用这种方法可以使输出布局不太长。酒吧

console.info(对象[，对象.])

这个方法和前面提到的console.error一样，是用来输出信息的，没有什么特别的。

console . info(" info ')；//输出infoconsole.table()

传入的对象或数组可以以表格形式输出。与传统的树输出相比，这种输出方案更适合内部元素排列整齐的对象或数组，否则可能会有很多未定义的。

var obj=

{ foo: { name: 'foo', age: '33' }, bar: { name: 'bar', age: '45' }};var arr = [ ['foo', '33'], ['bar', '45']];console.table(obj);console.table(arr);

也可以

console.log(object[, object...])

这个不用多说，这个应该是开发者最常用的吧，也不知道是谁规定的。。。

console.log('log'); // 输出 log

console.profile([profileLabel])

这是个挺高大上的东西，可用于性能分析。在 JS 开发中，我们常常要评估段代码或是某个函数的性能。在函数中手动打印时间固然可以，但显得不够灵活而且有误差。借助控制台以及console.profile()方法我们可以很方便地监控运行性能。

例如下面这段代码：

function parent() { for (var i = 0; i < 10000; i ) { childA() }}function childA(j) { for (var i = 0; i < j; i ) {}}console.profile('性能分析');parent();console.profileEnd();

然后我们可以在 Profiles 面板下看到上述代码运行过程中的消耗时间。

页面加载过程的性能优化是前端开发的一个重要部分，使用控制台的 profiles 面板可以监控所有 JS 的运行情况使用方法就像录像机一样，控制台会把运行过程录制下来。如图，工具栏上有录制和停止按钮。

录制结果：

console.time(name)计时器，可以将成对的console.time()和console.timeEnd()之间代码的运行时间输出到控制台上，name参数可作为标签名。

console.time('计时器');for (var i = 0; i < 1000; i ) { for (var j = 0; j < 1000; j ) {}}console.timeEnd('计时器');

console.trace()

console.trace()用来追踪函数的调用过程。在大型项目尤其是框架开发中，函数的调用轨迹可以十分复杂，console.trace()方法可以将函数的被调用过程清楚地输出到控制台上。

function tracer(a) { console.trace(); return a;}function foo(a) { return bar(a);}function bar(a) { return tracer(a);}var a = foo('tracer');

输出：console.warn(object[, object...])

输出参数的内容，作为警告提示。

console.warn('warn'); // 输出 warn

占位符

console对象上的五个直接输出方法，console.log(),console.warn(),console.error(),console.exception()(等同于console.error())和console.info()，都可以使用占位符。支持的占位符有四种，分别是字符(%s)、整数(%d 或 %i)、浮点数(%f)和对象(%o)。

console.log('%s是%d年%d月%d日', '今天', 2014, 4, 15);console.log('圆周率是%f', 3.14159);var obj = { name: 'classicemi'}console.log('%o', obj);

还有一种特殊的标示符%c，对输出的文字可以附加特殊的样式，当进行大型项目开发的时候，代码中可能有很多其他开发者添加的控制台语句。开发者对自己的输出定制特别的样式就可以方便自己在眼花缭乱的输出结果中一眼看到自己需要的内容。想象力丰富的童鞋也可以做出有创意的输出信息，比如常见的招聘信息和个人介绍啥的。

输出结果：console.log('%cMy name is classicemi.', 'color: #fff; background: #f40; font-size: 24px;');

%c标示符可以用各种 CSS 语句来为输出添加样式，再随便举个栗子，background属性的url()中添加图片路径就可以实现图片的输出了，各位前端童鞋快施展你们的 CSS 神技来把控制台玩坏吧~~

网友补充：

1.console.debug() 用于输出输出debug的信息。

2.console.timeStamp() 用于标记运行时的timeline信息。

3.console.memory 用于显示此刻使用的内存信息（这是一个属性而不是方法）。

4.console.clear() 清空控制台的内容（当然你可以用快捷键ctrl L）。

5.$0 可以在控制台输出在Elements面板选中的页面元素。

6.$_ 表示上一次在控制台键入的命令，你也可以用快捷键“上方向键”来达到同样的效果。

7.$x 可以用xPath的语法来获取页面上的元素。

这篇好文章是转载于：知行礼动