编程语言
首页 > 编程语言> > JavaScript Console知识点

JavaScript Console知识点

作者：互联网

1 问题

Console是什么？

console是什么

Console 对象用于 JavaScript 调试。

JavaScript 原生中默认是没有 Console
对象,这是宿主对象（也就是游览器）提供的内置对象。 用于访问调试控制台,
在不同的浏览器里效果可能不同。

console知识点

控制台输入console，然后就可看到：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PbVTsyqq-1582111676747)(media/4b14bb4fa347ccd9351dde3b4f7d7ed7.png)]

01．基础用法——console.log()

打印一段文本

console.log(‘Is this working?’);

打印对象

const foo = { id: 1, verified: true, color: ‘green’ };

const bar = { id: 2, verified: false, color: ‘red’ };

接着我们看控制台的输出展现：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CKkGwdRD-1582111676750)(media/7ce9887a36bb51a8aca5b2f5d56bf502.png)]

从图中我们看出，无法看出对应的变量名；如果想让两个对象一起输出，我们可以使用console.log({
foo, bar
})，由于一行内容显示有限，对象内容部分进行了省略，我们必须点击左边的小箭头看更详细的内容，如下图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IMEiQAWM-1582111676751)(media/5d6c886e844d10f9076bf8552a9b5643.jpg)]

02. **console.info **用于输出提示性信息

03．console.error()用于输出错误信息

04.console.warn() 用于输出错误信息

一些特别的信息我们需要特别强调醒目的输出出来，比如警告和错误信息，你可以使用console.warn()
& console.error()，输出的展示形式如下图所示，是不是更醒目：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3og7iyK6-1582111676751)(media/a7799a9f8bf576f691ed3f3593c5a9d1.png)]

你还可以更进一步，自定义打印输出的样式，你可以使用**%c **语法。你可以使用这个方法更好的区分定义来源你的哪个API调用，用户事件，示例如下：

console.log(’%c Auth ',

‘color: white; background-color: #2274A5’,

‘登录验证通过’);

console.log(’%c GraphQL ',

‘color: white; background-color: #95B46A’,

‘获取用户信息’);

console.log(’%c Error ',

‘color: white; background-color: #D33F49’,

‘获取用户信息失败’);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4xjZljNR-1582111676752)(media/442348ae4a9900c7871386639d88159f.jpg)]

05.console.debug用于输出调试信息

console对象的上面5种方法，都可以使用printf风格的占位符。不过，占位符的种类比较少，只支持字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）四种。

console.log("%d年%d月%d日",2011,3,26);

console.log(“圆周率是%f”,3.1415926);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-100Y4XU7-1582111676753)(media/d630526068c31ec794e7c933564f0c6d.png)]

%o占位符，可以用来查看一个对象内部情况

var dog = {};

dog.name = “大毛”;

dog.color = “黄色”;

console.log("%o", dog);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q4rqcbrF-1582111676755)(media/8f6c567ecb27180fc497d9387acf4b37.png)]

06．console.dir()

console.dir()可以直观展示一个对象的所有属性和方法，示例代码如下：

(这个方法是我经常使用的 可不知道比for
in方便了多少)直接将该DOM结点以DOM树的结构进行输出，可以详细查对象的方法发展等等

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HK3bl3eh-1582111676756)(media/d00d1a6f8f8fbbaa2177fb2bf435137f.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ClAvlEV4-1582111676758)(media/899b44ac8891b025f53567c7c6b5893d.png)]

function cat(name, age, score){

this.name = name;

this.age = age;

this.score = score;

}

var c = new cat(“miao”, 2, [6,8,7]);

console.dir©;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H90lorCO-1582111676759)(media/bf00fa14d5140833ebbc8121142d5752.jpg)]

07．console.dirxml用来显示网页的某个节点（node）所包含的html/xml代码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-11Ff7TAV-1582111676759)(media/c3de77bd6faa313130fc7de992da9d27.png)]

