이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Console의 메시지 로그

Kayce Basques

이 대화형 튜토리얼에서는 Chrome DevTools 콘솔에서 메시지를 로깅하고 필터링하는 방법을 보여줍니다.

콘솔의 메시지

이 튜토리얼은 순서대로 완료하기 위한 것입니다. 또한 자바스크립트를 사용하여 페이지에 상호작용을 추가하는 방법 등 웹 개발의 기본사항을 이해하고 있다고 가정합니다.

데모 및 DevTools 설정

이 튜토리얼은 데모를 열고 모든 워크플로를 직접 사용해 볼 수 있도록 제작되었습니다. 실제로 따라 하면 나중에 워크플로를 기억할 가능성이 더 높아집니다.

데모를 엽니다.
선택사항: 데모를 별도의 창으로 이동합니다. 이 예시에서는 튜토리얼이 왼쪽, 데모는 오른쪽에 있습니다.
데모에 초점을 맞춘 다음 Control+Shift+J 또는 Command+Option+J (Mac)를 눌러 DevTools를 엽니다. 기본적으로 DevTools는 데모 오른쪽에 열립니다.
선택사항: DevTools를 창 하단에 도킹하거나 별도의 창으로 도킹을 해제합니다.

DevTools가 데모 하단에 고정되었습니다.

DevTools가 별도의 창에서 도킹 해제됨:

JavaScript에서 기록된 메시지 보기

콘솔에 표시되는 대부분의 메시지는 페이지의 JavaScript를 작성한 웹 개발자가 보낸 것입니다. 이 섹션의 목표는 콘솔에 표시될 수 있는 다양한 메시지 유형을 소개하고 자체 JavaScript에서 각 메시지 유형을 직접 기록하는 방법을 설명하는 것입니다.

데모에서 Log Info 버튼을 클릭합니다. Hello, Console!가 콘솔에 기록됩니다.
콘솔의 Hello, Console! 메시지 옆에 있는 log.js:2를 클릭합니다. Sources 패널이 열리고 메시지가 콘솔에 로깅되도록 한 코드 줄이 강조 표시됩니다.

