개발 기본
크롬 DevTools(Chrome DevTools)
크롬 DevTools는 브라우저에서 실행 중인 페이지의 화면 구조, 오류, 통신 내용을 살펴보는 개발자 도구입니다.
쉬운 설명
웹페이지가 보이지만 신청 버튼이 작동하지 않을 때, 브라우저 안에서 무슨 일이 일어났는지 확인할 수 있어요. 크롬 DevTools의 Console에서는 실행 중 발생한 오류를, Network에서는 서버로 보낸 요청과 응답을 살펴봐요. Elements에서는 화면을 구성하는 요소와 스타일을 확인해요. 프로젝트 파일을 고치는 IDE와 함께 쓰면서, 실제 브라우저의 상태를 조사하는 도구예요.
이런 상황에서 만나요
신청 버튼을 눌렀는데 “다시 시도해 주세요”만 나타난다고 해 볼게요. 개발자 도구의 Network를 열고 버튼을 다시 눌러, 어떤 요청이 기록되는지 살펴봐요.
신청 요청의 주소와 응답을 함께 읽어요
Name Status applications 400
Request Method: POST Request URL: https://study.example.com/api/applications Status Code: 400
{"error":"email is required"}- 1신청 버튼을 누른 직후 기록된 요청을 선택해요.
- 2어디로 어떤 요청을 보냈는지 확인해요.
- 3이 예시에서는 email 항목이 필요하다는 응답을 받았어요.
해당 요청을 선택해 Headers의 주소·상태와 Response의 응답 내용을 함께 읽어요. 아래 예시는 서버가 email 항목을 요구한다고 응답한 상황이에요. 요청에 그 항목을 보냈는지도 확인해야 원인을 좁힐 수 있어요. 요청 자체가 없다면 버튼 처리 코드와 Console의 오류부터 살펴봐요.
헷갈리기 쉬운 점
Elements에서 바꾸면 사이트 파일도 수정되나요?
보통은 현재 브라우저에서 보이는 상태만 바뀌어요. 새로고침하면 사라질 수 있으므로 실제 수정은 프로젝트 파일에 반영해야 해요. 파일 연결이나 변경 유지 기능을 별도로 설정한 경우는 구분해서 봐요.
오류 화면이나 요청 내용을 공유할 때는 쿠키·인증 토큰·개인정보가 포함됐는지 확인해요. 상태 코드 하나만 보고 원인을 확정하지 말고 요청과 응답 내용을 함께 살펴봐요.
왜 알아야 할까요?
AI에게 막연히 “안 돼요”라고 말하는 대신 실패한 주소, 상태 코드, 필요한 오류 문구를 전달할 수 있어요. 화면 문제와 서버 요청 문제 중 어디부터 살펴볼지도 정할 수 있어요.
조금 더 자세히
크롬 메뉴의 도구 더보기 → 개발자 도구에서 열거나, 페이지의 요소를 우클릭해 검사를 선택할 수 있습니다. Network 기록이 비어 있다면 도구를 연 뒤 페이지를 새로고침하거나 문제 행동을 다시 실행합니다.
Sources에서는 자바스크립트 실행을 중단점에서 멈추고 변수 값을 볼 수 있습니다. 패널 이름과 배치는 브라우저 언어·버전·설정에 따라 달라질 수 있습니다.
직접 사용할 때 확인해 보세요
- 도구를 연 뒤 문제 행동을 다시 실행한다
- 요청 주소·상태·응답을 함께 확인한다
- 공유할 기록에서 비밀값과 개인정보를 가린다
관계 지도
