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

2021年3月30日12:03:38 发表评论 772 次浏览

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.' );

输出如下：

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

输出如下：