사용자가 브라우저 콘솔을 열려고 하는 가장 일반적인 이유는 페이지 편집, 깨진 인터페이스 요소, 오작동 블록 광고 다른 유형의 JavaScript 오류 및 충돌 문제를 식별하기 위한 것입니다. 그러나 각 브라우저에는 궁극적으로 콘솔을 열고 방문한 웹페이지의 백엔드를 볼 수 있는 고유한 바로 가기와 단계가 있습니다.
시장 점유율이 5% 이상인 브라우저는 단 4개(Chrome, Safari, Edge 및 Firefox)뿐이므로 각 브라우저에서 콘솔을 여는 다양한 방법을 보여 드리겠습니다. 그러나 각 브라우저에서 요소와 오류는 일반적으로 색상으로 구분되고 레이블이 다르게 지정됩니다.
Google 크롬에서 콘솔을 여는 방법
Chrome에는 내장된 콘솔을 열 수 있는 세 가지 방법이 있습니다.
사용 중인 Chrome 빌드에 관계없이 다음 단축키 중 하나를 사용하여 내장 콘솔을 열고 닫을 수 있습니다.
- F12
- Ctrl + Shift + J(Mac의 경우 Cmd + Option + J)
동일한 바로 가기를 사용하여 콘솔을 숨길 수도 있습니다. 기본적으로 Chrome의 콘솔은 화면의 정확히 절반을 차지하지만 가운데에 있는 슬라이더를 통해 비율을 쉽게 조정할 수 있으며 다음에 콘솔을 열 때 브라우저가 수정 사항을 기억합니다.
특정 요소에 초점을 맞추려면 마우스로 강조 표시한 다음 해당 요소를 마우스 오른쪽 버튼으로 클릭> 검사하면 됩니다. 그러면 요소가 열립니다. 탭 및 스타일 콘솔의 탭을 사용하여 현재 요소에 집중할 수 있습니다.
그러나 Google Chrome의 GUI 메뉴를 통해 콘솔에 액세스할 수도 있습니다. 이렇게 하려면 오른쪽 상단 모서리에 있는 작업 버튼을 클릭하고 추가 도구> 개발자 도구로 이동합니다. .
최대한 효율적으로 작업하려는 경우 사용할 수 있는 Chrome 콘솔 바로 가기 목록이 있습니다.
Google Microsoft Edge에서 콘솔을 여는 방법
다른 모든 브라우저와 마찬가지로 Microsoft Edge에는 대화형 디버깅 또는 임시 테스트를 수행하는 개발자를 위한 콘솔 도구도 있습니다.
이 도구는 방문 중인 웹페이지와 관련된 정보를 기록합니다. 자바스크립트, 네트워크 요청 및 보안 오류와 관련된 정보를 찾을 수 있습니다.
Microsoft Edge에서 콘솔 도구를 여는 쉬운 방법은 미리 정의된 바로 가기(F12 키 ).
그러나 작업 버튼(왼쪽 상단 모서리)> 추가 도구> 개발자 도구를 클릭하여 GUI 메뉴를 통해 수행할 수도 있습니다. .
다른 브라우저의 기능과 유사하게 Microsoft Edge에서도 기본 제공 콘솔을 사용하여 특정 요소를 검사할 수 있습니다. 이렇게 하려면 요소를 선택하고 마우스 오른쪽 버튼으로 클릭하고 요소 검사를 선택하기만 하면 됩니다.
다음은 Microsoft Edge의 기본 제공 콘솔 내에서 사용할 수 있는 몇 가지 유용한 바로 가기 목록입니다.
| 포커스 모드에서 콘솔 시작 | Ctrl + Shift + J |
| 콘솔로 전환 | Ctrl + 2 |
| 다른 DevTools 탭에서 콘솔 표시 또는 숨기기 | Ctrl + ` (뒤로 틱) |
| 실행(한 줄 명령) | 입력 |
| 실행하지 않고 줄 바꿈(여러 줄 명령) | 시프트 + 입력 또는 Ctrl + 입력 |
| 모든 메시지의 콘솔 지우기 | Ctrl + L |
| 로그 필터링(검색창에 포커스 설정) | Ctrl + F |
| 자동 완성 제안 수락(포커스 상태일 때) | 입력 또는 탭 |
| 이전/다음 자동 완성 제안 | 위쪽 화살표 키 /아래쪽 화살표 키 |
Mozilla Firefox에서 콘솔을 여는 방법
Mozilla Firefox의 내장 콘솔은 지금까지 분석한 다른 콘솔과 약간 다르게 작동합니다. 이것이 의미하는 바는 브라우저 화면을 반으로 나누는 대신 독립 실행형 창에서 자동으로 열립니다.
이렇게 하면 보조 화면이 있는 사람들에게 보다 생산적인 접근 방식이 가능하지만 하나의 작은 화면으로 작업해야 하는 사용자에게는 방해가 될 수 있습니다. (이 시나리오에 있는 경우 Alt + Tab 단축키를 사용하여 Firefox와 연결된 브라우저 콘솔 사이를 앞뒤로 순환할 수 있습니다.
Mozilla Firefox에서 내장 브라우저 콘솔을 열려면 다음 세 가지 옵션이 있습니다.
- 범용 단축키 – Ctrl + Shift + J를 사용할 수 있습니다. (또는 Cmd + Shift + J Mac에서)
- 작업 메뉴에서 열 수 있습니다. - 작업 메뉴> 웹 개발자> 브라우저 콘솔을 클릭하여 열 수 있습니다. .
- 또는 명령줄에서 Firefox를 실행하고 '-jsconsole' 인수를 전달하여 브라우저 콘솔이 직접 열리도록 할 수 있습니다.
/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole
참고: Firefox에는 브라우저 콘솔과 매우 유사하지만 전체 브라우저가 아닌 단일 콘텐츠 탭에 적용되는 웹 콘솔도 포함되어 있습니다.
Google Safari에서 콘솔을 여는 방법
지금까지 살펴본 다른 모든 브라우저와 달리 Safari의 오류 콘솔은 기본적으로 비활성화되어 있습니다. 이 때문에 브라우저에서 활성화하려면 추가 단계를 수행해야 합니다.
이렇게 하려면 Safari를 열고 기본 설정을 클릭합니다. 탭. 환경설정에 들어가면 탭에서 고급 탭을 클릭하고 개발 항목 표시와 연결된 확인란을 선택합니다. 메뉴 모음의 메뉴입니다.
이제 콘솔을 표시했으므로 개발에 액세스하여 콘솔을 열 수 있습니다. 탭을 클릭하고 오류 콘솔 표시를 클릭합니다. .
Safari에는 오류 콘솔을 표시하는 동적 방법이 있습니다. 콘솔을 열었을 때 창이 작으면 완전히 다른 창에서 볼 수 있습니다.
페이지와 동일한 창에서 콘솔을 열려면 오류 콘솔을 열기 전에 브라우저 창이 전체 크기인지 확인해야 합니다.
