한눈에 보는 정의
브라우저에 들어 있는 점검 도구로, 페이지의 구조·스타일·오류·네트워크 기록을 직접 볼 수 있다.
이런 말로 들어요
- 개발자 도구 콘솔에 빨간 오류가 뜨는지 캡처해 주실 수 있을까요?
- 개발자 도구에서 모바일 화면으로 확인해 보면 버튼이 잘립니다.
그림으로 보기
F12(맥은 Cmd+Option+I)로 열고, 콘솔 탭의 오류 메시지를 캡처하면 원인을 찾기 쉽습니다.
하캄솔루션 자체 제작 설명도식자세히 알아보기
크롬에서 F12(맥은 Cmd+Option+I)를 누르면 열립니다. 요소 탭에서는 HTML과 CSS를 확인하고 임시로 바꿔 볼 수 있고, 콘솔 탭에서는 오류 메시지를, 네트워크 탭에서는 이미지나 데이터가 얼마나 걸려 불러와지는지 볼 수 있습니다. 휴대폰 화면 크기로 보는 기능도 있어 모바일 화면을 PC에서 점검할 수 있습니다.
실무 예시
예를 들어 상담 버튼이 안 눌린다는 문의가 오면, 개발자 도구 콘솔 탭의 오류 메시지를 캡처해 개발자에게 보내면 원인을 빨리 찾을 수 있습니다.
함께 살펴볼 점
요소 탭에서 바꾼 내용은 내 화면에서만 임시로 바뀌고 실제 사이트에는 저장되지 않습니다. 모르는 사람이 콘솔에 코드를 붙여 넣으라고 하면 따르지 않습니다.
AI에게 이렇게 요청해 보세요
개발자 도구 콘솔에 나온 이 오류 메시지의 원인과 고치는 방법을 설명해 줘. (오류 메시지 붙여 넣기)
코딩·작성 도구에 붙여 쓰기 전에 내 상황에 맞게 바꾸고, 결과는 직접 확인하세요.출처와 검토 정보
- Chrome DevTools Overview 새 창
크롬 개발자 도구가 브라우저에 내장된 웹 개발 도구이며 여는 방법과 주요 패널을 확인했습니다.
자료 확인 - Open Chrome DevTools | Chrome for Developers 새 창
윈도우 F12·Ctrl+Shift+I, 맥 Cmd+Option+I로 개발자 도구를 여는 단축키를 확인했습니다.
자료 확인
내용 검토
최초 발행 · 내용 수정