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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。