关于性能测试:控制台提升性能测试

调试 JavaScript 代码的最简略路径就是简略地通过 console.log 办法输入后果。尽管它能用，但这并不是最现实的解决形式。如果有更好的办法，何不摸索一番呢？

巧用控制台，晋升 JavaScript 调试性能，晋升页游体验

“来自控制台的 Hello”

console 对象提供对浏览器调试控制台的拜访。仅当在浏览器上运行 JavaScript 代码（即客户端代码而非服务端代码）时，才能够应用 console 对象。不同浏览器的工作形式各不相同，然而通常都会提供一组惯例性能。调试语句最棒的一点是它们兼容所有库和框架，因为它们是在外围语言中编写的。

console.log 的最根本应用场景是显示代码的输入。思考以下代码：

function sayHello(name) {console.log(name)
}

sayHello('Indrek')

它记录传递给 sayHello 函数的名称。

巧用控制台，晋升 JavaScript 调试性能

“输入传递给函数的名称”

如果咱们想晓得必须调用 sayHello 函数多少次，该怎么办？有一个简略的办法，称为 console.count()。

console.count

count() 会输入应用该标签调用它的次数。如果没有参数，则 count() 的行为就像应用默认标签调用一样。

function sayHello(name) {console.count()
  console.log(name)
}

sayHello("Indrek")
sayHello("William")
sayHello("Kelly") 

下面的代码记录以下内容：

巧用控制台，晋升 JavaScript 调试性能
统计咱们调用 sayHello 函数的次数

这样能够统计出调用函数的次数，但如果要统计调用雷同名称函数的次数怎么办？一种办法是简略地将 name 参数传递给 count 办法。

function sayHello(name) {console.count(name)
}

sayHello("Indrek")
sayHello("William")
sayHello("Kelly")
sayHello("Indrek")

搞定！该函数跟踪咱们用每个名称调用这个函数的次数。

巧用控制台，晋升 JavaScript 调试性能
统计咱们说每个名字的次数

console.warn

以下办法将正告音讯输入到控制台，在应用开发人员工具或 API 时十分有用。console.warn 是一种现实抉择，用来让用户晓得某些事件不对劲，例如省略参数或让开发人员晓得 API/ 软件包版本已过期。

function sayHello(name) {if(!name) {console.warn("No name given")
  }
}

sayHello()

下面的代码查看 name 参数是否传递给函数。如果未输出任何名称，则会记录一条正告音讯，提醒其思考某些事项。

巧用控制台，晋升 JavaScript 调试性能
未传递名称时，向用户显示正告音讯

console.table

如果咱们要解决数组或对象，则在显示数据时 console.table 很有用。数组中的每个元素将是表中的一行。以上面的示例为例，其中有一系列水果组成的数组。如果将 fruits 数组传递给 console.table 办法，则应该看到一个打印到控制台的表。

const fruits = ["kiwi", "banana", "strawberry"]

console.table(fruits)

而且如果咱们看一眼控制台，应该看到一个形容数组的表。

巧用控制台，晋升 JavaScript 调试性能
以表格模式显示数组

你能够设想一下，当咱们解决具备数百个（甚至数千个）值的更大数组，这种办法会十分有用。这里有一个例子来阐明问题，其中数组有更多的值。

const fruits = [
  "Apple",
  "Watermelon",
  "Orange",
  "Pear",
  "Cherry",
  "Strawberry",
  "Nectarine",
  "Grape",
  "Mango",
  "Blueberry",
  "Pomegranate",
  "Carambola",
  "Plum",
  "Banana",
  "Raspberry",
  "Mandarin",
  "Jackfruit",
  "Papaya",
  "Kiwi",
  "Pineapple",
  "Lime",
  "Lemon",
  "Apricot",
  "Grapefruit",
  "Melon",
  "Coconut",
  "Avocado",
  "Peach"
];

console.table(fruits);

而且如果咱们用数组调用 console.table，咱们应该看到下表。

巧用控制台，晋升 JavaScript 调试性能
在表格中显示所有水果

应用数组很简略。如果咱们要解决的是对象呢？

const pets = {
  name: "Simon",
  type: "cat"
};

console.table(pets);

该表没有像之前那样登记值，而是显示值以及键和值。如果咱们还有一个对象并尝试将其列出，该怎么办？

const pets = {
  name: "Simon",
  type: "cat"
};

const person = {
  firstName: "Indrek",
  lastName: "Lasn"
}

console.table(pets, person);

不出所料，两个独自的对象显示在两个不同的表中。

巧用控制台，晋升 JavaScript 调试性能

留神，当初咱们有了一个对象而不是一个数组。该对象领有两个键：宠物的 name 和 type。

巧用控制台，晋升 JavaScript 调试性能

该表没有像之前那样登记值，而是显示值以及键和值。如果咱们还有一个对象并尝试将其列出，该怎么办？

const pets = {
  name: "Simon",
  type: "cat"
};

const person = {
  firstName: "Indrek",
  lastName: "Lasn"
}

console.table(pets, person);

不出所料，两个独自的对象显示在两个不同的表中。

巧用控制台，晋升 JavaScript 调试性能

两个对象

如果咱们想将它们配对在一个表中，则将对象包装在数组中。

const pets = {
  name: "Simon",
  type: "cat"
};

const person = {
  firstName: "Indrek",
  lastName: "Lasn"
}

console.table([pets, person]);

当初咱们将对象分组到一个表中。

巧用控制台，晋升 JavaScript 调试性能 - 鸿蒙 HarmonyOS 技术社区

通过将对象包装在数组中进行分组

console.group

在应用汇合或链接数据时，请应用嵌套组来直观地关联相干音讯，从而让输入东倒西歪。要创立一个新的嵌套块，请调用 console.group()。

console.log("This is the first level");
console.group();
console.log("Level 2");
console.group();
console.log("Level 3");
console.warn("More of level 3");
console.groupEnd();
console.log("Back to level 2");
console.groupEnd();
console.log("Back to the first level");

以下代码显示嵌套的块级控制台语句——在解决基于关系的数据时很有用。

巧用控制台，晋升 JavaScript 调试性能

console.groupCollapsed() 办法也差不多，然而新块是折叠的，须要单击显示按钮能力读取它。