JavaScript-console：JavaScript控制台（Console）常用方法

àì夳堔傛蜴生んèń 2024-03-24 18:31 73阅读 0赞

#### 一、理解 console ####

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

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

#### 二、JavaScript控制台常用方法 ####

<table> 
 <thead> 
 <tr> 
 <th colspan="4" style="text-align:center;">console</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td style="text-align:center;width:49px;">序号</td> 
 <td style="width:255px;">用法</td> 
 <td style="width:236px;">用法描述</td> 
 <td style="width:291px;">DEMO</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;width:49px;">1</td> 
 <td style="width:255px;"> console.assert(condition, message) 断言 // condition：需要验证的条件。 // message：当条件为 false 时输出的错误信息（可选参数）。 </td> 
 <td style="width:236px;"> 如果条件为 true，不会有任何输出。如果条件为 false，将会在控制台输出指定的错误信息。 </td> 
 <td style="width:291px;"> function multiply(a, b) { &nbsp; console.assert(typeof a === "number", "a必须是一个数字"); &nbsp; console.assert(typeof b === "number", "b必须是一个数字"); &nbsp; return a * b; } console.log(multiply(2, 3)); // 输出 6 console.log(multiply(2, "not a number")); // 不会执行，因为第一个assertion会失败 &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="text-align:center;width:49px;">2</td> 
 <td style="width:255px;"> console.clear() 清除控制台 </td> 
 <td style="width:236px;"> 清除当前控制台的所有输出，将光标回置到第一行 </td> 
 <td style="width:291px;">console.clear()</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;width:49px;">3</td> 
 <td style="width:255px;"> console.count() 记录代码执行的次数 </td> 
 <td style="width:236px;"> 可以使用console.count()方法来记录代码执行的次数。 每次调用函数时，控制台都会输出该函数被调用的次数。 </td> 
 <td style="width:291px;"> function myFunction() { &nbsp; console.count("myFunction被调用的次数："); &nbsp; // 函数代码 } myFunction(); // 控制台输出 myFunction被调用的次数：1 myFunction(); // 控制台输出 myFunction被调用的次数：2 myFunction(); // 控制台输出 myFunction被调用的次数：3 &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="text-align:center;width:49px;">4</td> 
 <td style="width:255px;"> console.countReset() 计数器重置 </td> 
 <td colspan="2" style="width:236px;"> 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。 </td> 
 </tr> 
 <tr> 
 <td style="text-align:center;width:49px;">5</td> 
 <td style="width:255px;"> console.debug 调试 </td> 
 <td style="width:236px;">console.debug()方法可以用来输出调试信息，常常用于开发和调试过程中。</td> 
 <td style="width:291px;"> <img alt="" height="48" src="https://img-blog.csdnimg.cn/5b47a7d52c38456ba03f32c7f5363071.png" width="52"> 使用时候控制台这里需要全部选中 var a = 5; var b = 7; console.debug("a的值为：" + a + "，b的值为：" + b); </td> 
 </tr> 
 <tr> 
 <td style="text-align:center;width:49px;">6</td> 
 <td style="width:255px;"> console.dir() 显示对象的属性和方法 </td> 
 <td style="width:236px;"> 使用console.dir()方法来显示对象的属性和方法 </td> 
 <td style="width:291px;">console.dir(document.body)</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;width:49px;">7</td> 
 <td style="width:255px;">console.dirxml()</td> 
 <td style="width:236px;">console.dirxml() 可以将一个 DOM 节点（或者其他可解析为 DOM 节点的对象）以 XML 格式输出到控制台。该方法常用于调试 HTML、CSS 等前端代码。</td> 
 <td style="width:291px;"> const fruits = [ &nbsp; { name: "apple", color: "red" }, &nbsp; { name: "banana", color: "yellow" }, &nbsp; { name: "orange", color: "orange" } ]; console.dirxml(fruits); </td> 
 </tr> 
 <tr> 
 <td style="text-align:center;width:49px;">8</td> 
 <td style="width:255px;"> console.error() 输出错误 </td> 
 <td style="width:236px;">输出信息时，在最前面加一个红色的叉，表示出错，同时会显示错误发生的堆栈</td> 
 <td style="width:291px;">console.error('error')</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;width:49px;">9</td> 
 <td style="width:255px;">console.exception()</td> 
 <td style="width:236px;"> console<code>.</code>exception()方法是console<code>.</code>error()方法的别名，用来输出错误信息。 </td> 
 <td style="width:291px;">不推荐</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;width:49px;">10</td> 
 <td style="width:255px;">console.event()</td> 
 <td colspan="2" style="width:236px;"> 没有这个方法，偶然看到这么个东西，光看名字很迷惑，经过调研，确认没有这个方法。 console.event() 不是 JavaScript 标准库中的方法，也不是浏览器或库定义的方法。 在目前的 JavaScript 标准库中，并不存在 console.event() 方法。 </td> 
 </tr> 
 <tr> 
 <td style="text-align:center;width:49px;">11</td> 
 <td style="width:255px;">console.group()</td> 
 <td style="width:236px;">用于将显示的信息分组，可以把信息进行折叠和展开</td> 
 <td colspan="1" style="width:291px;"> console.group("外层分组"); // 开始外层分组 console.log("外层分组的内容"); console.group("内层分组"); // 开始内层分组 console.log("内层分组的内容"); console.groupEnd(); // 结束内层分组 console.groupEnd(); // 结束外层分组 </td> 
 </tr> 
 <tr> 
 <td style="text-align:center;width:49px;">12</td> 
 <td style="width:255px;">console.groupCollapsed()</td> 
 <td style="width:236px;">与console.group方法很类似，唯一的区别是该组的内容，在第一次显示时是收起的（collapsed），而不是展开的。</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;width:49px;">13</td> 
 <td style="width:255px;">console.groupEnd()</td> 
 <td style="width:236px;">结束内联分组</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;width:49px;">14</td> 
 <td style="width:255px;">console.info()</td> 
 <td style="width:236px;">console.log 别名，输出信息</td> 
 <td style="width:291px;">console.info("Hello world!")</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;width:49px;">15</td> 
 <td style="width:255px;"> console.log() 打印消息 </td> 
 <td style="width:236px;"> 使用console.log()方法打印消息到控制台 </td> 
 <td style="width:291px;">console.log("Hello world!")</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;width:49px;">16</td> 
 <td style="width:255px;">console.memory()</td> 
 <td style="width:236px;"> 查看内存 这是一个属性，并不是是函数，此属性是用来查看内存使用情况，如果我们使用过多的console.log()会占用大量的内存，导致浏览器出现卡死情况。 </td> 
 <td style="width:291px;">console.memory()</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;width:49px;">17</td> 
 <td style="width:255px;">console.markTimeline()</td> 
 <td style="width:236px;">console.markTimeline() 可以帮助我们记录代码执行中的重要事件，并在时间轴上进行标记，便于调试、分析和优化程序性能。</td> 
 <td style="width:291px;"></td> 
 </tr> 
 <tr> 
 <td style="text-align:center;width:49px;">18</td> 
 <td style="width:255px;">console.profile()</td> 
 <td style="width:236px;">console.profile() 可以很方便地对程序性能进行分析，并提供了丰富的性能数据，便于优化程序性能。</td> 
 <td colspan="1" style="width:291px;"> function heavyCalculation(n) { &nbsp; let sum = 0; &nbsp; for (let i = 0; i &lt; n ; i++) { &nbsp; &nbsp; sum += i; &nbsp; } &nbsp; return sum; } function main() { &nbsp; console.profile("Calculation Profile"); &nbsp; for (let i = 1000000; i &lt;= 10000000; i += 1000000) { &nbsp; &nbsp; console.log(heavyCalculation(i)); &nbsp; } &nbsp; console.profileEnd(); } main(); </td> 
 </tr> 
 <tr> 
 <td style="text-align:center;width:49px;">19</td> 
 <td style="width:255px;">console.profileEnd()</td> 
 <td style="width:236px;">性能分析结束</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;width:49px;">20</td> 
 <td style="width:255px;"> console.table() 将数据以表格显示 </td> 
 <td style="width:236px;"> console.table()会将数组中的对象转换为一个表格，并将表头设置为对象的键。这使得我们可以更容易地查看和比较数组中的对象。 </td> 
 <td style="width:291px;"> const fruits = [ &nbsp; { name: "apple", color: "red", price: 1 }, &nbsp; { name: "banana", color: "yellow", price: 0.5 }, &nbsp; { name: "grape", color: "purple", price: 2 } ]; console.table(fruits); </td> 
 </tr> 
 <tr> 
 <td style="text-align:center;width:49px;">21</td> 
 <td style="width:255px;">console.time()</td> 
 <td style="width:236px;"> 计时开始 使用console.time()和console.timeEnd()方法来在控制台中执行代码并计算运行时间。 </td> 
 <td colspan="1" style="width:291px;">console.clear(); console.time("myTimer"); for (var i = 0; i &lt; 1000000; i++) { &nbsp; &nbsp; // do something } console.timeEnd("myTimer"); &nbsp;</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;width:49px;">22</td> 
 <td style="width:255px;">console.timeEnd()</td> 
 <td style="width:236px;"> 计时结束 使用console.time()和console.timeEnd()方法来在控制台中执行代码并计算运行时间。 </td> 
 </tr> 
 <tr> 
 <td style="text-align:center;width:49px;">23</td> 
 <td style="width:255px;"> console.trace() 查看堆栈跟踪 </td> 
 <td style="width:236px;"> console.trace()用于打印出当前函数调用栈的详细信息。 它会输出当前代码执行过程中的函数调用关系，以及函数名和代码所在的文件和行号。 这对于调试程序中的错误非常有用，因为它可以告诉开发者在哪里出了问题，并提供了更多的上下文信息来帮助解决问题。 console.trace()可以在任何浏览器的控制台中使用，在Node.js中也可以使用。 </td> 
 <td style="width:291px;"> function funcOne() { &nbsp; console.log("Inside funcOne()"); &nbsp; funcTwo(); } function funcTwo() { &nbsp; console.log("Inside funcTwo()"); &nbsp; funcThree(); } function funcThree() { &nbsp; console.log("Inside funcThree()"); &nbsp; console.trace(); } funcOne(); </td> 
 </tr> 
 <tr> 
 <td style="text-align:center;width:49px;">24</td> 
 <td style="width:255px;"> console.warn() 输出警告 </td> 
 <td style="width:236px;"> 输出警告 </td> 
 <td style="width:291px;">console.warn('warn')</td> 
 </tr> 
 </tbody> 
</table>

#### 三、欢迎交流指正 ####

#### 参考链接 ####

[JavaScript Console 对象 | 菜鸟教程][JavaScript Console _ _]

[JavaScript Console _ _]: https://www.runoob.com/w3cnote/javascript-console-object.html?ivk_sa=1026860c