Console의 메시지 로그

Kayce Basques

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

이 튜토리얼은 순서대로 완료하도록 설계되었습니다. JavaScript를 사용하여 페이지에 상호작용을 추가하는 방법과 같은 웹 개발의 기본사항을 이해하고 있다고 가정합니다.

데모 및 DevTools 설정

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

1. 데모를 엽니다.

2. 선택사항: 데모를 별도의 창으로 이동합니다. 이 예에서는 튜토리얼이 왼쪽에 있고 데모가 오른쪽에 있습니다.

   

3. 데모에 포커스를 맞춘 다음 Control+Shift+J 또는 Command+Option+J (Mac)를 눌러 DevTools를 엽니다. 기본적으로 DevTools는 데모 오른쪽에 열립니다.

   

4. 선택사항: DevTools를 창 하단에 도킹하거나 별도의 창으로 고정 해제합니다.

   데모 하단에 도킹된 DevTools:

   별도의 창에서 고정 해제된 DevTools:

JavaScript에서 로깅된 메시지 보기

콘솔 에 표시되는 대부분의 메시지는 페이지의 JavaScript를 작성한 웹 개발자로부터 비롯됩니다. 이 섹션의 목표는 콘솔에 표시될 가능성이 높은 다양한 메시지 유형을 소개하고 자체 JavaScript에서 각 메시지 유형을 직접 로깅하는 방법을 설명하는 것입니다.

1. 데모에서 로그 정보 버튼을 클릭합니다. Hello, Console!이 콘솔에 로깅됩니다.

   

2. 콘솔 의 Hello, Console! 메시지 옆에 있는 log.js:2 를 클릭합니다. 소스 패널이 열리고 메시지가 콘솔에 로깅되도록 한 코드 줄이 강조표시됩니다.

   

   페이지의 JavaScript가 console.log('Hello, Console!')을 호출할 때 메시지가 로깅되었습니다.

3. 다음 워크플로 중 하나를 사용하여 콘솔 로 돌아갑니다.

   • 콘솔 탭을 클릭합니다.
   • 콘솔 에 포커스가 맞춰질 때까지 Control+[ 또는 Command+[ (Mac)를 누릅니다.
   • 명령어 메뉴를 열고 Console을 입력하기 시작한 다음 콘솔 패널 표시 명령어를 선택하고 Enter를 누릅니다.

4. 데모에서 로그 경고 버튼을 클릭합니다. Abandon Hope All Ye Who Enter 가 콘솔에 로깅됩니다.

   

   이와 같이 형식이 지정된 메시지는 경고입니다.

5. 선택사항: log.js:12 를 클릭하여 메시지가 이와 같이 형식이 지정되도록 한 코드를 확인한 다음 완료되면 콘솔 로 돌아갑니다. 메시지가 특정 방식으로 로깅되도록 한 코드를 보려면 언제든지 이 작업을 실행합니다.

6. Abandon Hope All Ye Who Enter 앞에 있는 펼치기 아이콘을 클릭합니다. DevTools는 스택 트레이스가 호출로 이어지는 것을 표시합니다.

   

   스택 트레이스는 logWarning이라는 함수가 호출되었고, 이 함수가 quoteDante라는 함수를 호출했다고 알려줍니다. 즉, 먼저 발생한 호출은 스택 트레이스의 하단에 있습니다. console.trace()를 호출하여 언제든지 스택 트레이스를 로깅할 수 있습니다.

7. 로그 오류 를 클릭합니다. 다음 오류 메시지가 로깅됩니다. I'm sorry, Dave. I'm afraid I can't do that.

   

8. 로그 테이블 을 클릭합니다. 유명한 아티스트에 관한 테이블이 콘솔에 로깅됩니다.

   

   birthday 열은 한 행에만 채워져 있습니다. 코드를 확인하여 그 이유를 파악합니다.

9. 로그 그룹 을 클릭합니다. 4명의 유명한 범죄 소탕 거북이의 이름이 Adolescent Irradiated Espionage Tortoises 라벨 아래에 그룹화됩니다.

   

10. 로그 맞춤 을 클릭합니다. 빨간색 테두리와 파란색 배경이 있는 메시지가 콘솔에 로깅됩니다.

    

여기서 중요한 점은 JavaScript에서 콘솔 에 메시지를 로깅하려면 console 메서드 중 하나를 사용한다는 것입니다. 각 메서드는 메시지 형식을 다르게 지정합니다.

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

브라우저에서 로깅된 메시지 보기

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

1. 404 발생 을 클릭합니다. 페이지의 JavaScript가 존재하지 않는 파일을 가져오려고 했기 때문에 브라우저가 404 네트워크 오류를 로깅합니다.

   

2. 오류 발생 을 클릭합니다. JavaScript가 존재하지 않는 DOM 노드를 업데이트하려고 하기 때문에 브라우저가 포착되지 않은 TypeError를 로깅합니다.

   

3. 로그 수준 드롭다운을 클릭하고 세부정보 옵션이 사용 중지되어 있으면 사용 설정합니다. 필터링에 관한 자세한 내용은 다음 섹션에서 알아봅니다. 로깅하는 다음 메시지가 표시되도록 하려면 이 작업을 실행해야 합니다. 참고: 기본 수준 드롭다운이 사용 중지되어 있으면 콘솔 사이드바를 닫아야 할 수 있습니다. 콘솔 사이드바에 관한 자세한 내용은 아래의 메시지 소스별 필터링을 참고하세요.

   

4. 위반 발생 을 클릭합니다. 페이지가 몇 초 동안 응답하지 않게 된 후 브라우저가 메시지 [Violation] 'click' handler took 3000ms를 콘솔에 로깅합니다. 정확한 기간은 다를 수 있습니다.

   

메시지 필터링

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

로그 수준으로 필터링

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

로그 수준별로 필터링하려면 다음 단계를 따르세요.

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

   

2. 로그 수준 드롭다운을 다시 클릭하고 오류 를 다시 사용 설정합니다. Error 수준 메시지가 다시 표시됩니다.

텍스트로 필터링

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

1. 필터 상자에 Dave를 입력합니다. Dave 문자열이 포함되지 않은 모든 메시지가 숨겨집니다.

   

2. 필터 상자에서 Dave를 삭제합니다. 모든 메시지가 다시 표시됩니다.

정규 표현식으로 필터링

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

1. 필터 상자에 /^[AH]/를 입력합니다. 이 패턴을 RegExr에 입력하여 이 패턴이 하는 작업에 대한 설명을 확인하세요.

   

2. 필터 상자에서 /^[AH]/를 삭제합니다. 모든 메시지가 다시 표시됩니다.

메시지 소스별 필터링

특정 URL에서 가져온 메시지만 보려면 사이드바 를 사용합니다.

1. 콘솔 사이드바 표시 를 클릭합니다.

   

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

   

사용자 메시지별 필터링

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

1. 9개의 사용자 메시지 를 클릭합니다. 브라우저 메시지가 숨겨집니다.

   

2. 12개의 메시지 를 클릭하여 모든 메시지를 다시 표시합니다.

다른 패널과 함께 콘솔 사용

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

1. 요소 탭을 클릭합니다.

2. Escape를 누릅니다. 서랍 의 콘솔 탭이 열립니다. 이 탭에는 이 튜토리얼 전반에서 사용한 콘솔 의 모든 기능이 있습니다.

   

다음 단계

튜토리얼을 완료했습니다. 트로피 지급 을 클릭하여 트로피를 받으세요.

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