콘솔 기능 참조

Kayce Basques
Kayce Basques
Sofia Emelianova
Sofia Emelianova

이 페이지는 Chrome DevTools 콘솔과 관련된 기능에 대한 참조입니다. 여기서는 개발자가 콘솔을 사용하여 로깅된 메시지를 보고 JavaScript를 실행하는 데 익숙하다고 가정합니다. 그렇지 않은 경우 시작하기를 참고하세요.

console.log()와 같은 함수에 관한 API 참조를 찾으려면 Console API 참조를 확인하세요. monitorEvents()와 같은 함수에 관한 참조는 Console 유틸리티 API 참조를 확인하세요.

콘솔 열기

콘솔을 패널로 열거나 창의 탭으로 열 수 있습니다.

콘솔 패널 열기

Control+Shift+J 또는 Command+Option+J (Mac)를 누릅니다.

콘솔

명령어 메뉴에서 콘솔을 열려면 Console를 입력한 다음 옆에 패널 배지가 있는 콘솔 표시 명령어를 실행합니다.

콘솔 패널을 표시하는 명령어입니다.

창에서 콘솔 열기

Esc를 누르거나 Customize And Control DevTools DevTools 맞춤설정 및 제어를 클릭한 다음 Show Console Drawer를 선택합니다.

콘솔 창을 표시합니다.

DevTools 창 하단에 창이 열리고 Console 탭이 열려 있습니다.

창의 콘솔 탭

명령어 메뉴에서 콘솔 탭을 열려면 Console를 입력한 다음 옆에 창 배지가 있는 콘솔 표시 명령어를 실행합니다.

창에 콘솔 탭을 표시하는 명령어입니다.

콘솔 설정 열기

콘솔 오른쪽 상단에서 설정 콘솔 설정을 클릭합니다.

콘솔 설정으로 이동하세요.

아래 링크에서 각 설정에 대해 설명합니다.

콘솔 사이드바 표시 콘솔 사이드바를 표시합니다.를 클릭하여 필터링에 유용한 사이드바를 표시합니다.

콘솔 사이드바

메시지 보기

이 섹션에는 메시지가 콘솔에 표시되는 방식을 변경하는 기능이 포함되어 있습니다. 실습 둘러보기는 메시지 보기를 참고하세요.

메시지 그룹화 사용 중지

Console 설정을 열고 유사한 그룹을 사용 중지하여 Console의 기본 메시지 그룹화 동작을 중지합니다. 관련 예는 XHR 및 가져오기 요청 로그를 참조하세요.

중단점에서 메시지 보기

콘솔은 다음과 같은 방식으로 중단점에 의해 트리거된 메시지를 표시합니다.

Console에는 조건부 중단점과 로그 지점에서 생성된 메시지가 표시됩니다.

Sources 패널에서 인라인 중단점 편집기로 이동하려면 중단점 메시지 옆의 앵커 링크를 클릭합니다.

스택 트레이스 보기

콘솔은 오류 및 경고에 대한 스택 트레이스를 자동으로 캡처합니다. 스택 트레이스는 오류 또는 경고를 유발한 함수 호출 (프레임) 기록입니다. 콘솔에는 역순으로 표시됩니다. 마지막 프레임이 맨 위에 있습니다.

스택 트레이스를 보려면 오류나 경고 옆에 있는 펼치기 아이콘 펼치기을 클릭합니다.

스택 트레이스

스택 트레이스에서 오류 원인 보기

콘솔은 스택 트레이스에 오류 원인의 체인이 있는 경우 이를 표시할 수 있습니다.

오류를 포착하고 다시 생성할 때 오류 원인을 지정하면 디버깅을 더 쉽게 할 수 있습니다. 콘솔이 원인 체인을 따라갈 때 각 오류 스택을 Caused by: 접두사와 함께 출력하므로 원래 오류를 찾을 수 있습니다.

일련의 오류로 인해 스택 트레이스에 'Caused by:' 접두사가 발생합니다.

