调试JavaScript代码的方法千篇一律，但最优解是……

全文共2770字，预计学习时长5分钟

摄影师：Tracy Adams 图片来源：Unsplash

调试JavaScript代码的方法千篇一律，都是简单地通过 console.log方法输出结果。虽然有效，但不是最优方法。为什么不去探索更好的方法呢?

“Hello from the console”

console 对象提供浏览器调试控制台访问功能。只有在浏览器上运行JavaScript代码时，才可以使用console 对象，如客户端代码，而非服务器端代码。其工作原理因浏览器而异，但通常会提供一组实际特征。因为最佳的调试语句在核心语言中生成，所以可与所有库和框架一起工作。

显示输出代码是console.log的基础应用案例。代码如下:

function sayHello(name) {

console.log(name)

}

sayHello('Indrek')

该代码记录了传递给sayHello函数的name变量。

输出传递给函数的name变量

如果我们想知道调用sayHello函数的次数该怎么办呢? 有一个简单的方法，称为console.count()。

console.count

count()是输出调用次数的标签。如果没有参数，count()表现为默认标签。

function sayHello(name) {

console.count()

console.log(name)

}

sayHello("Indrek")

sayHello("William")

sayHello("Kelly")

上述代码记录了以下内容：

计算调用sayHello函数的次数

由此计算出调用函数的次数，但是如果想计算调用相同name变量的函数次数呢? 可以运用将name参数传递给count的方法。

function sayHello(name) {

console.count(name)

}

sayHello("Indrek")

sayHello("William")

sayHello("Kelly")

sayHello("Indrek")

就是这样！该函数可以跟踪调用每个函数的次数。

计算调用每个函数的次数

console.warn

以下为向控制台输出警告消息的方法。在使用开发工具或APIs时有效。console.warn是让用户了解错误信息的理想方法，如省略参数，或让开发者了解不宜使用API/package版本。

function

sayHello(name)

{

if(!name) {

console.warn("No name given")

}

}

sayHello()

以上代码用于检查name参数是否传递给函数。如果没有，则记录一条警告消息，提示用户注意。

无name参数传递时，向用户显示警告消息。

console.table

在显示数据时，console.table有助于处理数组或对象。数组中的每个元素显示在表中同一行。以如下水果数组为例。若使用console.table方法传递水果数组，则可在控制台打印出一张表格。

const fruits =

["kiwi",

"banana",

"strawberry"]

console.table(fruits)

在控制台中，数组以表格的形式显示。

以表格形式显示数组

由此可以想象，在处理拥有数百个值（而非数千个）的更大数组时，该方法十分有效。为了说明这一点，下例数组拥有更多的值。

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处理数组，则可见下表。

在表中显示所有水果

处理数组很简单。那么处理对象呢?

const

pets

= {

name: "Simon",

type: "cat"

};

console.table(pets);

注意，此案例为对象，而非数组。该对象包含两个关键词信息:宠物的name和type。

 

与之前显示值的表不同，该表显示值及关键词信息。如果需要对更多的对象进行列表化该怎么办呢?

const pets = {

name: "Simon",

type: "cat"

};

const person = {

firstName: "Indrek",

lastName: "Lasn"

}

console.table(pets, person);

正如所料，这两个单独的对象显示在两个不同的表中。

两个对象

如果要将它们组合到一个表中，则需要将其合并在一个数组中。

const pets = {

name: "Simon",

type: "cat"

};

const person = {

firstName: "Indrek",

lastName: "Lasn"

}

console.table([pets, person]);

现在我们将对象分组到一个表中。

 

通过将对象合并在数组中进行分组

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

以下代码显示嵌套的块级控制台语句——在处理关联数据时非常有用。

console.groupCollapsed()方法与此类似，但是新块是折叠的，需要单击扩展按钮才能读取。

留言 点赞 关注

我们一起分享AI学习与发展的干货
欢迎关注全平台AI垂类自媒体 “读芯术”

（添加小编微信：dxsxbb，加入读者圈，一起讨论最新鲜的人工智能科技哦～）