08．console.group() 输出一组信息的开头

有时候，为了方便分析，你需要将一些对象变量等信息进行分组打印输出，示例如下：

console.group(‘User Details’);

console.log(‘name: John Doe’);

console.log(‘job: Software Developer’);

// Nested Group

console.group(‘Address’);

console.log(‘Street: 123 Townsend Street’);

console.log(‘City: San Francisco’);

console.log(‘State: CA’);

console.groupEnd();

console.groupEnd();

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MnWLvVRd-1582111676760)(media/71917829fc2e189cfc7a2dbe65058f3d.jpg)]

09.console.groupEnd结束一组输出信息

看你需求选择不同的输出方法来使用，如果上述四个方法再配合group和groupEnd方法来一起使用就可以输入各种各样的不同形式的输出信息。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UPtZw24Q-1582111676761)(media/97f1f48e60c2ffcde07f5482845d142a.jpg)]

10.console.assert对输入的表达式进行断言，只有表达式为false时，才输出相应的信息到控制台

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ILs8uwGw-1582111676762)(media/f1d6e01015008a196aa832b56c0c0646.jpg)]

11.console.count（这个方法非常实用哦）当你想统计代码被执行的次数

**假如你在写一个React应用，然后你想要知道某个组件渲染的次数，**你会怎么做？去查看源代码，然后一个一个数？这真的是太麻烦了。你可以用console.count(“Counter”)来查询渲染次数，我们还有一个相应的函数来清零计数器：console.countReset（‘Counter’）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AZBf2TJ4-1582111676763)(media/b528b4eda4460f2652dd3b4d880e5806.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6e8eOnqO-1582111676764)(media/aa5e8b9c809f9c13db271b643aafa497.jpg)]

12．console.time()，console.timeEnd 计时结束（看了下面的图你瞬间就感受到它的厉害了）

console.time()启动一个计时器，并用timeEnd()结束计时，**它们一般用于性能检查时。**你也可以将一个字符串传递给time和timeEnd，它将启动名称为该字符串的计时器。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-se9bsuaO-1582111676764)(media/d80000fc655aef2cc1e2195096222d79.jpg)]

我们在开发过程中，经常需要知道一个方法运行了多长时间，方便我们做出修改完善的判断，我们可以使用console.time()，示例如下：

let i = 0;

console.time(“While loop”);

while (i < 1000000) {

i++;

}

console.timeEnd(“While loop”);

console.time(“For loop”);

for (i = 0; i < 1000000; i++) {

// For Loop

}

console.timeEnd(“For loop”);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QMVvKTWp-1582111676765)(media/a9d4e3f58bb00f7cc502ba5b06ef0cab.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4qUQqKd2-1582111676766)(media/c4155355c8b571006603205aaf56d580.jpg)]

13.console.profile和console.profileEnd配合一起使用来查看CPU使用相关信息

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E8W3hWVS-1582111676767)(media/8e73b07928b86d526bde0c491980a3a9.jpg)]

在Profiles面板里面查看就可以看到cpu相关使用信息

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sKCzhkve-1582111676768)(media/b178eb41f4c86da9141f5ccf7e39ee72.jpg)]

14.console.timeLine和console.timeLineEnd配合一起记录一段时间轴

15．console.trace()

console.trace()方法用于显示当前执行的代码在堆栈中的调用路径。如下段代码所示，在控制台里清晰了展示了add()的调用轨迹

function add(a,b){

console.trace();

return a+b;

}

function add3(a,b){return add2(a,b);}

function add2(a,b){return add1(a,b);}

function add1(a,b){return add(a,b);}

var x = add3(1,1);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cWqjS6eA-1582111676768)(media/45e525557ca94a5c09c93ef081b29c7d.jpg)]

16.console.table()

它打印出一个可交互的表格，而您仅需传入一个对象数组。

