===============

1 问题

Console是什么？

console是什么

Console 对象用于 JavaScript 调试。

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

console知识点

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

0f81c1c7-2a07-43af-8d3b-3623bde777dd.001.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' };

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

0f81c1c7-2a07-43af-8d3b-3623bde777dd.002.png

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

0f81c1c7-2a07-43af-8d3b-3623bde777dd.003.jpeg

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

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

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

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

0f81c1c7-2a07-43af-8d3b-3623bde777dd.004.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',

'获取用户信息失败');

0f81c1c7-2a07-43af-8d3b-3623bde777dd.005.jpeg

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

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

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

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

0f81c1c7-2a07-43af-8d3b-3623bde777dd.006.png

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

var dog = {};

dog.name = "大毛";

dog.color = "黄色";

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

0f81c1c7-2a07-43af-8d3b-3623bde777dd.007.png

06．console.dir()

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

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

0f81c1c7-2a07-43af-8d3b-3623bde777dd.008.jpeg 0f81c1c7-2a07-43af-8d3b-3623bde777dd.009.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(c);

0f81c1c7-2a07-43af-8d3b-3623bde777dd.010.jpeg

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

0f81c1c7-2a07-43af-8d3b-3623bde777dd.011.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();

0f81c1c7-2a07-43af-8d3b-3623bde777dd.012.jpeg

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

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

0f81c1c7-2a07-43af-8d3b-3623bde777dd.013.jpeg

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

0f81c1c7-2a07-43af-8d3b-3623bde777dd.014.jpeg

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

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

0f81c1c7-2a07-43af-8d3b-3623bde777dd.015.jpeg 0f81c1c7-2a07-43af-8d3b-3623bde777dd.016.jpeg

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

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

0f81c1c7-2a07-43af-8d3b-3623bde777dd.017.jpeg

我们在开发过程中，经常需要知道一个方法运行了多长时间，方便我们做出修改完善的判断，我们可以使用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");

0f81c1c7-2a07-43af-8d3b-3623bde777dd.018.jpeg 0f81c1c7-2a07-43af-8d3b-3623bde777dd.019.jpeg

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

0f81c1c7-2a07-43af-8d3b-3623bde777dd.020.jpeg

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

0f81c1c7-2a07-43af-8d3b-3623bde777dd.021.jpeg

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);

0f81c1c7-2a07-43af-8d3b-3623bde777dd.022.jpeg

16.console.table()

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

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

0f81c1c7-2a07-43af-8d3b-3623bde777dd.023.jpeg

17. console.clear()

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

0f81c1c7-2a07-43af-8d3b-3623bde777dd.024.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）利用控制台输出图片

0f81c1c7-2a07-43af-8d3b-3623bde777dd.025.png

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

0f81c1c7-2a07-43af-8d3b-3623bde777dd.026.png

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

0f81c1c7-2a07-43af-8d3b-3623bde777dd.027.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选项；

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

0f81c1c7-2a07-43af-8d3b-3623bde777dd.028.jpeg

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

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

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

0f81c1c7-2a07-43af-8d3b-3623bde777dd.029.jpeg 0f81c1c7-2a07-43af-8d3b-3623bde777dd.030.jpeg