HTML DOM console.groupCollapsed()用法及代码示例

HTML DOM console.groupCollapsed() 方法指定折叠消息组的开头。

用法

以下是语法 -

console.groupCollapsed(label)

这里，label 是组的标签。

示例

让我们看一个 console.groupCollapsed() 方法的例子 -

<!DOCTYPE html>
<html>
<body>
<h1>console.groupCollapsed() 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="CollMessage()">COLLAPSED</button>
<script>
   function normMessage(){
      console.log("Hello world!");
   }
   function CollMessage(){
      console.groupCollapsed();
      console.log("This message will be inside a collapsed group!");
      console.log("This message will also be inside a collapsed group!");
   }
</script>
</body>
</html>

输出

这将产生以下输出 -

单击 NORMAL 按钮并查看开发人员选项中的控制台视图 -

单击 COLLAPSED 按钮并查看开发人员选项中的控制台视图 -

在上面的例子中 -

我们创建了两个按钮 COLLAPSED 和 GROUP，它们将在用户单击时执行 CollMessage() 和 groupMessage() 方法。

<button type="button" onclick="normMessage()">NORMAL</button>
<button type="button" onclick="CollMessage()">COLLAPSED</button>

normMessage() 方法具有 console.log() 方法，该方法接受作为参数提供的字符串或对象，并将其简单地显示到控制台。

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

CollMessage() 方法在其中包含 console.groupCollapsed() 方法，该方法声明在此之后写入的所有消息都将显示在折叠的消息组中。与 group() 方法的默认扩展视图不同，消息现在折叠在消息组内 -

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

相关用法

注：本文由纯净天空筛选整理自AmitDiwan大神的英文原创作品 HTML DOM console.groupCollapsed() Method。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。