브라우저의 개발자 콘솔에 액세스하는 방법

학습 내용

페이지 오류 및 경고를 기록하는 대부분의 최신 웹 브라우저의 표준 도구인 브라우저의 개발자 콘솔에 액세스하는 방법을 알아보세요. 개발자 콘솔은 기술 문제를 디버깅하는 데 유용할 수 있습니다.

클라비요 지원팀은 문제 해결을 지원하기 위해 브라우저의 개발자 콘솔에 있는 추가 정보를 요청할 수 있습니다. 개발자 콘솔에서 스크린샷 또는 로그를 요청하는 경우 아래 단계에 따라 선택한 브라우저에서 이 정보에 액세스하세요.

Chrome에서 열기

Chrome 메뉴 표시줄에서 Chrome 개발자 콘솔에 액세스할 수 있습니다:

1. Chrome 창을 엽니다.
2. Chrome 메뉴 표시줄에서 보기 메뉴를 엽니다.
3. 개발자 > 자바스크립트 콘솔을 선택하여 개발자 콘솔을 엽니다.
   

개발자 도구의 요소 검사 탭을 열어 JavaScript 콘솔로 이동할 수도 있습니다:

1. Chrome 창을 열고 웹페이지로 이동합니다.
2. 브라우저 창에서 웹 페이지를 마우스 오른쪽 버튼으로 클릭합니다.
3. 검사를 선택합니다.
4. 콘솔 탭으로 이동합니다.

또는 키보드 단축키 Option + Command + J (Mac) 또는 Control + Shift + J (PC)를 사용하여 콘솔을 바로 열 수 있습니다. 

콘솔 탭을 성공적으로 연 후 페이지를 새로 고치거나 기술적 문제의 원인이 되는 작업을 수행한 다음 콘솔 창에서 결과의 전체 스크린샷을 찍습니다.

Safari에서 열기 

Safari에서 개발자 콘솔에 액세스하려면 먼저 브라우저 환경설정에서 개발자 메뉴를 활성화해야 합니다.

1. Safari 메뉴 표시줄에서 Safari > 환경설정을 클릭합니다.
2. 고급 탭을 선택합니다.
3. 고급 탭의 메뉴 모음에서 개발 메뉴 표시를 클릭하여 개발자 콘솔에 쉽게 액세스할 수 있도록 합니다.

해당 메뉴가 활성화되면 메뉴 모음에서 개발자 콘솔에 액세스할 수 있습니다: 

1. Safari 창을 엽니다.
2. 메뉴 모음에서 개발 > 자바스크립트 콘솔 표시를 클릭합니다.
   

또는 키보드 단축키 Option + Command + C를 사용하여 콘솔을 바로 열 수 있습니다. 

콘솔 탭을 성공적으로 연 후 페이지를 새로 고치거나 기술적 문제의 원인이 되는 작업을 수행한 다음 콘솔 창에서 결과의 전체 스크린샷을 찍습니다.

Firefox에서 열기

1. Firefox 브라우저 창을 엽니다.
2. 오른쪽 상단 모서리에 있는 메뉴 버튼을 클릭합니다.
3. 추가 도구를 선택합니다.
4. 사용 가능한 옵션에서 웹 개발자 도구를 클릭합니다. 
   

Firefox에서 웹 콘솔을 여는 키보드 단축키는 Option + Command + K (Mac) 또는 Command + Shift + J (PC)입니다.

웹 콘솔을 성공적으로 연 후 페이지를 새로 고치거나 기술적 문제의 원인이 되는 작업을 수행한 다음 콘솔 창에서 결과의 전체 스크린샷을 찍습니다.

다른 브라우저에서 개발자 콘솔에 액세스하기

많은 브라우저에서 자체 개발자 도구 사용 방법에 대한 지침을 제공합니다. 위 지침에 포함되지 않은 브라우저를 사용하는 경우, 선호하는 브라우저의 설명서를 검색하여 보다 구체적인 지침을 확인하는 것이 좋습니다. 

추가 리소스

• 가입 양식 문제 해결
• 클라비요 API 시작하기