调试 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() 办法也差不多，然而新块是折叠的，须要单击显示按钮能力读取它。