HTML DOM console.group() 方法

htmlweb developmentfront end technology更新于 2025/9/24 19:56:17

HTML DOM console.group() 方法用于指示消息组的起始位置,所有在该方法之后写入的消息都将写入该消息组。这允许使用 label 参数为所有消息创建一个组或创建多个组。

语法

以下是 console.group() 方法的语法 −

console.group([label])

其中,label 是一个可选参数。它是字符串类型,用作所创建消息组的标签。

示例

让我们来看一个 HTML DOM console.group() 方法的示例 −

<!DOCTYPE html>
<html>
<body>
<h1>console.group() Method</h1>
<p>Press F12 key to view the message in the console view.</p>
<button type="button" onclick="normMessage()">NORMAL</button>
<button type="button" onclick="groupMessage()">GROUP</button>
<script>
   function normMessage(){
      console.log("Hello world!");
   }
   function groupMessage(){
      console.group();
      console.log("This message will be inside a group!");
      console.log("This message will also be inside a group!");
   }
</script>
</body>
</html>

输出

这将产生以下输出 −

点击"普通"按钮并查看控制台 −

点击"群组"按钮并查看控制台 −

在上面的例子中 −

我们创建了两个按钮 NORMAL 和 GROUP,当用户点击它们时,它们会执行 normMessage() 和 groupMessage() 方法。

<button type="button" onclick="normMessage()">NORMAL</button>
<button type="button" onclick="groupMessage()">GROUP</button>

normMessage() 方法包含 console.log() 方法,该方法接受一个字符串或对象作为参数,并将其简单地显示在控制台上 −

function normMessage(){
   console.log("Hello world!");
}

groupMessage() 方法内部包含 console.group() 方法,该方法指定在此之后写入的所有消息都将显示在消息组中:

function groupMessage(){
   console.group();
   console.log("This message will be inside a group!");
   console.log("This message will also be inside a group!");
}

相关文章


有用资源