브라우저 콘솔을 열고자 하는 사용자의 가장 흔한 이유는 페이지 편집 문제, 깨진 인터페이스 요소, 오작동하는 블록, 그리고 각종 자바스크립트(JavaScript) 오류와 충돌을 진단하기 위해서입니다. 하지만 브라우저마다 고유한 단축키와 실행 절차가 있어, 웹페이지의 내부 동작을 확인하려면 각 브라우저에 맞는 방법을 알아두는 것이 좋습니다.
현재 시장 점유율 5%를 넘는 브라우저는 크롬(Chrome), 사파리(Safari), 엣지(Edge), 파이어폭스(Firefox) 네 가지입니다. 이 글에서는 각 브라우저별로 콘솔을 여는 여러 가지 방법을 소개합니다. 단, 브라우저마다 요소와 오류를 표시하는 색상 체계와 라벨 명명 방식이 다르다는 점은 미리 참고하세요.
구글 크롬(Google Chrome)에서 콘솔 여는 방법
크롬에는 내장 콘솔을 여는 방법이 세 가지 있습니다.
사용 중인 크롬 빌드 버전과 관계없이 아래 단축키로 내장 콘솔을 열거나 닫을 수 있습니다:
- F12
- Ctrl + Shift + J (Mac에서는 Cmd + Option + J)
동일한 단축키로 콘솔을 숨길 수도 있습니다. 기본적으로 크롬 콘솔은 화면의 정확히 절반을 차지하지만, 가운데 슬라이더로 비율을 손쉽게 조절할 수 있으며, 브라우저는 다음에 콘솔을 열 때도 이 설정을 기억합니다.
특정 요소에 집중하고 싶다면 해당 요소 위에서 우클릭한 후 '검사(Inspect)'를 선택하세요. 그러면 콘솔의 요소(Elements) 탭과 스타일(Styles) 탭이 함께 열려 해당 요소를 집중적으로 분석할 수 있습니다.
또한 크롬의 GUI 메뉴를 통해서도 콘솔에 접근할 수 있습니다. 우측 상단의 작업 버튼(점 세 개)을 클릭한 뒤 '도구 더보기 > 개발자 도구'로 이동하면 됩니다.
더 효율적으로 작업하고 싶다면 크롬 콘솔 전용 단축키 목록을 함께 활용해 보세요.
마이크로소프트 엣지(Microsoft Edge)에서 콘솔 여는 방법
다른 브라우저와 마찬가지로 마이크로소프트 엣지에도 대화형 디버깅이나 임시 테스트를 위한 개발자용 콘솔 도구가 내장되어 있습니다.
이 도구는 현재 방문 중인 웹페이지와 관련된 정보를 기록하며, 자바스크립트 오류, 네트워크 요청, 보안 관련 문제 등을 확인할 수 있습니다.
엣지에서 콘솔 도구를 여는 가장 간단한 방법은 기본 제공 단축키(F12 키)를 사용하는 것입니다.
GUI 메뉴로도 실행할 수 있습니다. 작업 버튼(우측 상단의 점 세 개) > 도구 더보기 > 개발자 도구를 클릭하세요.
다른 브라우저와 유사하게 엣지 역시 내장 콘솔로 특정 요소를 검사할 수 있습니다. 원하는 요소를 우클릭한 후 '검사(Inspect Element)'를 선택하면 됩니다.
엣지 내장 콘솔에서 유용하게 쓸 수 있는 단축키 목록은 다음과 같습니다:
| 포커스 모드로 콘솔 실행 | Ctrl + Shift + J |
| 콘솔 탭으로 전환 | Ctrl + 2 |
| 다른 DevTools 탭에서 콘솔 표시/숨기기 | Ctrl + ` (백틱) |
| 명령 실행 (한 줄 입력) | Enter |
| 실행 없이 줄바꿈 (여러 줄 입력) | Shift + Enter 또는 Ctrl + Enter |
| 콘솔의 모든 메시지 지우기 | Ctrl + L |
| 로그 필터링 (검색창으로 포커스 이동) | Ctrl + F |
| 자동 완성 제안 수락 (포커스 상태일 때) | Enter 또는 Tab |
| 이전/다음 자동 완성 제안 | 위쪽 화살표 키/아래쪽 화살표 키 |
모질라 파이어폭스(Mozilla Firefox)에서 콘솔 여는 방법
파이어폭스의 내장 콘솔은 앞서 살펴본 브라우저들과 조금 다르게 작동합니다. 브라우저 화면을 반으로 나누는 대신, 콘솔이 별도의 독립 창으로 자동 열린다는 점이 특징입니다.
듀얼 모니터 환경에서는 오히려 생산성이 높아지지만, 작은 화면 하나로 작업해야 하는 사용자에게는 불편할 수 있습니다. 이 경우 Alt + Tab 단축키로 파이어폭스와 브라우저 콘솔 창 사이를 빠르게 전환할 수 있습니다.
파이어폭스에서 내장 브라우저 콘솔을 여는 방법은 세 가지입니다:
- 공용 단축키 사용 – Ctrl + Shift + J (Mac에서는 Cmd + Shift + J)
- 메뉴에서 열기 – 메뉴 버튼 클릭 > 웹 개발자(Web Developer) > 브라우저 콘솔(Browser Console)
- 또는 명령줄에서 '-jsconsole' 인수를 붙여 파이어폭스를 실행하면 브라우저 콘솔을 바로 강제 실행할 수 있습니다:
/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole
참고: 파이어폭스에는 브라우저 콘솔과 매우 유사하지만 브라우저 전체가 아닌 개별 콘텐츠 탭에 적용되는 '웹 콘솔(Web Console)'도 함께 제공됩니다.
사파리(Safari)에서 콘솔 여는 방법
지금까지 살펴본 다른 브라우저들과 달리, 사파리의 오류 콘솔(Error Console)은 기본적으로 비활성화되어 있습니다. 따라서 사용하려면 먼저 설정을 활성화하는 추가 단계가 필요합니다.
사파리를 연 뒤 '환경설정(Preferences)'을 클릭합니다. 환경설정 창에서 '고급(Advanced)' 탭으로 이동한 후 '메뉴 막대에서 개발자용 메뉴 보기(Show Develop menu in menu bar)' 항목에 체크하세요.
콘솔 메뉴가 표시되면, 이제 상단의 '개발자용(Develop)' 메뉴로 이동한 후 '오류 콘솔 보기(Show Error Console)'를 클릭해 콘솔을 열 수 있습니다.
사파리는 오류 콘솔을 동적으로 표시한다는 점에 유의하세요. 콘솔을 열 당시 브라우저 창 크기가 작으면, 콘솔이 완전히 별도의 창으로 나타납니다.
페이지와 같은 창 안에서 콘솔을 열고 싶다면, 오류 콘솔을 열기 전에 브라우저 창이 최대화(전체 크기) 상태인지 먼저 확인해야 합니다.
