Chrome 개발자 도구 쉽게 마스터하기: DOM 조작 및 접근

개발자 도구

단축키

크롬 브라우저의 개발자 도구는 Window(Ctrl+Shift+I), MacOS(Cmd+Option+I)로 접근할 수 있습니다.

생략된 부분

개발자 도구를 이용해서 DOM 구조를 볼 때는 생략된 부분이 있을 수 있습니다.

예를 들어, 텍스트 노드는 그냥 텍스트로만 표현되고, 띄어쓰기만 있는 빈 노드는 나타나지 않습니다.

개발 중에는 대부분 요소 노드만 다루기 때문에 문제가 되지는 않지만, 우리 개발자들은 알고 있어야 하는 내용입니다.

하위 패널

개발자도구 Elements탭 하위 패널

Styles(스타일)

스타일 하위 패널은 선택한 요소에 적용된 CSS 스타일을 표시합니다. 해당 요소에 직접 적용된 스타일과 부모 요소나 CSS 규칙에서 상속된 스타일을 모두 보여줍니다. 여기서 스타일을 확인하고 수정할 수 있으며, 새로운 스타일을 추가하거나 기존 스타일을 비활성화하거나 삭제하며 실시간으로 스타일을 실험해볼 수 있습니다.

Computed(계산된 스타일)

계산된 스타일 하위 패널은 해당 요소에 적용된 모든 스타일을 고려한 최종 계산된 스타일을 표시합니다. 이에는 상속된 스타일과 CSS 규칙에서 가져온 스타일도 포함됩니다. 계산된 스타일 하위 패널은 읽기 전용으로 계산된 값들을 제공하며, 레이아웃 문제를 해결하거나 스타일이 어떻게 결정되는지를 이해하는 데 도움을 줍니다.

Layout(레이아웃)

레이아웃 하위 패널은 페이지 레이아웃 내에서 요소의 위치와 크기에 대한 정보를 제공합니다. 요소의 크기 (너비와 높이), 박스 모델 속성 (여백, 패딩, 테두리), 위치 속성 (위치, 위쪽, 왼쪽 등), 그리고 문서 흐름 내에서 요소의 계산된 위치 등의 세부 정보를 표시합니다.

Event Listeners(이벤트 리스너)

이벤트 리스너 하위 패널은 선택한 요소에 연결된 모든 이벤트 핸들러를 표시합니다. 이벤트의 종류, 해당 이벤트와 관련된 함수 또는 코드, 그리고 이벤트 핸들러가 정의된 소스 파일이 표시됩니다. 이 패널을 통해 페이지에서 이벤트 처리를 검사하고 디버깅할 수 있으며, 이벤트가 어떻게 트리거되고 어떤 작업이 수행되는지를 이해할 수 있습니다.

콘솔로 DOM 다루기

개발자 도구 상단의 화살표 버튼(Select an element in the page to inspect it)을 누른 후 요소(Element)를 선택하면 마지막에 선택했던 요소는 $0이 됩니다. 그 이전에 선택했던 요소는 $1로 접근 가능합니다.

기존 naver.com 화면

개발자도구의 console 창으로 DOM에 접근한 화면

위의 사진을 보시면 개발자 도구 콘솔창의 $0과 $1을 통해 DOM에 접근했고, 네이버 홈페이지의 요소들의 색깔을 변경한 모습을 볼 수 있습니다.

 

DevTools에서 변경한 사항은 일시적이며 페이지를 새로고침해도 지속되지 않는다는 점을 기억하세요. 변경 사항을 저장하려면 서버 측에서 실제 HTML 및 CSS 파일을 수정해야 합니다.