웹 개발자라면 브라우저의 개발자 도구에 익숙하실 거예요.
웹사이트의 오류를 디버깅하는 데 가장 중요한 도구라고 할 수 있어요.
webtoapp.design으로 만든 앱은 일반적으로 별도 설정 없이 바로 작동해요. 적어도 대부분의 경우 Android의 Chrome 및 iOS의 Safari에서 웹사이트가 작동하는 방식과 거의 동일하게 작동해요. 따라서 해당 브라우저에서 웹사이트가 정상적으로 작동한다면 문제가 많이 발생하지 않을 거예요.
하지만 가끔 앱의 예기치 않은 동작을 조사해야 할 때가 있어요. 이런 경우 앱에 내장된 콘솔을 열 수 있어요.
콘솔을 여는 방법
일반 앱 사용자가 실수로 콘솔을 열어 혼란을 겪지 않도록 콘솔을 여는 방법은 의도적으로 숨겨져 있어요. 하지만 사용자가 우연히 콘솔을 열더라도 앱을 닫았다가 다시 열면 콘솔이 사라져요.
설정 화면에서 콘솔 열기
- 먼저 앱의 설정을 여세요.
- "정보" 카드를 클릭하세요.
- 대화상자에 있는 작은 이미지를 두 번 탭하여 개발자 콘솔을 여세요.
- 이제 대화상자와 설정을 닫고 앱을 탐색하면서 콘솔을 사용할 수 있어요.
오류 신고 대화상자에서 콘솔 열기
앱에서 설정에 접근할 방법이 없다면 진단 정보 대화상자를 통해 콘솔을 열 수도 있어요.
- 기기를 흔들어 오류 신고 대화상자를 여세요.
- 대화상자의 제목을 두 번 탭하세요.
- 이제 대화상자를 닫고 앱을 탐색하면서 콘솔을 사용할 수 있어요.
앱 콘솔의 기능
URL 열기
대화상자에 URL을 입력해 원하는 웹사이트를 여세요. 기본 웹사이트에 링크가 없는 비공개 테스트 페이지나 스테이징 환경으로 이동할 때 유용할 수 있어요.
JS 실행
이 기능은 입력한 JavaScript를 실행하고 결과를 콘솔에 출력해요.
Eruda 추가
현재 보고 있는 페이지의 Eruda JavaScript 콘솔을 여는 작은 버튼을 추가해요. 컴퓨터의 브라우저 콘솔에서 사용하는 기능을 거의 모두 제공하며, 그 예로 DOM 트리 요소 탐색기가 있어요. Eruda에 관한 자세한 내용은 GitHub 프로젝트에서 확인할 수 있어요.
로그 복사
기록된 메시지는 읽고 분석하기가 다소 어려울 수 있으므로 이 버튼을 사용해 기록된 모든 텍스트를 복사한 다음 원하는 곳에 붙여넣을 수 있어요. 예를 들어 더 나은 텍스트 편집기가 있는 컴퓨터로 전송할 수 있어요.
