17강. 디버깅: 개발자 도구로 HTML·CSS·JavaScript 문제 찾기

?1. 이번 강의에서 해결할 문제

“모달이 안 열립니다”만으로는 HTML 선택자, CSS 숨김, JavaScript 예외, 누락 파일 중 원인을 알 수 없습니다. 같은 증상을 재현하고 패널별 증거를 찾습니다.

✓2. 학습 목표

✓이번 강의를 마치면

• Elements·Console·Sources·Network의 역할을 구분합니다.
• 오류 원문과 첫 실패 줄을 기록합니다.
• 중단점으로 이벤트 당시 값과 DOM 상태를 확인합니다.

◇3. 핵심 개념

HTML·CSS는 Elements와 Computed, JavaScript는 Console과 Sources, 파일 경로·용량은 Network에서 시작합니다. 수정 전에 재현 절차, 기대 결과, 실제 결과를 남기고 첫 오류부터 조사합니다. 로그에 문의 내용, 개인정보, 토큰을 출력하지 않습니다.

✎4. 단계별 실습

JavaScript · 잘못된 선택자를 잠시 재현

game-dev-portfolio/js/app.js

const brokenGrid = document.querySelector('#projectGird'); // 의도적인 오타
console.assert(brokenGrid, 'project grid를 찾지 못했습니다. id를 확인하세요.');

Console 메시지를 확인한 뒤 #projectGrid로 고칩니다.

디버거 작업

1. Sources에서 projectFilters 클릭 리스너 첫 줄에 중단점을 둡니다.
2. Unreal 버튼을 클릭합니다.
3. Scope에서 event.target, button.dataset.filter, activeFilter를 봅니다.
4. Step over 후 카드 수와 상태 문구를 확인합니다.

PowerShell · 실행 위치: D:\Projects\game-dev-portfolio

Get-Location
Get-ChildItem .\assets\images

예상 결과: 실제 실행 위치와 이미지 파일명이 HTML 경로와 일치합니다. Network 확인: 새로 고침 후 404 요청이 없어야 합니다.

→5. 코드가 동작하는 이유

querySelector는 선택자가 없으면 예외 대신 null을 반환합니다. console.assert가 가정을 명시하고 중단점은 이벤트가 발생한 순간의 실제 값과 호출 흐름을 보존합니다.

!6. 자주 하는 실수와 해결법

!자주 하는 실수

• 무작정 코드 수정: 재현과 첫 오류를 먼저 기록합니다.
• Console만 보고 CSS 문제도 추측: 패널을 증상 종류에 맞게 선택합니다.
• 반복 이벤트마다 전체 DOM 로그: 필요한 값과 상태 전환만 출력합니다.
• 로그에 폼 입력·토큰 포함: 민감 정보는 기록하지 않습니다.

✎7. 직접 실습

✎직접 실습

이미지 경로, CSS 클래스, JavaScript 선택자 중 하나를 의도적으로 틀리세요. 기대·실제 결과, 첫 오류, 사용한 패널, 수정과 재검증을 문서로 남깁니다.

?8. 이해 점검 질문 3개

?이해 점검

1. 스타일이 적용되지 않을 때 먼저 볼 패널은 무엇인가요?
2. 중단점이 반복 로그보다 유리한 상황은 언제인가요?
3. 오류가 여러 개면 첫 오류부터 보는 이유는 무엇인가요?

■9. 핵심 요약

■핵심 요약

증상을 재현하고 HTML·CSS·JavaScript·네트워크에 맞는 패널에서 첫 실패를 찾습니다. 추측보다 실제 값과 요청 결과를 증거로 사용합니다.