在前端开发中，调试代码是一项必不可少的技能。其中，console.log() 是最常用的调试工具之一。然而，在大型项目中，如果没有良好的调试代码习惯，使用 console.log() 可能会变得非常混乱和难以管理。
本文将介绍如何在使用 console.log() 的时候，通过适当的包装和正确地使用行数，使调试代码更加清晰和易于管理。同时提供示例代码，希望对开发者们有所帮助。
利用行数进行层级打印
首先，我们需要明确 console.log() 函数默认只会输出一行文本。但是，我们可以使用特殊字符 \n 来输出多行文本。这就给我们提供了一个利用行数来进行层级打印的思路。
例如，在以下示例中，我们使用两个 console.log() 函数来打印出两行文本：
console.log('第一行');
console.log('第二行');输出结果为：
第一行 第二行
现在，我们将其修改为使用一个 console.log() 并加上 \n 特殊字符来进行换行：
console.log('第一行\n第二行');输出结果同样为：
第一行 第二行
这样的话，我们就可以在一个 console.log() 函数中打印多行文本。这非常有用，尤其是在需要打印嵌套对象或数组时。
例如，在以下示例中，我们使用两个 console.log() 函数来打印出一个嵌套的对象：
-- -------------------- ---- -------
----- --- - -
-- -
-- -
-- -------
-
-
--
---------------------
-----------------输出结果为：
嵌套对象:
{
a: {
b: {
c: 'hello'
}
}
}现在，我们将其修改为使用一个 console.log() 并加上 \n 特殊字符来进行换行：
-- -------------------- ---- -------
----- --- - -
-- -
-- -
-- -------
-
-
--
---------------------- -----输出结果同样为：
嵌套对象:
{
a: {
b: {
c: 'hello'
}
}
}使用行数进行层级打印能够让我们更加清晰地看到嵌套对象或数组的结构。
利用函数名和调用者进行追踪
另外一个非常有用的技巧是利用函数名和调用者来追踪代码执行过程。这对于大型项目中的调试来说非常重要。
例如，在以下示例中，我们定义了两个函数，并从第二个函数中调用了第一个函数：
-- -------------------- ---- ------- -------- ----- - --------------- --- ----- - -------- ----- - --------------- --- ----- ------ - ------
输出结果为：
这是 bar 函数 这是 foo 函数
现在，我们将其修改为在每个 console.log() 输出中加上函数名和调用者的信息：
-- -------------------- ---- ------- -------- ----- - ------------------- -- --- ----- - -------- ----- - ------------------- -- --- ----- ------ - ---------------------- ------ ----------------------
输出结果为：
调用栈开始： bar(): 这是 bar 函数 foo(): 这是 foo 函数 调用栈结束。
使用函数名和调用者的信息能够让我们更加清晰地看到代码执行过程，并且能够
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12449