为了增加输出的可读性，我们可以使用console.table()让其通过表格的形式进行展示，比如我们在控制台输出console.table({
foo, bar})，如下图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CFkX1WZb-1582111676769)(media/b1f95d4c2958597c387c7fd0513c0a4d.jpg)]

17. console.clear()

实现清空控制台信息。如下图所示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hQdpvCVH-1582111676770)(media/1b024db4062e3106c5e48c2a5797d5c2.png)]

现在假设一个场景，如果一个数组里面有成百上千的元素，但是你想知道每个元

使用Console有什么好处【优点】？

console和alert对比。

对比 console.log alert
是否能看到内部结构 console能看到结构话的东西，console能看到对象的内容。 弹出一个对象就是[object object],
是否打断页面 **不会打断你页面的操作，**输出内容后你页面还可以正常操作 弹出来内容，那么页面就死了
优点 方便你调式javascript用的。

3）使用Console有什么坏处【缺点】？

调用Console毕竟是调用了函数，多少会影响系统性能，所以在发布版本中尽量把Console注释掉。

利用一下函数可以分析具体调用多少时间。console.time来测试

console.time(‘console’);

console.log(‘test’);

console.timeEnd(‘console’);

Console使用场景？

Console 对象常见的两个用途：

（1）利用控制台输出图片

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jLogPDaa-1582111676771)(media/89036e472f4692bad2bfeb57e482ce6f.gif)]

（2）重写console.log 改变输出文字的样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hz1Z8HHc-1582111676771)(media/ebfbe4cf100764640f4cf97ac0d1c902.png)]

（3）指定输出文字的样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oAQn21yU-1582111676772)(media/3e769d35c92b445b2849775e114bc547.png)]

5）console.log()打印输出台不显示输出内容

浏览器console.log()打印输出台不显示输出内容的原因应该很多，如网络上所说：console.log()被重新定义等等原因（需要验证真实性？）都可能导致console.log()打印不能显示打印信息。

今天，在测试screen.availWidth的时候就出现了console.log()打印台始终无法打印出内容的局面。困惑了半天后，终于找到了具体的原因。并且看到这个原因的时候，真TM想给自己两耳光，或者直接来个冷水冲头，清醒清醒。

html/CSS/JavaScript代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset=“utf-8” />

<title>screen</title>

</head>

<body>

<script type=“text/javascript”>

alert(“123”);

console.log(“123”);

console.log("页面宽度为 "+screen.availWidth);

console.log("页面高度为 "+screen.availHeight);

</script>

</body>

</html>

遇到控制台console.log()无法打印的情况

1.首先应该排查default.levels。

我们首先应该排查default.levels。一般没有内容显示，就必须查看default.levels下的info是否勾选。实在不会，直接点击default.levels下的default选项；

这是比较常见原因和解决方案。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rFP8SFsA-1582111676773)(media/5f049fb83ebb77e21db03af5a8267f38.jpg)]

今天七仔在选定default的时候同样无法获得console.log()的打印内容，又是怎么一回事呢？

2.检查default.levels前面输入框中是否有填写内容

注意，一定要检查default.levels前面输入框中是否有填写内容，默认为Filter；七仔则是在Filter中填写了一串数字。Filter，单词意思，“过滤”“过滤器”……意思就是在控制台中查找自己需要的信息。**并且，filter中的内容，即便是在关闭浏览器的前提下，也不会消失。**大家一定要谨慎对待。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EeJm9Ftc-1582111676774)(media/6fcebb05bb0142b04860603cd5f0cc14.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A6UpZLgu-1582111676775)(media/9fceaec533ebde1202b06768bdf48521.jpg)]

johnforrest 发布了5 篇原创文章 · 获赞 4 · 访问量 2840 私信 关注

标签：知识点,源站,Console,img,JavaScript,外链,console,防盗链,图片
来源： https://blog.csdn.net/u011403688/article/details/104398819