HTML DOM console.clear() 메서드 – 자바스크립트 콘솔 화면 한 번에 지우기

HTML DOM의 console.clear() 메서드는 브라우저 개발자 도구의 콘솔 화면을 깨끗하게 비우는 데 사용됩니다. 이 메서드를 호출하면 기존에 출력된 모든 콘솔 내용이 삭제되고, "Console was cleared"라는 메시지가 콘솔에 표시됩니다.

console.clear() 메서드는 Chrome, Firefox, Edge, Safari 등 주요 웹 브라우저에서 모두 완벽하게 지원되므로 크로스 브라우징 환경에서도 안심하고 사용할 수 있습니다.

문법(Syntax)

console.clear() 메서드의 기본 문법은 다음과 같습니다. 별도의 매개변수나 반환값은 없습니다.

console.clear()

예제(Example)

아래 예제를 통해 console.clear() 메서드가 실제로 어떻게 동작하는지 확인해 보겠습니다.

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript console.clear() Method</h1>
<p>키보드에서 F12 키를 눌러 콘솔 창을 열어보세요.</p>
console.log("TEXT has been printed on the console!");
<p>아래 버튼을 클릭하면 콘솔이 지워집니다.</p>
<button onclick="clearConsole()">CLEAR</button>
<script>
    function clearConsole() {
        console.clear();
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 결과가 나타납니다.

HTML DOM console.clear() 메서드 – 자바스크립트 콘솔 화면 한 번에 지우기

콘솔 화면 −

HTML DOM console.clear() 메서드 – 자바스크립트 콘솔 화면 한 번에 지우기

CLEAR 버튼 클릭 후 −

HTML DOM console.clear() 메서드 – 자바스크립트 콘솔 화면 한 번에 지우기

코드 분석

위 예제의 동작 과정을 단계별로 살펴보겠습니다.

1단계: 먼저 console.log() 메서드를 사용해 콘솔에 메시지를 출력합니다.

console.log("TEXT has been printed on the console!");

2단계: 클릭 시 clearConsole() 함수를 실행하는 CLEAR 버튼을 생성합니다.

<button onclick="clearConsole()">CLEAR</button>

3단계: clearConsole() 함수는 console 객체의 clear() 함수를 호출합니다. 이렇게 하면 콘솔의 모든 내용이 지워지고, "Console was cleared"라는 메시지가 콘솔에 남게 됩니다.

function clearConsole() {
    console.clear();
}

마무리

console.clear() 메서드는 디버깅 작업 중 콘솔이 불필요한 로그로 가득 차 있을 때 유용하게 활용할 수 있습니다. 특히 반복적인 테스트를 수행하거나 로그를 정리한 상태에서 새로운 결과를 확인하고 싶을 때 버튼 하나로 콘솔을 즉시 초기화할 수 있어 개발 생산성을 높여줍니다.