비동기 스택 트레이스 보기

사용 중인 프레임워크에서 지원하거나 setTimeout와 같은 브라우저 예약 프리미티브를 직접 사용하는 경우 DevTools는 비동기 코드의 두 부분을 함께 연결하여 비동기 작업을 추적할 수 있습니다.

이 경우 스택 트레이스는 비동기 작업의 '전체 스토리'를 보여줍니다.

비동기 스택 트레이스

스택 트레이스에 알려진 서드 파티 프레임 표시

소스 맵에 ignoreList 필드가 포함되어 있으면 기본적으로 콘솔은 번들러 (예: webpack) 또는 프레임워크 (예: Angular)에서 생성된 소스의 서드 파티 프레임을 스택 트레이스에서 숨깁니다.

서드 파티 프레임을 포함한 전체 스택 트레이스를 보려면 스택 트레이스의 하단에서 N개의 프레임 더보기를 클릭합니다.

프레임을 N개 더 표시합니다.

전체 스택 트레이스를 항상 보려면 설정 설정 > 무시 ���록 > 알려진 서드 파티 스크립트를 무시 목록에 자동 추가 설정을 사용 중지하세요.

알려진 서드 파티 스크립트를 무시 목록에 자동으로 추가합니다.

XHR 및 가져오기 요청 로깅

콘솔 설정을 열고 XMLHttpRequests 로그를 사용 설정하여 모든 XMLHttpRequest 및 Fetch 요청을 콘솔에 로깅합니다.

XMLHttpRequest 및 Fetch 요청 로깅

위 예시의 상단 메시지는 콘솔의 기본 그룹화 동작을 보여줍니다. 아래 예는 메시지 그룹화를 사용 중지한 후 동일한 로그가 어떻게 표시되는지 보여줍니다.

그룹화 해제 후 로깅된 XMLHttpRequest 및 Fetch 요청의 형태입니다.

페이지 로드 시 메시지 유지

기본적으로 콘솔은 새 페이지를 로드할 때마다 지워집니다. 페이지 로드 시 메시지를 유지하려면 콘솔 설정을 열고 로그 보존 체크박스를 선택합니다.

네트워크 메시지 숨기기

기본적으로 브라우저는 네트워크 메시지를 콘솔에 로깅합니다. 예를 들어 다음 예의 상단 메시지는 404를 나타냅니다.

콘솔의 404 메시지

네트워크 메시지를 숨기려면 다음 단계를 따르세요.

  1. 콘솔 설정을 엽니다.
  2. 네트워크 숨기기 체크박스를 선택합니다.

CORS 오류 표시 또는 숨기기

교차 출처 리소스 공유 (CORS)로 인해 네트워크 요청이 실패하면 콘솔에 CORS 오류가 표시될 수 있습니다.

CORS 오류를 표시하거나 숨기려면 다음 단계를 따르세요.

  1. 콘솔 설정을 엽니다.
  2. 콘솔에 CORS 오류 표시 체크박스를 선택하거나 선택 해제합니다.

콘솔에 CORS 오류를 표시합니다.

콘솔이 CORS 오류를 표시하도록 설정되어 있는 경우 오류가 발생하면 오류 옆에 있는 다음 버튼을 클릭합니다.

네트워크 및 문제 버튼.

메시지 필터링

Console에서 메시지를 필터링하는 방법에는 여러 가지가 있습니다.

브라우저 메시지 필터링

콘솔 사이드바를 열고 사용자 메시지를 클릭하여 페이지의 JavaScript에서 전송된 메시지만 표시합니다.

사용자 메시지를 보는 중입니다.

로그 수준으로 필터링

DevTools는 대부분의 console.* 메서드 심각도 수준을 할당합니다.

다음과 같은 4가지 수준이 있습니다.

  • Verbose
  • Info
  • Warning
  • Error

예를 들어 console.log()는 Info 그룹에 있고 console.error()는 Error 그룹에 있습니다. Console API 참조에서는 적용 가능한 각 메서드의 심각도 수준을 설명합니다.

