HTML DOM의 console.trace() 메서드는 호출된 시점까지의 스택 트레이스(stack trace)를 콘솔에 출력하는 기능을 합니다. 즉, 현재 코드가 어떤 경로를 거쳐 해당 지점에 도달했는지, 코드 실행 흐름(code path)을 추적할 때 주로 사용됩니다.
문법(Syntax)
console.trace() 메서드의 기본 문법은 다음과 같습니다.
console.trace(label);
여기서 label은 선택적(optional) 매개변수로, 문자열 타입의 값을 받아 트레이스에 라벨을 지정합니다. 서로 다른 코드 조각에 대해 여러 개의 트레이스를 출력해야 할 때 각 트레이스를 구분하는 데 유용합니다.
예제(Example)
다음 예제를 통해 console.trace() 메서드의 동작을 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h1> console.trace() Method</h1>
<p>아래 버튼을 클릭하세요...</p>
<button onclick="Function1()">Start Trace</button>
<script>
function Function1(){
Function2();
}
function Function2(){
console.trace();
}
</script>
<p>버튼 클릭 후 콘솔 탭에서 스택 트레이스를 확인할 수 있습니다.</p>
</body>
</html>출력 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
「Start Trace」 버튼을 클릭한 뒤, 브라우저 개발자 도구의 콘솔(Console) 탭에서 출력 결과를 확인합니다.
동작 원리 설명
위 예제의 실행 흐름을 단계별로 분석해 보겠습니다.
1. 버튼 생성 및 이벤트 연결
먼저 「Start Trace」 버튼을 만들고, 사용자가 클릭하면 Function1()이 실행되도록 onclick 이벤트를 연결했습니다.
<button onclick="Function1()">Start Trace</button>
2. 함수 호출 순서와 스택 트레이스
Function1()은 내부에서 Function2()를 호출하고, Function2()는 자신의 내부에 있는 console.trace() 메서드를 실행합니다.
스택 트레이스는 LIFO(Last-In, First-Out, 후입선출) 순서를 따르기 때문에, 가장 마지막에 호출된 함수가 가장 먼저 출력됩니다.
- 첫 번째로 출력: console.trace()를 직접 호출한 Function2()
- 두 번째로 출력: Function2()를 호출한 Function1()
- 세 번째로 출력: Function1()을 실행시킨 「Start Trace」 버튼의 onclick 이벤트
즉, 스택 트레이스는 함수가 호출된 순서의 역순으로 표시되며, 이를 통해 코드가 어떤 경로로 현재 위치에 도달했는지 한눈에 파악할 수 있습니다.
<button onclick="Function1()">Start Trace</button>
function Function1(){
Function2();
}
function Function2(){
console.trace();
}정리
console.trace() 메서드는 디버깅 시 함수 호출 경로를 추적하는 강력한 도구입니다. 복잡한 콜백 체인이나 여러 계층으로 중첩된 함수 호출 구조에서 문제 발생 지점을 빠르게 찾아내야 할 때 특히 유용하며, label 매개변수를 활용하면 여러 트레이스 출력 결과도 체계적으로 관리할 수 있습니다.