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> 출력
이것은 다음과 같은 출력을 생성합니다 -
NORMAL 버튼을 클릭하고 개발자 옵션에서 콘솔 보기를 볼 때 -
COLLAPSED 버튼을 클릭하고 개발자 옵션에서 콘솔 보기를 볼 때 -
COLLAPSED 버튼을 클릭하고 개발자 옵션에서 콘솔 보기를 볼 때 -
위의 예에서 -
사용자가 클릭하면 CollMessage() 및 groupMessage() 메서드를 실행하는 두 개의 버튼 COLLAPSED 및 GROUP을 만들었습니다.
<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!");
}