淘先锋技术网

首页 1 2 3 4 5 6 7

一、理解 console

JavaScript 控制台(console)是一个开发人员在编写 JavaScript 代码时常用的工具。它是浏览器提供的一种界面,让开发人员能够追踪代码执行的状态和结果。JavaScript 控制台可以记录代码输出的信息、警告和错误,并帮助开发人员进行调试和修复问题。

在浏览器中,可以通过按 F12 键打开开发者工具,选择控制台(Console)选项来打开 JavaScript 控制台。在控制台中,可以输入和执行 JavaScript 代码,并查看代码输出的结果。控制台还提供了许多有用的辅助工具,如检查 DOM 元素、监视网络请求、性能分析等。

二、JavaScript控制台常用方法

console
序号用法用法描述DEMO
1

console.assert(condition, message)

断言

// condition:需要验证的条件。
// message:当条件为 false 时输出的错误信息(可选参数)。

如果条件为 true,不会有任何输出。如果条件为 false,将会在控制台输出指定的错误信息。

function multiply(a, b) {
  console.assert(typeof a === "number", "a必须是一个数字");
  console.assert(typeof b === "number", "b必须是一个数字");
  return a * b;
}

console.log(multiply(2, 3)); // 输出 6
console.log(multiply(2, "not a number")); // 不会执行,因为第一个assertion会失败
 

2

console.clear()

清除控制台

清除当前控制台的所有输出,将光标回置到第一行

console.clear()
3

console.count()

记录代码执行的次数

可以使用console.count()方法来记录代码执行的次数。

每次调用函数时,控制台都会输出该函数被调用的次数。

function myFunction() {
  console.count("myFunction被调用的次数:");
  // 函数代码
}

myFunction(); // 控制台输出 myFunction被调用的次数:1
myFunction(); // 控制台输出 myFunction被调用的次数:2
myFunction(); // 控制台输出 myFunction被调用的次数:3
 

4

console.countReset()

计数器重置

console.count('apple');
console.count('banana');
console.count('apple');
console.countReset('apple');
console.count('apple');

第一次调用 console.count('apple') 时,输出 'apple: 1',计数器值为 1。

第二次调用 console.count('banana') 时,输出 'banana: 1',计数器值为 1。

第三次调用 console.count('apple') 时,输出 'apple: 2',计数器值为 2。

接着调用 console.countReset('apple'),将计数器值重置为 0。

最后再次调用 console.count('apple') 时,输出 'apple: 1',计数器值为 1。

5

console.debug

调试

console.debug()方法可以用来输出调试信息,常常用于开发和调试过程中。

使用时候控制台这里需要全部选中

var a = 5;
var b = 7;
console.debug("a的值为:" + a + ",b的值为:" + b);

6

console.dir()

显示对象的属性和方法

使用console.dir()方法来显示对象的属性和方法

console.dir(document.body)
7console.dirxml()console.dirxml() 可以将一个 DOM 节点(或者其他可解析为 DOM 节点的对象)以 XML 格式输出到控制台。该方法常用于调试 HTML、CSS 等前端代码。

const fruits = [
  { name: "apple", color: "red" },
  { name: "banana", color: "yellow" },
  { name: "orange", color: "orange" }
];

console.dirxml(fruits);

8

console.error()

输出错误

输出信息时,在最前面加一个红色的叉,表示出错,同时会显示错误发生的堆栈console.error('error')
9console.exception()

console.exception()方法是console.error()方法的别名,用来输出错误信息

不推荐
10console.event()

没有这个方法,偶然看到这么个东西,光看名字很迷惑,经过调研,确认没有这个方法。

console.event() 不是 JavaScript 标准库中的方法,也不是浏览器或库定义的方法。

在目前的 JavaScript 标准库中,并不存在 console.event() 方法。

11console.group()用于将显示的信息分组,可以把信息进行折叠和展开

console.group("外层分组"); // 开始外层分组
console.log("外层分组的内容");

console.group("内层分组"); // 开始内层分组
console.log("内层分组的内容");
console.groupEnd(); // 结束内层分组

console.groupEnd(); // 结束外层分组

12console.groupCollapsed()与console.group方法很类似,唯一的区别是该组的内容,在第一次显示时是收起的(collapsed),而不是展开的。
13console.groupEnd()结束内联分组
14console.info()console.log 别名,输出信息console.info("Hello world!")
15

console.log()

打印消息

使用console.log()方法打印消息到控制台

console.log("Hello world!")
16console.memory()

查看内存

这是一个属性,并不是是函数,此属性是用来查看内存使用情况,如果我们使用过多的console.log()会占用大量的内存,导致浏览器出现卡死情况。

console.memory()
17console.markTimeline()console.markTimeline() 可以帮助我们记录代码执行中的重要事件,并在时间轴上进行标记,便于调试、分析和优化程序性能。
18console.profile()console.profile() 可以很方便地对程序性能进行分析,并提供了丰富的性能数据,便于优化程序性能。

function heavyCalculation(n) {
  let sum = 0;
  for (let i = 0; i < n ; i++) {
    sum += i;
  }
  return sum;
}

function main() {
  console.profile("Calculation Profile");
  for (let i = 1000000; i <= 10000000; i += 1000000) {
    console.log(heavyCalculation(i));
  }
  console.profileEnd();
}

main();

19console.profileEnd()性能分析结束
20

console.table()

将数据以表格显示

console.table()会将数组中的对象转换为一个表格,并将表头设置为对象的键。这使得我们可以更容易地查看和比较数组中的对象。

const fruits = [
  { name: "apple", color: "red", price: 1 },
  { name: "banana", color: "yellow", price: 0.5 },
  { name: "grape", color: "purple", price: 2 }
];

console.table(fruits);

21console.time()

计时开始

使用console.time()和console.timeEnd()方法来在控制台中执行代码并计算运行时间。

console.clear();
console.time("myTimer");
for (var i = 0; i < 1000000; i++) {
    // do something
}
console.timeEnd("myTimer");
 
22console.timeEnd()

计时结束

使用console.time()和console.timeEnd()方法来在控制台中执行代码并计算运行时间。

23

console.trace()

查看堆栈跟踪

console.trace()用于打印出当前函数调用栈的详细信息。
它会输出当前代码执行过程中的函数调用关系,以及函数名和代码所在的文件和行号。
这对于调试程序中的错误非常有用,因为它可以告诉开发者在哪里出了问题,并提供了更多的上下文信息来帮助解决问题。
console.trace()可以在任何浏览器的控制台中使用,在Node.js中也可以使用。

function funcOne() {
  console.log("Inside funcOne()");
  funcTwo();
}

function funcTwo() {
  console.log("Inside funcTwo()");
  funcThree();
}

function funcThree() {
  console.log("Inside funcThree()");
  console.trace();
}

funcOne();

24

console.warn()

输出警告

输出警告

console.warn('warn')

三、欢迎交流指正

参考链接

JavaScript Console 对象 | 菜鸟教程