브라우저가 콘솔에 로깅하는 모든 메시지에는 심각도 수준이 있습니다. 관심 없는 모든 수준의 메일을 숨길 수 있습니다. 예를 들어 Error 메시지에만 관심이 있는 경우 다른 3개 그룹을 숨길 수 있습니다.

로그 수준 드롭다운을 클릭하여 Verbose, Info, Warning, Error 메시지를 사용 설정하거나 사용 중지합니다.

로그 수준 드롭다운입니다.

콘솔 사이드바를 표시합니다. 콘솔 사이드바를 열고 오류, 경고, 정보 또는 상세 출력을 클릭하여 로그 수준으로 필터링할 수도 있습니다.

사이드바를 사용하여 경고를 확인합니다.

URL로 메시지 필터링

url:와 URL을 차례로 입력하면 해당 URL에서 전송된 메일만 확인할 수 있습니다. url:을 입력하면 DevTools에 모든 관련 URL이 표시됩니다.

URL 필터.

도메인도 사용할 수 있습니다. 예를 들어 https://example.com/a.js 및 https://example.com/b.js가 메시지를 로깅하는 경우 url:https://example.com를 사용하면 이러한 두 스크립트의 메시지에 집중할 수 있습니다.

지정된 URL에서 모든 메시지를 숨기려면 -url: 뒤에 URL을 입력합니다(예: https://b.wal.co). 제외 URL 필터입니다.

제외 URL 필터. DevTools가 지정된 URL과 일치하는 모든 메시지를 숨깁니다.

콘솔 사이드바를 열고 사용자 메시지 섹션을 펼친 다음 집중하려는 메시지가 포함된 스크립트의 URL을 클릭하여 단일 URL의 메시지를 표시할 수도 있습니다.

특정 스크립트의 메시지 보기

다양한 컨텍스트의 메일 필터링

페이지에 광고가 있다고 가정해 보겠습니다. 광고가 <iframe>에 삽입되어 있으며 콘솔에서 많은 메시지를 생성하고 있습니다. 이 광고는 다른 자바스크립트 컨텍스트에 있으므로 메시지를 숨기는 방법 중 하나는 콘솔 설정을 열고 선택한 컨텍스트만 체크박스를 선택하는 것입니다.

정규 표현식 패턴과 일치하지 않는 메일 필터링

필터 입력란에 /[foo]\s[bar]/와 같은 정규 표현식을 입력하여 패턴과 일치하지 않는 메시지를 필터링합니다. 공백은 지원되지 않습니다. 대신 \s를 사용하세요. DevTools가 메시지를 로깅한 메시지 텍스트 또는 스크립트에서 패턴이 있는지 확인합니다.

예를 들어 다음은 /[gm][ta][mi]/와 일치하지 않는 모든 메시지를 필터링합니다.

/[gm][ta][mi]/와 일치하지 않는 메시지를 필터링합니다.

로그 메시지에서 텍스트를 검색하는 방법은 다음과 같습니다.

  1. 내장된 검색창을 열려면 Command+F (Mac) 또는 Ctrl+F (Windows, Linux)를 누릅니다.
  2. 막대에 쿼리를 입력합니다. 이 예시에서 쿼리는 legacy입니다. 쿼리 입력 선택사항으로 다음 작업을 수행할 수 있습니다.
    • 대소문자 일치. 대소문자 일치를 클릭하여 검색어를 대소문자를 구분합니다.
    • 정규식을 사용하여 검색하려면 정규식 버튼 정규 표현식 사용을 클릭합니다.
  3. Enter를 누릅니다. 이전 또는 다음 검색결과로 이동하려면 위쪽 또는 아래쪽 버튼을 누릅니다.

자바스크립트 실행

이 섹션에는 콘솔에서 JavaScript를 실행하는 것과 관련된 기능이 포함되어 있습니다. 실습 둘러보기는 JavaScript 실행을 참고하세요.

문자열 복사 옵션

콘솔은 기본적으로 문자열을 유효한 JavaScript 리터럴로 출력합니다. 출력을 마우스 오른쪽 버튼으로 클릭하고 다음 세 가지 복사 옵션 중에서 선택합니다.

  • JavaScript 리터럴로 복사. 적절한 특수문자를 이스케이프 처리하고 콘텐츠에 따라 문자열을 작은따옴표, 큰따옴표 또는 백틱으로 래핑합니다.
  • 문자열 콘텐츠를 복사합니다. 줄바꿈과 기타 특수문자를 포함하여 정확한 원시 문자열을 클립보드에 복사합니다.
  • JSON 리터럴로 복사. 문자열의 형식을 유효한 JSON으로 지정합니다.

복사 옵션

기록에서 표현식 재실행

위쪽 화살표 키를 눌러 이전에 Console에서 실행한 자바스크립트 표현식의 기록을 차례대로 살펴봅니다. 표현식을 다시 실행하려면 Enter 키를 누르세요.

Live Expressions를 통해 표현식의 값을 실시간으로 확인하기

콘솔에서 동일한 자바스크립트 표현식을 반복적으로 입력하는 경우 Live Expression을 만드는 것이 더 쉬울 수 있습니다. Live Expressions를 사용하면 표현식을 한 번 입력한 후 콘솔 상단에 고정할 수 있습니다. 표현식의 값은 거의 실시간으로 업데이트됩니다. 실시간 표현식을 사용하여 실시간으로 JavaScript 표현식 값 보기를 참조하세요.

Eager Evaluation 사용 중지

콘솔에서 JavaScript 표현식을 입력할 때 Eager Evaluation은 해당 표현식의 반환 값의 미리보기를 표시합니다. Console 설정을 열고 Eager Evaluation 체크박스를 사용 중지하여 반환 값 미리보기를 사용 중지합니다.

평가로 사용자 활성화 트리거

사용자 활성화는 사용자 작업에 따른 탐색 세션의 상태입니다. '활성' 상태는 사용자가 현재 페이지와 상호작용 중이거나 페이지 로드 이후 상호작용했음을 의미합니다.

모든 평가에서 사용자 활성화를 트리거하려면 콘솔 설정을 열고 체크박스입니다. Evaluate 트리거 사용자 활성화를 선택합니다.

기록에서 자동 완성 사용 중지

표현식을 입력할 때 Console의 자동 완성 팝업에 이전에 실행한 표현식이 표시됩니다. 이러한 표현식 앞에는 > 문자가 추가됩니다. 다음 예에서는 DevTools가 이전에 document.querySelector('a') 및 document.querySelector('img')를 평가했습니다.

기록의 표현식을 보여주는 자동 완성 팝업

기록의 표현식 표시를 중지하려면 Console 설정을 열고 기록에서 자동 완성 체크박스를 사용 중지합니다.

JavaScript 컨텍스트 선택

기본적으로 JavaScript 컨텍스트 드롭다운은 기본 문서의 탐색 컨텍스트를 나타내는 상단으로 설정됩니다.

자바스크립트 컨텍스트 드롭다운입니다.

페이지에 <iframe>에 삽입된 광고가 있다고 가정해 보겠습니다. 광고의 DOM을 조정하기 위해 자바스크립트를 실행하려고 합니다. 이렇게 하려면 먼저 자바스크립트 컨텍스트 드롭다운에서 광고의 탐색 컨텍스트를 선택해야 합니다.

다른 JavaScript 컨텍스트 선택

객체 속성 검사

콘솔은 지정한 JavaScript 객체의 대화형 속성 목록을 표시할 수 있습니다.

목록을 둘러보려면 콘솔에 객체 이름을 입력하고 Enter 키를 누릅니다.

DOM 객체의 속성을 검사하려면 DOM 객체의 속성 보기 단계를 따르세요.

Spot 소유 속성 및 상속된 속성

콘솔은 자체 객체 속성을 먼저 정렬한 다음 굵은 글꼴로 강조 표시합니다.

객체 속성 표시

프로토타입 체인에서 상속된 속성은 일반 글꼴입니다. 콘솔은 내장 객체의 해당 기본 접근자를 평가하여 객체 자체에 이를 표시합니다.

상속된 속성 표시

커스텀 접근자 평가

기본적으로 DevTools는 개발자가 만든 접근자를 평가하지 않습니다. 커스텀 접근자.객체에서 커스텀 접근자를 평가하려면 (...)를 클릭합니다. 평가된 커스텀 접근자입니다.

열거 가능한 속성 및 열거 불가능한 속성 포착

enumerable 속성은 색상이 밝습니다. 열거할 수 없는 속성은 ���겨집니다. enumerable 및 non-enumerable 속성입니다.enumerable 속성은 for … in 루프 또는 Object.keys() 메서드를 사용하여 반복할 수 있습니다.

클래스 인스턴스의 비공개 속성 스팟

Console은 # 접두사를 사용하여 클래스 인스턴스의 비공개 속성을 지정합니다.

클래스 인스턴스의 비공개 속성입니다.

또한 콘솔은 비공개 속성을 클래스 범위 밖에서 평가하는 경우에도 자동 완성할 수 있습니다.

비공개 속성 자동 완성입니다.

내부 자바스크립트 속성 검사

ECMAScript 표기법을 차용한 콘솔은 자바스크립트 내부의 일부 속성을 이중 대괄호로 묶습니다. 코드에서 이러한 속성과 상호작용할 수 없습니다. 그러나 이러한 구성요소를 검사하는 것이 유용할 수 있습니다.

여러 객체에 다음과 같은 내부 속성이 표시될 수 있습니다.

함수 검사

자바스크립트에서 함수는 속성이 있는 객체이기도 합니다. 하지만 콘솔에 함수 이름을 입력하면 DevTools에서 속성을 표시하는 대신 함수를 호출합니다.

자바스크립트 내부의 함수 속성을 보려면 console.dir() 명령어를 사용합니다.

함수의 속성 검사

함수에는 다음과 같은 속성이 있습니다.

  • [[FunctionLocation]]: 소스 파일의 함수 정의가 있는 줄의 링크입니다.
  • [[Scopes]]. 함수에서 액세스할 수 있는 값과 표현식을 나열합니다. 디버깅 중에 함수 범위를 검사하려면 로컬, 클로저, 전역 속성 보기 및 수정하기를 참고하세요.
  • 바인드된 함수에는 다음과 같은 속성이 있습니다.
    • [[TargetFunction]]. bind()의 타겟입니다.
    • [[BoundThis]]: this의 값입니다.
    • [[BoundArgs]]. 함수 인수의 배열입니다. 바인딩된 함수입니다.
  • 생성기 함수는 [[IsGenerator]]: true 속성으로 표시됩니다. 생성기 함수.
  • 생성기는 반복기 객체를 반환하며 다음과 같은 속성이 있습니다.
    • [[GeneratorLocation]]. 소스 파일에 있는 생성기 정의가 있는 줄로 연결되는 링크입니다.
    • [[GeneratorState]]: suspended, closed 또는 running.
    • [[GeneratorFunction]]: 객체를 반환한 생성기입니다.
    • [[GeneratorReceiver]]: 값을 받는 객체입니다. Iterator 객체를 제공합니다.

콘솔 지우기

다음 워크플로 중 하나를 사용하여 콘솔을 삭제할 수 있습니다.

  • Clear Console 명확하며을 클릭합니다.
  • 메시지를 마우스 오른쪽 버튼으로 클릭한 다음 Clear Console(콘솔 지우기)을 선택합니다.
  • 콘솔에 clear()를 입력한 다음 Enter를 누릅니다.
  • 웹페이지의 JavaScript에서 console.clear()를 호출합니다.
  • 콘솔에 포커스가 있을 때 Control+L을 누릅니다.