JavaScript中的控制台对象用法详细指南

Web控制台
Web控制台是一种工具, 主要用于记录与网页相关的信息, 例如：网络请求, javascript, 安全错误, 警告, CSS等。它使我们能够通过在页面内容中执行javascript表达式来与网页进行交互。
控制台对象
在javascript中, 控制台是提供访问浏览器调试控制台的对象。我们可以使用以下方法在Web浏览器中打开控制台：Ctrl + Shift + K用于Windows和Command + Option + K对于Mac。控制台对象为我们提供了几种不同的方法, 例如：

log()
error()
warn()
clear()
time()和timeEnd()
table()
count()
group()和groupEnd()
自定义控制台日志

让我们一一看一下所有这些方法。
console.log()
主要用于将输出记录(打印)到控制台。我们可以在log()中放入任何类型, 可以是字符串, 数组, 对象, 布尔值等。

// console.log() method console.log( 'abc' ); console.log(1); console.log( true ); console.log( null ); console.log(undefined); console.log([1, 2, 3, 4]); // array inside log console.log({a:1, b:2, c:3}); // object inside log

输出如下：

文章图片
console.error()
用于将错误消息记录到控制台。在代码测试中很有用。默认情况下, 错误消息将以红色突出显示。

// console.error() method console.error( 'This is a simple error' );

输出如下：

文章图片
console.warn()
用于将警告消息记录到控制台。默认情况下, 警告消息将以黄色突出显示。

// console.warn() method console.warn( 'This is a warning.' );

【JavaScript中的控制台对象用法详细指南】输出如下：

文章图片
console.clear()
用于清除控制台。控制台将被清除, 如果使用Chrome, 则会打印一个简单的叠加文字, 例如："控制台已清除", 而在Firefox中则不会返回任何消息。

// console.clear() method console.clear();

输出如下：

文章图片
console.time()和console.timeEnd()
每当我们想知道块或函数花费的时间时, 我们就可以利用javascript控制台对象提供的time()和timeEnd()方法。它们带有必须相同的标签, 并且里面的代码可以是任何东西(函数, 对象, 简单控制台)。

// console.time() and console.timeEnd() method console.time( 'abc' ); let fun =function (){ console.log( 'fun is running' ); } let fun2 = function (){ console.log( 'fun2 is running..' ); } fun(); // calling fun(); fun2(); // calling fun2(); console.timeEnd( 'abc' );

在上面的代码示例中, 我们可以看到标签为" abc", 这对于time()和timeEnd()方法都是相同的。如果我们增加这些方法定义的块内的代码量, 那么时间将增加。还应该记住, 返回控制台的时间将以毫秒为单位, 并且每次刷新页面时可能会有所不同。
输出如下：

文章图片
console.table()
这种方法使我们可以在控制台内生成表。输入必须是一个数组或一个将显示为表格的对象。

// console.table() method console.table({ 'a' :1, 'b' :2});

输出如下：

文章图片
console.count()
此方法用于计算此计数方法所击中的功能的数量。

// console.count() method for (let i=0; i< 5; i++){ console.count(i); }

输出如下：

文章图片
console.group()和console.groupEnd()
控制台对象的group()和groupEnd()方法允许我们将内容分组在一个单独的块中, 该块将缩进。就像time()和timeEnd()一样, 它们也接受具有相同值的label。

// console.group() and console.groupEnd() method console.group( 'simple' ); console.warn( 'warning!' ); console.error( 'error here' ); console.log( 'vivi vini vici' ); console.groupEnd( 'simple' ); console.log( 'new section' );

输出如下：

文章图片
自定义控制台日志
用户可以将样式添加到控制台日志中, 以使日志自定义。语法是将css样式作为参数添加到日志中, 这将替换日志中的％c, 如下例所示。

// Custom Console log example const spacing = '10px' ; const styles = `padding: ${spacing}; background-color: white; color: green; font-style: italic; border: 1px solid black; font-size: 2em; `; console.log( '%cGeeks for Geeks' , styles);

输出如下：