HTML DOM console.groupCollapsed() Method

HTML DOM console.groupCollapsed() วิธีการระบุจุดเริ่มต้นของกลุ่มข้อความที่ยุบ

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์ -

console.groupCollapsed(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>

ผลลัพธ์

สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -

HTML DOM console.groupCollapsed() Method

เมื่อคลิกปุ่ม NORMAL และดูมุมมองคอนโซลในตัวเลือกสำหรับนักพัฒนา -

HTML DOM console.groupCollapsed() Method

เมื่อคลิกปุ่มยุบและดูมุมมองคอนโซลในตัวเลือกสำหรับนักพัฒนา -

HTML DOM console.groupCollapsed() Method

เมื่อคลิกปุ่มยุบและดูมุมมองคอนโซลในตัวเลือกสำหรับนักพัฒนา -

ในตัวอย่างข้างต้น −

เราได้สร้างปุ่มสองปุ่ม 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!");
}