웹페이지에서 JavaScript가 예상대로 동작하지 않을 때는 콘솔 메시지와 오류를 확인해야 합니다.
데스크톱 브라우저에서는 브라우저 개발자 도구를 열어 이를 확인할 수 있습니다. 그러나 모바일 브라우저에서는 같은 방법을 사용하기 어렵습니다.
iPhone과 iPad의 Safari 페이지를 자세히 검사하려면 일반적으로 기기를 Mac에 연결하고 Web Inspector를 활성화해야 합니다. Android Chrome에서도 원격 디버깅을 사용하려면 개발자 옵션과 USB 디버깅을 설정하고 다른 컴퓨터에서 Chrome 개발자 도구를 열어야 합니다.
자세한 원격 디버깅 방법은 다음 공식 문서에서 확인할 수 있습니다.
- iPhone과 iPad Safari: Inspecting iOS and iPadOS
- Android Chrome: Remote debug Android devices
이러한 방법은 자세한 디버깅에 유용하지만, 다른 컴퓨터와 연결 과정이 필요합니다. 모바일 기기 하나만으로 웹페이지를 만들려는 경우에는 간단한 콘솔 출력을 확인하기 위해 별도의 컴퓨터를 연결하는 과정이 부담스러울 수 있습니다.
에스페이지의 콘솔 영역은 이러한 환경에서 유용합니다.
에스페이지의 콘솔 영역은 모바일 브라우저처럼 브라우저 개발자 도구를 바로 열기 어려운 환경에서 미리보기의 JavaScript 콘솔 출력을 확인하기 위한 기능입니다.
에스페이지 에디터에서는 별도의 프로그램을 설치하거나 다른 컴퓨터에 연결하지 않아도 콘솔의 결과를 확인할 수 있습니다.
콘솔 영역 열기
에디터 상단의 콘솔 아이콘을 선택하면 콘솔 영역을 열거나 닫을 수 있습니다.
콘솔에는 미리보기에서 실행되는 페이지의 메시지와 JavaScript 오류가 표시됩니다.
콘솔을 사용하려면 먼저 확인할 페이지를 미리보기로 여세요.
- 파일 탐색기에서 확인할 페이지 파일을 찾습니다.
- 파일을 마우스 오른쪽 버튼으로 클릭합니다.
- 미리보기(Preview)를 선택합니다.
- 에디터 상단의 콘솔 아이콘을 선택합니다.
- 미리보기를 다시 불러오거나 확인하려는 동작을 실행합니다.
- 콘솔 영역에서 메시지를 확인합니다.
미리보기에서 페이지를 다시 불러오거나 다른 페이지로 이동하면 해당 페이지의 JavaScript가 다시 실행됩니다. 따라서 같은 메시지가 콘솔에 여러 번 표시될 수 있습니다.
미리보기의 콘솔 출력 확인하기
에디터의 콘솔 영역에서는 미리보기 페이지에서 발생하는 다음과 같은 내용을 확인할 수 있습니다.
console.log()로 출력한 일반 메시지- JavaScript 실행 중 발생한 오류
콘솔 영역은 에스페이지에서만 사용하는 별도의 JavaScript 기능이 아닙니다. 웹 표준의 Console API를 통해 출력되는 내용을 에디터 안에서 확인할 수 있도록 만든 영역입니다.
Console API와 console.log(), console.warn(), console.error() 등의 사용 방법은 다음 문서를 참고하세요.
에디터 콘솔과 브라우저 개발자 도구
에스페이지의 콘솔 영역은 모바일 기기를 포함한 다양한 환경에서 콘솔 출력을 빠르게 확인하기 위한 기능입니다.
브라우저 개발자 도구를 완전히 대체하는 기능은 아닙니다.
| 구분 | 에스페이지 콘솔 | 브라우저 개발자 도구 |
|---|---|---|
| 주요 목적 | 미리보기의 콘솔 출력과 오류 확인 | 웹페이지의 구조와 실행 과정 상세 분석 |
| 사용 환경 | PC, 태블릿과 모바일 브라우저 | 주로 PC와 노트북의 데스크톱 브라우저 |
| 추가 연결 | 필요 없음 | 모바일 페이지 분석 시 다른 컴퓨터와 연결이 필요할 수 있음 |
| 확인 범위 | 기본적인 메시지와 JavaScript 오류 | HTML, CSS, 네트워크, 중단점, 저장소와 성능 정보 |
PC나 노트북에서 작업한다면 브라우저 개발자 도구를 사용해 더 자세한 내용을 확인할 수 있습니다.
다음과 같은 문제는 브라우저의 개발자 도구가 더 적합합니다.
- HTML 요소와 적용된 CSS 자세히 확인하기
- 네트워크 요청과 응답 분석하기
- JavaScript에 중단점 설정하기
- 브라우저 저장소와 쿠키 확인하기
- 성능과 접근성 분석하기
모바일 기기에서 간단한 실행 결과와 오류를 확인할 때는 에스페이지의 콘솔 영역만으로도 기본적인 디버깅을 진행할 수 있습니다.
민감한 정보를 출력하지 마세요
콘솔은 코드의 실행 결과와 데이터를 확인하는 데 유용하지만, 비밀번호나 인증 정보처럼 민감한 데이터를 출력하면 안 됩니다.
다음과 같은 정보는 콘솔에 표시하지 마세요.
- 비밀번호
- API 비밀 키
- 인증 토큰
- 사용자의 개인정보
- 결제 정보
콘솔 출력은 에스페이지 에디터에서만 볼 수 있는 비공개 기록이 아닙니다. 같은 코드가 공개 페이지에 적용되면 방문자도 브라우저 개발자 도구를 통해 출력 내용을 확인할 수 있습니다.
콘솔에 메시지가 표시되지 않을 때
콘솔에 예상한 메시지나 오류가 표시되지 않는다면 다음 내용을 확인하세요.
- 콘솔 영역이 열려 있는지
- 확인하려는 페이지가 미리보기로 열려 있는지
- 코드를 수정한 파일을 저장했는지
- 현재 미리보기에서 올바른 페이지를 확인하고 있는지
- 해당 JavaScript가 실제로 실행되는 상황인지
- 실행하려는 코드보다 앞에서 오류가 발생하지 않았는지
에디터 콘솔에는 공개 사이트가 아니라 개발 환경의 미리보기에서 발생한 내용이 표시됩니다.
다음 단계
콘솔 영역의 사용 방법을 이해했다면 다음 문서로 넘어가세요.
- 새 페이지와 URL을 만드는 방법: 페이지 만들기와 URL
- JavaScript로 외부 데이터를 가져오는 방법: 외부 API 사용하기
- 브라우저에서 직접 호출할 수 없는 API를 연결하는 방법: Proxy API
- 저장한 변경사항을 공개 사이트에 반영하는 방법: 저장, 공개와 적용