메시지

콘솔에는 다양한 메시지가 출력됩니다. 이런 메시지들을 통해 현재 페이지에서 일어나는 일들을 파악하고, 디버깅을 수월하게 할 수 있습니다. 이번 섹션에서는 메시지와 관련한 여러 기능들을 살펴보겠습니다.

로그

일반적으로 로깅은 프로그램에서 발생하는 특정 이벤트를 기록하는 것을 말합니다.

로그는 로그 레벨과 메시지로 구성됩니다. 로그 레벨은 로그의 중요도를 나타내고, 메시지는 출력하고자 하는 내용입니다.

로그는 디버깅을 위해 사용되며, 프로그램의 상태를 추적하고, 오류를 찾는 데 사용됩니다.

한번 로그를 만들어 볼까요? 개발자도구의 콘솔을 열고 아래 버튼을 눌러보세요. 👉👇

실습용 로그를 만들어요!

로그 레벨 필터링 버튼을 눌러 모든 로그 레벨을 체크해주세요!

각각의 로그는 좌측의 메시지와 우측의 파일이름과 라인 숫자로 구성되어 있습니다. 파일이름과 라인 숫자는 메시지가 특정 파일의 몇번 줄에서 발생했는지를 나타냅니다. 누르면 해당 파일의 해당 줄을 볼 수 있습니다.

로그 레벨

로그 레벨은 로그를 심각도와 중요도에 따라 구분하기 위해 사용하는 개념입니다.

크롬에는 다음 4가지의 로그 레벨이 있습니다(참고로 브라우저마다 로그 레벨의 개수와 이름이 다를 수 있습니다. 사파리는 5개의 레벨이 존재합니다).

• Verbose: 상세 메시지. 디버깅 등에 활용 (예: console.debug)
• Info: 일반적인 메시지 (예: console.log)
• Warnings: 경고 메시지 (예: console.warn)
• Errors: 에러 메시지 (예: console.error)

Warnings와 Errors 레벨 로그의 특징

Warnings와 Errors 레벨 로그는 각각 노란색과 빨간색으로 표시됩니다. 이를 통해 전체 메시지 목록에서 Warnings와 Errors 레벨 로그를 쉽게 인지할 수 있습니다.

또한 Warnings과 Errors 레벨 메시지는 해당 메시지가 발생한 시점의 스택 트레이스(콜스택)를 볼 수 있습니다. 메시지 왼쪽에 표시되는 ►를 클릭해 스택트레이스를 확인할 수 있으며, 스택트레이스의 첫 번째 줄에는 경고나 에러가 실제로 발생한 함수가 표시되고, 아래쪽으로 갈수록 바로 윗 함수를 호출한 함수가 순차적으로 나열됩니다.

스택트레이스(Stack Trace)란?

프로그램이 어떤 순서로 함수를 호출했는지 추적한 ‘호출 경로’를 의미합니다. 예를 들어, A라는 함수 안에서 B 함수를 호출하고, B 함수 안에서 C 함수를 호출했다면, 스택 트레이스에는 A → B → C 순으로 호출된 기록이 순서대로 담기게 됩니다. 콘솔에 표시되는 스택 트레이스를 통해 어떤 코드가 문제를 일으켰는지 더 빠르게 찾을 수 있습니다.

실습용 에러 메시지의 스택트레이스를 확인해볼까요?

실습용 에러 메시지의 스택트레이스를 보면 에러 메시지는 다음 함수들의 일련의 호출로 인해 발생했음을 알 수 있습니다.

1. logMessageToOverview 함수가 실행됨
2. logMessageToOverview 함수 내부에서 logErrorMessage 함수를 실행됨
3. logErrorMessage 함수 내부에서 에러 메시지가 발생됨

정말 그런지 코드를 봐볼까요? 스택트레이스에서 logErrorMessage 우측에 있는 파일이름을 눌러 실제 코드를 확인해봅시다.

// [에러메시지 호출 경로 1] '실습용 메시지를 만들어요!' 버튼을 클릭하면 logMessageToOverview 함수가 호출됩니다.
logOverviewBtn.addEventListener("click", logMessageToOverview);

function logMessageToOverview() {
  // [에러메시지 호출 경로 2] logErrorMessage 함수가 호출됩니다.
  logErrorMessage();
}

function logErrorMessage() {
  // [에러메시지 호출 경로 3] console.error 함수가 호출됩니다.
  console.error("Errors 레벨 메시지입니다.");
}

스택트레이스가 잘 알려줬죠? 🥳

메시지 필터링

콘솔에는 메시지를 필터링하는 기능이 있습니다. 특정 로그 레벨의 메시지만 보거나, 특정 텍스트를 포함하는 메시지만 보거나, 특정 파일에서 발생한 메시지만 보는 등의 작업을 할 수 있습니다. 이를 통해 메시지를 파악하는 데 도움을 받을 수 있습니다.

hidden 표시를 잘 확인해주세요!

필터링을 통해 감춰진 메시지가 있다면, 숨겨진 메시지 수와 함께 hidden이라는 표시가 상단 우측에 표시됩니다. 출력되어야 할 메시지가 안나온다고 당황하지 마시고 hidden 표시가 있는지를 확인해보시고 필터링을 해제해보세요!

로그레벨 별 필터링

드롭다운 UI를 통해 로그레벨 별로 필터링 할 수 있습니다.

텍스트 필터링

필터링 input에 텍스트를 입력해 메시지에 해당 텍스트가 포함된 메시지를 필터링 할 수 있습니다.

사이드바 필터링

사이드바를 통해 특정 로그 레벨의 메시지나 유저 메시지만 필터링 할 수 있습니다. 또한 메시지의 출처 별로도 필터링 할 수 있습니다.

유저 메시지 vs 브라우저 메시지

메시지는 메시지를 출력한 주체에 따라 유저 메시지와 브라우저 메시지로 나뉩니다.

유저 메시지는 console.log와 같이 자바스크립트에서 명시적으로 발생시킨 메시지를 말합니다.

브라우저 메시지는 브라우저가 자동으로 출력한 메시지를 말합니다. 예를 들어, 네트워크 요청이 실패했을 때 브라우저가 자동으로 출력하는 메시지가 브라우저 메시지입니다.

아래 버튼을 눌러 브라우저 메시지를 확인해보세요.

실패할 네트워크 요청 만들기

콘솔 사이드바에서 유저 메시지로 필터링하면 네트워크 오류 메시지가 나오지 않는 것을 확인해보세요.

메시지 검색

⌥ + f로 검색창을 열어 메시지를 검색할 수 있습니다.