2장 검사를 이용한 오류 확인

프로그램이 원하지 않는 방향으로 동작하는 것을 일반적으로 버그라고 합니다.

버그를 잡는(수정하는) 행위를 디버그 라고 합니다.

과거 HTML 페이지는 디버그를 하기가 어려웠습니다. 하지만 지금은 웹 브라우저에 검사 기능이 추가되어 쉽게 디버그를 수행할 수 있습니다. 크롬을 열고 F12 또는 Ctrl + Shift + I를 누르거나 웹 페이지에서 마우스 오른쪽 버튼을 클릭해 [검사] 메뉴를 선택합니다.ㅏ

이렇게 하면 검사가 실행됩니다. 검사 기능은 다양하지만 이 책에서는 [Elements] 탭과 [Console] 탭만 사용합니다.

[Elements] 탭을 사용하면 현재 HTML 페이지의 계층 구조를 알 수 있습니다. 또, 각 태그에 적용된 스타일도 한눈에 파악할 수 있습니다. 이 책을 진행하면서 차근차근 사용할 것입니다.

[Console] 탭은 오류를 확인하거나 자바스크립트 코드를 추가로 입력할 때 사용합니다. 이전 절에서 자바스크립트 코드가 정상적으로 동작하지 않았다면 무엇이 문제인지 검사로 직접 확인해 보세요. 오류가 발생한 원인과 위치를 알려 주므로 쉽게 고칠 수 있을 것입니다.

검사를 처음 사용할 때는 낯설고 어려울 수 있지만 사용하다 보면 점점 빠른 속도로 오류 없는 웹 페이지를 개발할 수 있습니다. 인터넷에 있는 모든 웹 페이지를 대상으로 검사를 실행할 수 있으므로 다른 웹 페이지는 어떻게 만들었는지 차근차근 분석해 보세요. 금세 개발 실력이 늘어날 것입니다.