크롬으로 DOM 디버깅

기본적인 사용법은 공식 문서에서 확인할 수 있다. 이 글에서는 좋은 기능들을 정리해보고자 한다.

developer.chrome.com/docs/devtools/dom/

Get Started With Viewing And Changing The DOM - Chrome Developers

 

# 키보드로 DOM 탐색하기

크롬 디버거로 DOM을 디버깅하다 보면 손이 굉장히 바쁘다. 조금 더 편하게 디버깅하려면 키보드 arrow(화살표)를 활용하면 된다.

다음과 같은 디버거 상태에서 키보드를 사용해서 디버깅 할 수 있다. 화살표를 시계 순서대로 up, right, down, left라고 하겠다.

기준점은 현재 선택되어 있는 태그가 기준이 되는 것이 중요하다.

up) DOM에서 바로 위 태그로 이동. 

1. 디버거 상에서 바로 위에 있는 태그로 이동한다. 부모 태그가 될 수도 있고 형제 태그가 될 수도 있다.

right) 1->2->3 순서로 매칭되는 규칙을 찾아서 동작

1. 자식 태그가 펼쳐져있지 않다면 펼친다.

2. 자식 태그가 펼쳐져 있고 이동할 자식 태그가 있다면 자식 태그로 이동.

3. 자식 태그가 더 이상 없다면 아무 작동 없음.

down) up과 반대로 동작

left) 1->2->3 순서로 매칭되는 규칙을 찾아서 동작

1. 자식 태그가 펼쳐져 있다면 닫는다.

2. 자식 태그가 닫혀져 있고 부모 태그가 있다면 부모 태그로 이동

3. 부모 태그가 더 이상 없다면 아무 작동 없음.

 

# 바로 해당 태그로 이동시키기

디버거 상에서 DOM 트리가 큰 경우에 현재 view에서 안 보이는 경우가 생긴다. 이 때 디버거에서 바로 이동하는 기능이 존재한다. 현재 보고 있는 화면보다 위에 있는 경우에도 가능하다. 

페이지 최상단 부분이 현재 뷰인데 바로 footer 부분으로 이동하고 싶은 상황이라고 해보자. 이 때는 footer를 눌러도 해당 화면에서는 안 보이므로 이동하려면 스크롤을 꽤 많이 해야한다. 이 때 디버거의 footer 태그를 우클릭을 해서 'Scroll into view'를 누르면 알아서 footer 부분으로 view를 변경해준다. 

# 엘리먼트 숨기기

작업시 특정 부분을 숨겨보고 싶을 때 사용할 수 있다. 디버거 패널에서 엘리먼트를 클릭한 후 H 키를 누르면 숨겨진다. 엘리먼트를 우클릭한 후 hide element를 해도 동일하다.

# 크롬 디버거에서 콘솔 on-off

ESC 버튼을 누르면 하단의 콘솔을 키거나 끄도록 전환할 수 있다.

# 현재 선택된 노드를 콘솔에서 다루기

디버거에서 노드가 선택된 상태라면 콘솔에서 $0 키워드를 통해 현재 노드를 접근할 수 있다. $0 키워드 이후 점(.)을 치면 사용가능한 속성이 나오고 $0.innerText 같은 것들을 사용할 수 있다. 콘솔에서 $0까지만 써고 보면 view에서 하이라이트되어서 보인다.

 

이외에도 노드를 우클릭해보면 기능이 더 있으니 찾아보고 사용하면 되겠다.

 

# 태그 트리 구조 확인하기

Elements 패널에서 노드를 선택하면 다음과 같이 보인다. 이 중 사진 가장 아래 쪽에  html.banner--hide body div.scffold 부분이 있다.

현재 선택된 노드를 기준으로 DOM트리 구조 상 조상에 해당하는 태그를 보여준다. 이를 통해 현재 선택된 태그의 부모 태그와 조상 태그들을 차례대로 파악할 수 있다. 이 정보를 가지고 태그 구조가 잘못 되었는지 등을 확인할 수 있다.

 

# 렌더링 디버깅

 패널에서 세로로 점 세 개가 있는 부분을 누르면 다양한 옵션들이 나온다. 이 중 렌더링을 클릭하면 렌더링 탭이 보여진다.

렌더링 탭에 다양한 옵션들이 있다. Paint flashing을 체크하면 리페인트 될 때 하이라이팅을 해준다. 이외에도 다양한 디버깅 옵션들이 있으니 필요하다면 사용하면 좋다.