브라우저에는 개발자를 위한 강력한 도구가 숨어 있습니다. 바로 개발자도구(DevTools)입니다. 키보드 F12(또는 페이지 우클릭 → '검사')로 열 수 있습니다. AI가 만든 사이트가 이상하게 보일 때, 이 도구로 '실제로 무엇이 적용됐는지' 직접 들여다볼 수 있습니다.
가장 많이 쓰는 세 패널
| 패널 | 하는 일 |
|---|---|
| Elements(요소) | 현재 화면의 HTML과 적용된 CSS를 실시간으로 보고 임시 수정 |
| Console(콘솔) | 자바스크립트 에러·경고 메시지와 로그 확인 |
| Network(네트워크) | 페이지가 보낸 요청과 응답, 상태코드·로딩 시간 확인 |
Elements: 화면을 해부하기
Elements 패널에서 요소 위에 마우스를 올리면 화면의 어느 부분인지 파란색으로 표시됩니다. 요소를 클릭하면 오른쪽에 그 요소에 적용된 CSS가 모두 나옵니다. 값을 그 자리에서 바꿔 색이나 여백을 즉석에서 실험해 볼 수 있습니다.
Console: 에러를 읽는 창
자바스크립트에 문제가 생기면 Console에 빨간 글씨로 에러가 찍힙니다. 사이트가 '버튼이 안 눌려요' 같은 상태라면 가장 먼저 Console을 열어 빨간 메시지가 있는지 봐야 합니다. 에러 옆의 파일명과 줄 번호를 클릭하면 문제가 난 코드로 바로 이동합니다.
// Console 직접 입력도 가능
console.log('여기까지 실행됨');Network: 무엇을 주고받았나
Network 패널은 페이지가 불러온 모든 파일과 API 요청을 보여줍니다. 각 항목의 Status(상태코드)가 200이면 정상, 404면 파일을 못 찾은 것, 500이면 서버 오류입니다. 이미지가 깨지거나 데이터가 안 뜰 때 여기서 빨간 실패 항목을 찾으면 원인이 보입니다.
모바일 미리보기
개발자도구 위쪽의 기기 툴바(휴대폰 아이콘)를 켜면 다양한 화면 크기에서 사이트가 어떻게 보이는지 미리 볼 수 있습니다. 반응형이 잘 됐는지 확인할 때 유용합니다.
이해도 퀴즈 (10문항)
정답 6개 이상 → +100 XP배운 내용을 정확히 점검해 보세요. 10문항 중 6문항 이상 맞히면 챕터가 완료되고 경험치(XP)가 적립됩니다. 난이도는 문항마다 하·중·상으로 섞여 있어요.