Console의 메시지 로그

Kayce Basques
Kayce Basques
X GitHub

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

콘솔의 메시지

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

데모 및 DevTools 설정

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

  1. 데모를 엽니다.

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

    왼쪽에는 튜토리얼이, 오른쪽에는 데모가 있습니다.

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

    DevTools가 데모 오른쪽에 열립니다.

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

    데모 하단에 도킹된 DevTools: 데모 하단에 고정된 DevTools

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

JavaScript에서 로깅된 메시지 보기

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

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

    로그 정보를 클릭한 후의 콘솔

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

    log.js:2를 클릭하면 DevTools에서 Sources 패널이 열립니다.

    페이지의 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는