HTML DOM console.groupEnd()用法及代碼示例

HTML DOM console.groupEnd() 方法用於指示消息組的結束。它退出控製台中的當前消息組。

用法

以下是 console.groupEnd() 方法的語法 -

console.groupEnd()

示例

讓我們看一個 HTML DOM console.groupEnd() 方法的例子 -

<!DOCTYPE html>
<html>
<body>
<h1>console.groupEnd() Method</h1>
<p>Press F12 key to view the message in the console view.</p>
<button type="button" onclick="groupMessage()">GROUP</button>
<button type="button" onclick="EndGroup()">END GROUP</button>
<script>
   function groupMessage(){
      console.group();
      console.log("This message will be inside a group!");
      console.log("This message will also be inside a group!");
   }
   function EndGroup(){
      console.groupEnd();
      console.log("We are now outside the group");
      console.log("This message will be outside the group!");
   }
</script>
</body>
</html>

輸出

這將產生以下輸出 -

單擊 GROUP 按鈕並查看開發人員選項中的控製台視圖 -

單擊 END GROUP 按鈕並查看開發人員選項中的控製台視圖 -

在上麵的例子中 -

我們創建了兩個按鈕 GROUP 和 END GROUP，它們將在用戶單擊時執行 groupMessage() 和 EndGroup () 方法 -

<button type="button" onclick="groupMessage()">GROUP</button>
<button type="button" onclick="EndGroup()">END GROUP</button>

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!");
}

EndGroup() 方法內部有 console.groupEnd() 方法，聲明在此之後寫入的所有消息都將顯示在消息組之外。如果之前不存在消息組，則不會拋出錯誤 -

function EndGroup(){
   console.groupEnd();
   console.log("We are now outside the group");
   console.log("This message will be outside the group!");
}

相關用法

注：本文由純淨天空篩選整理自AmitDiwan大神的英文原創作品 HTML DOM console.groupEnd() Method。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。