페이지의 JavaScript가 console.log('Hello, Console!')를 호출했을 때 메시지가 로깅되었습니다.
다음 워크플로 중 하나를 사용하여 콘솔로 다시 이동합니다.
- 콘솔 탭을 클릭합니다.
- 콘솔에 포커스가 올 때까지 Control+[ 또는 Command+[ (Mac)를 누릅니다.
- 명령 메뉴를 열고 Console를 입력합니다. 콘솔 패널 표시 명령어를 선택한 다음 Enter 키를 누릅니다.
데모에서 Log Warning(경고 로그) 버튼을 클릭합니다. Abandon Hope All Ye Who Enter는 콘솔에 로깅됩니다.

이와 같은 형식의 메일은 경고입니다.
선택사항: log.js:12를 클릭하여 다음과 같이 메시지 형식을 지정한 코드를 확인한 후 완료되면 콘솔로 다시 이동합니다. 메시지가 특정 방식으로 로깅되도록 하는 코드를 보고 싶을 때마다 이 작업을 실행하세요.
Abandon Hope All Ye Who Enter 앞에 있는 펼치기 아이콘을 클릭합니다. DevTools는 호출까지의 스택 트레이스를 표시합니다.

스택 트레이스는 logWarning이라는 함수가 호출되었고 결과적으로 quoteDante이라는 함수가 호출되었음을 알려줍니다. 즉, 먼저 발생한 호출은 스택 트레이스 하단에 있습니다. 언제든지 console.trace()를 호출하여 스택 트레이스를 로깅할 수 있습니다.
Log Error를 클릭합니다. 다음 오류 메시지가 로깅됩니다. I'm sorry, Dave. I'm afraid I can't do that.
로그 테이블을 클릭합니다. 콘솔에는 유명 아티스트에 대한 표가 기록됩니다.

birthday 열이 한 행에만 채워지는 방식에 유의하세요. 코드를 확인하여 그 이유를 알아보세요.
로그 그룹을 클릭합니다. 범죄에 맞서는 4마리의 유명한 거북이의 이름이 Adolescent Irradiated Espionage Tortoises 라벨 아래에 그룹화되어 있습니다.
커스텀 로그를 클릭합니다. 빨간색 테두리와 파란색 배경의 메시지가 콘솔에 로깅됩니다.

여기서 주요 아이디어는 JavaScript에서 Console에 메시지를 로깅할 때 console 메서드 중 하나를 사용한다는 것입니다. 방법마다 메시지의 형식이 다릅니다.

이 섹션에서 설명한 것보다 훨씬 더 많은 방법이 있습니다. 튜토리얼 끝부분에서 나머지 메서드를 살펴보는 방법을 알아봅니다.

브라우저에서 기록한 메시지 보기

브라우저는 메시지를 콘솔에도 로깅합니다. 일반적으로 페이지에 문제가 있을 때 발생합니다.

Cause 404를 클릭합니다. 페이지의 JavaScript가 존재하지 않는 파일을 가져오려고 시도하므로 브라우저에서 404 네트워크 오류가 로깅됩니다.
오류 원인을 클릭합니다. JavaScript가 존재하지 않는 DOM 노드를 업데이트하려고 하기 때문에 브라우저가 포착되지 않은 TypeError를 로깅합니다.
Log Levels 드롭다운을 클릭하고 Verbose 옵션이 사용 중지되어 있으면 사용 설정합니다. 필터링에 관해서는 다음 섹션에서 자세히 알아봅니다. 이렇게 해야 로깅하는 다음 메시지가 표시되도록 할 수 있습니다. 참고: 기본 수준 드롭다운이 사용 중지된 경우 콘솔 사이드바를 닫아야 할 수도 있습니다. 콘솔 사이드바에 대한 자세한 내용은 아래 메시지 출처별로 필터링하세요.
위반 원인을 클릭합니다. 페이지가 몇 초 동안 응답하지 않으면 브라우저가 [Violation] 'click' handler took 3000ms 메시지를 콘솔에 로깅합니다. 정확한 기간은 다를 수 있습니다.

메시지 필터링

일부 페이지에서 콘솔에 메시지가 넘쳐나는 경우가 있습니다. DevTools는 현재 작업과 관련이 없는 메시지를 필터링할 수 있는 다양한 방법을 제공합니다.

로그 수준으로 필터링

각 console.* 메서드에는 심각도 수준(Verbose, Info, Warning, Error)이 할당됩니다. 예를 들어 console.log()는 Info 수준 메시지인 반면 console.error()은 Error 수준 메시지입니다.

참고: console.* 메서드 및 심각도 수준의 전체 목록은 Console API 참조에서 확인하세요.

로그 수준을 기준으로 필터링하려면 다음 안내를 따르세요.

로그 수준 드롭다운을 클릭하고 오류를 사용 중지합니다. 등급 옆에 더 이상 체크표시가 없으면 등급이 사용 중지됩니다. Error 수준 메시지는 사라집니다.
Log Levels 드롭다운을 다시 클릭하고 Errors를 다시 사용 설정합니다. Error 수준 메시지가 다시 표시됩니다.

텍스트로 필터링

정확한 문자열이 포함된 메시지만 보려면 필터 텍스트 상자에 해당 문자열을 입력합니다.

필터 텍스트 상자에 Dave를 입력합니다. Dave 문자열을 포함하지 않는 모든 메시지가 숨겨집니다. Adolescent Irradiated Espionage Tortoises 라벨이 표시될 수도 있습니다. 버그네요.
필터 텍스트 상자에서 Dave를 삭제합니다. 모든 메시지가 다시 표시됩니다.

정규 표현식으로 필터링

특정 문자열 대신 텍스트 패턴이 포함된 모든 메시지를 표시하려면 정규 표현식을 사용합니다.

필터 텍스트 상자에 /^[AH]/를 입력합니다. 수행하는 작업에 대한 설명을 위해 이 패턴을 RegExr에 입력합니다.
필터 텍스트 상자에서 /^[AH]/를 삭제합니다. 모든 메시지가 다시 표시됩니다.

메시지 원본으로 필터링

특정 URL에서 온 메일만 보려면 사이드바를 사용하세요.

Show Console 사이드바 를 클릭합니다.
12개의 메시지 옆에 있는 펼치기 아이콘을 클릭합니다. 사이드바에는 메시지가 로깅되도록 한 URL의 목록이 표시됩니다. 예를 들어 log.js로 인해 메시지가 11개 발생했습니다.

사용자 메시지로 필터링

앞에서 로그 정보를 클릭하면 메시지를 콘솔에 기록하기 위해 console.log('Hello, Console!')라는 스크립트가 생성되었습니다. 이와 같이 JavaScript에서 로깅된 메시지를 사용자 메시지라고 합니다. 반대로 원인 404를 클릭하면 브라우저에서 요청된 리소스를 찾을 수 없다는 Error 수준 메시지를 로깅했습니다. 이러한 메시지는 브라우저 메시지로 간주됩니다. 사이드바를 사용하여 브라우저 메시지를 필터링하고 사용자 메시지만 표시할 수 있습니다.

9 사용자 메시지를 클릭합니다. 브라우저 메시지가 숨겨집니다.
모든 메시지를 다시 표시하려면 메시지 12개를 클릭합니다.

다른 패널과 함께 Console 사용

스타일을 수정하면서 콘솔 로그에서 무언가를 빠르게 확인해야 하는 경우에는 어떻게 해야 할까요? 창을 사용합니다.

요소 탭을 클릭합니다.
Esc 키를 누릅니다. 창의 콘솔 탭이 열립니다. 여기에는 이 튜토리얼 전체에서 사용한 콘솔의 모든 기능이 포함되어 있습니다.

다음 단계

축하합니다. 튜토리얼을 완료했습니다. 디스펜스 트로피를 클릭하면 트로피를 받을 수 있습니다.

콘솔 UI와 관련된 더 많은 기능과 워크플로에 관해 알아보려면 콘솔 참조를 참고하세요.
Console API 참조에서 JavaScript에서 로깅된 메시지 보기에 설명된 모든 console 메서드에 대해 자세히 알아보고 이 튜토리얼에서 다루지 않은 다른 console 메서드를 살펴보세요.
DevTools로 할 수 있는 다른 작업을 알아보려면 시작하기를 참고하세요.
모든 console 형식 및 스타일 지정 방법에 관한 자세한 내용은 콘솔에서 메시지 서식 지정 및 스타일 지정을 참고하세요.