[디버깅] debugging

최현석·2022년 3월 8일
0

디버깅 (Debugging)

디버깅은 개발 단계에서 발생하는 버그의 원인을 찾아내고 수정하는 작업이다.

코드를 잘 작성하는것도 중요하지만, 문제의 원인을 빠르게 찾고 수정하는 것도 개발자에게 매우 중요한 역량이다.


1. 모바일 디버깅, device mode

device mode를 통해 각 환경에 대한 결과가 정상으로 표출되더라도, 실제 환경에서 사이트가 정상적으로 렌더링된다고 확신 할 수 없다.

기기마다 엔진이 다르며 환경적 요인이 다르기 때문이다.

그래서 크롬 개발자도구에서는 실제 안드로이드 기기에서 원격으로 개발자 도구를 사용할 수 있는 Remote debugging 기능을 제공한다.

실제 서비스 환경에서는 이런 기능 뿐만 아니라 안드로이드, iOS 시뮬레이터를 활용하거나 다양한 실 기기와 테스트 도구를 통해 검증한 뒤 서비스를 제공한다.


2. Elements Tab

Elements탭을 이용한다. elements 탭에서는 DOM 과 CSS를 자유롭게 확인하여 수정할 수 있다.

각 요소의 이벤트나 computed 스타일, 프로퍼티 등을 쉽게 파악할 수 있다.

2.1. elements 탭을 이용해 문제를 해결하는 순서

  1. 잘못된 프로퍼티가 반영된 요소에서 어떤 프로퍼티가 적용되었는지, 그 프로퍼티는 어디에 작성되었는지 출처를 파악한다.

  2. 원하는 프로퍼티를 요소에 직접 작성해 보고 제대로 노출되는지, 다른 요소에 영향이 없는지 확인한다.

  3. 문제가 없다면 CSS 코드를 수정한다.

2.2. 예시

최종적으로 어떤 스타일이 적용되었는지 computed를 활용해서 확인한다.

의도한 바와 다른 값이 들어가 있다면 더 높은 명시도를 가진 코드가 있다는 것이다.

해당 computed 속성을 클릭해 영향을 주는 스타일의 출처를 확인한다.

만약 bootstrap 같은 스타일 위에서 작성하게 된다면,

사용자가 정의한 css 파일을 부트스트랩 이후로 이동시킨다.

두 스티일 시트에 정의된 스타일이 같은 명시도 점수일 경우 뒤에 나오는 css파일의 우선순가 높기 때문이다.


3. 이벤트 디버깅, event listeners

Event Listeners 메뉴는 요소에서 발생할 수 있는 모든 이벤트 종류와 정보를 보여준다.

상위 요소나 하위 요소에 걸려있는 이벤트라고 하더라도, 캡처링/버블링을 통해 해당 요소에서 이벤트가 발생한다면 elements 탭 하위의 Event Listeners 메뉴에서 볼 수 있다.

이런 정보를 이용하면 이벤트가 갑자기 중단되거나 다른 동작이 발생했을 경우 빠르게 원인을 찾을 수 있다.


이 글은 기초부터 완성까지 프런트엔드 책을 학습하며 핵심 정리한 내용입니다.


profile
노력과 성장을 기록합니다.

0개의 댓글