디버깅은 개발 단계에서 발생하는 버그의 원인을 찾아내고 수정하는 작업이다.
코드를 잘 작성하는것도 중요하지만, 문제의 원인을 빠르게 찾고 수정하는 것도 개발자에게 매우 중요한 역량이다.
device mode를 통해 각 환경에 대한 결과가 정상으로 표출되더라도, 실제 환경에서 사이트가 정상적으로 렌더링된다고 확신 할 수 없다.
기기마다 엔진이 다르며 환경적 요인이 다르기 때문이다.
그래서 크롬 개발자도구에서는 실제 안드로이드 기기에서 원격으로 개발자 도구를 사용할 수 있는 Remote debugging 기능을 제공한다.
실제 서비스 환경에서는 이런 기능 뿐만 아니라 안드로이드, iOS 시뮬레이터를 활용하거나 다양한 실 기기와 테스트 도구를 통해 검증한 뒤 서비스를 제공한다.
Elements
탭을 이용한다. elements 탭에서는 DOM 과 CSS를 자유롭게 확인하여 수정할 수 있다.
각 요소의 이벤트나 computed
스타일, 프로퍼티 등을 쉽게 파악할 수 있다.
잘못된 프로퍼티가 반영된 요소에서 어떤 프로퍼티가 적용되었는지, 그 프로퍼티는 어디에 작성되었는지 출처를 파악한다.
원하는 프로퍼티를 요소에 직접 작성해 보고 제대로 노출되는지, 다른 요소에 영향이 없는지 확인한다.
문제가 없다면 CSS 코드를 수정한다.
최종적으로 어떤 스타일이 적용되었는지 computed
를 활용해서 확인한다.
의도한 바와 다른 값이 들어가 있다면 더 높은 명시도를 가진 코드가 있다는 것이다.
해당 computed
속성을 클릭해 영향을 주는 스타일의 출처를 확인한다.
만약 bootstrap 같은 스타일 위에서 작성하게 된다면,
사용자가 정의한 css 파일을 부트스트랩 이후로 이동시킨다.
두 스티일 시트에 정의된 스타일이 같은 명시도 점수일 경우 뒤에 나오는 css파일의 우선순가 높기 때문이다.
Event Listeners
메뉴는 요소에서 발생할 수 있는 모든 이벤트 종류와 정보를 보여준다.
상위 요소나 하위 요소에 걸려있는 이벤트라고 하더라도, 캡처링/버블링을 통해 해당 요소에서 이벤트가 발생한다면 elements
탭 하위의 Event Listeners
메뉴에서 볼 수 있다.
이런 정보를 이용하면 이벤트가 갑자기 중단되거나 다른 동작이 발생했을 경우 빠르게 원인을 찾을 수 있다.
이 글은 기초부터 완성까지 프런트엔드
책을 학습하며 핵심 정리한 내용입니다.