DevTools의 새로운 스크롤 배지를 사용하면 스크롤 관련 문제를 더 쉽게 디버그할 수 있습니다. 이 게시물에서는 스크롤 가능한 요소의 정의, 이러한 요소를 찾기 어려운 이유, 이 새로운 기능을 사용하여 이러한 요소를 빠르게 찾는 방법을 설명합니다. 스크롤 배지를 개발한 과정을 살펴보는 비하인드 스토리도 확인해 보세요.
스크롤 가능한 요소란 무엇인가요?
요소 내의 콘텐츠를 스크롤할 수 있으면 스크롤 가능한 요소 (또는 스크롤 컨테이너)입니다. 스크롤 막대가 있는지 여부는 중요하지 않습니다.
스크롤 가능한 요소를 찾기 어려운 이유는 무엇인가요?
스크롤 문제를 디버그하는 것은 어렵습니다. 스크롤 가능한 요소를 명확하게 표시하는 도구가 없으면 특히 스크롤바가 없는 복잡한 페이지에서 쉽게 길을 잃을 수 있습니다.
스크롤하는 요소를 수동으로 찾는 것은 시행착오가 번거로운 과정일 수 있습니다.
- 요소를 선택하고 스타일을 수정합니다.
- 스크롤바가 사라졌나요? 그렇지 않으면 이 과정을 반복합니다.
스크롤 배지 소개
Chrome 130에서는 요소 패널의 새 스크롤 배지를 사용하여 스크롤 가능한 요소를 찾을 수 있습니다.
예를 들어 다음 예에서 새 스크롤 배지를 사용하여 스크롤바가 표시되는 요소를 찾아보세요.
새로운 스크롤 배지의 기술적 구현
구현은 다음 두 부분으로 나뉩니다.
- 스크롤 가능한 요소 식별
Blink’s(Chrome의 렌더링 엔진) 신호를 사용하여 스크롤 가능한 요소 또는 페이지 변경으로 인해 스크롤 가능해진 요소를 식별합니다. - 스크롤 배지 표시 신호를 수신하면 요소 패널의 스크롤 가능한 요소 옆에 기존 그리드 배지와 유사한 새 배지를 통합합니다.
스크롤 가능한 요소 식별
스크롤 가능한 요소를 식별하기 위해 Blink에서 IsUserScrollable 메서드를 활용했습니다. 이 메서드는 노드가 X축 또는 Y축을 따라 오버플로하는지 확인하여 노드가 스크롤 가능한지 확인합니다. 즉, 콘텐츠가 컨테이너 크기를 초과하여 스크롤할 수 있음을 나타냅니다. 스크롤 가능한 컨테이너를 식별하기 위해 DevTools에 새 요소가 로드될 때마다 이 메서드를 호출합니다.
이미 로드된 요소의 스크롤 가능 상태를 동적으로 업데이트하려면 Blink 렌더링 엔진 코드베이스를 깊이 파고들어 노드의 스크롤 가능한 영역이 추가되거나 삭제되는 위치를 추적해야 했습니다.
오버플로를 처리하는 핵심 로직은 PaintLayerScrollableArea 구성요소에 의해 관리됩니다. 특히 UpdateScrollableAreaSet 메서드는 오버플로가 발생했거나 해결되었을 때 이를 감지합니다.
이 정보는 ScrollableArea를 변경한 노드의 참조를 전송하여 DevTools 백엔드로 전달됩니다.
그러면 백엔드에서 IsUserScrollable 메서드를 사용하여 노드를 다시 확인하여 새 상태를 가져옵니다. 스크롤 가능성을 확인한 후 Chrome DevTools Protocol를 사용하여 프런트엔드로 신호가 전송되어 UI가 스크롤 가능한 콘텐츠의 변경사항을 정확하게 반영합니다.
스크롤 배지 표시
DevTools 프런트엔드에 새 배지를 추가하기 위해 ElementsTreeOutline에서 이벤트에 의해 스크롤 가능 상태를 변경한 요소의 nodeId를 수신하는 핸들러 메서드를 만들었습니다.
이 핸들러에서 nodeId를 사용하여 ElementsTreeElement 객체를 가져와 스크롤 배지를 업데이트하도록 지시합니다.
스크롤 배지를 업데이트하려면 요소가 스크롤 가능한지, 이미 스크롤 배지가 있는지 확인해야 합니다. 이러한 조건에 따라 다음과 같은 조치가 취해집니다.
- 요소를 스크롤할 수 있고 아직 스크롤 배지가 없는 경우 배지가 추가됩니다.
- 요소를 스크롤할 수 없지만 스크롤 배지가 있는 경우 기존 배지가 삭제됩니다.
스크롤 가능한 최상위 문서를 처리하는 특수 로직
최상위 문서를 스크롤할 수 있는 경우 기본 문서에는 #document 요소를 표시하지 않고 iframe에만 표시하므로 특수한 경우가 발생합니다. 따라서 #document 요소에 배지를 직접 표시할 수 없습니다.
document.scrollingElement()가 <body> 또는 null을 반환하는 Quirks mode의 배지를 포함하여 </html> 요소에 스크롤 배지를 표시하기로 결정했습니다. 이렇게 하면 스크롤 가능한 문서와 스크롤 가능한 본문 요소 간에 혼동이 방지됩니다. 특히 본문을 독립적으로 스크롤할 수 있는 페이지에서 유용합니다.
스크롤할 수 있는 요소를 개발자에게 가장 명확하게 보여주는 방법이었습니다.
Chrome DevTools 프로토콜 (CDP) 변경사항
새 스크롤 배지를 통합하려면 Chrome DevTools Protocol (CDP)를 변경해야 했습니다. CDP는 DevTools와 Chrome 간의 통신 프로토콜 역할을 합니다.
두 가지 케이스를 모두 다루기 위해 프로토콜을 변경해야 했습니다.
- 이 노드가 DevTools에 로드될 때 스크롤할 수 있나요?
- 이 노드가 스크롤 가능한 상태를 업데이트했나요?
이 노드가 DevTools에 로드될 때 스크롤할 수 있나요?
DevTools 프런트엔드에서 새 노드가 로드될 때마다 전송되는 DOM.Node 데이터 유형에 isScrollable라는 새 속성이 추가되었습니다.
불필요한 데이터를 로드하지 않도록 이 속성은 true인 경우에만 채우기로 결정했습니다. 따라서 속성이 전송되지 않으면 요소를 스크롤할 수 없는 것으로 간주됩니다.
이 노드가 스크롤 가능한 상태를 업데이트했나요?
노드가 스크롤 가능한 상태를 업데이트했는지 감지하기 위해 CDP에 새 이벤트 scrollableFlagUpdated를 도입했습니다. 이 이벤트는 요소가 스크롤 가능한 영역을 얻거나 잃을 때마다 트리거됩니다. 이벤트의 구조는 다음과 같습니다.
# Fired when a node's scrollability state changes.
experimental event scrollableFlagUpdated
parameters
# The id of the node.
DOM.NodeId nodeId
# If the node is scrollable.
boolean isScrollable
전문가 팁: 브라우저에서 새로운 CDP 변경사항 살펴보기
Chrome이 DevTools와 통신하는 방법을 알아보려면 간단한 방법이 있습니다.
프로토콜 모니터 패널을 사용하면 Chrome과 DevTools 간에 교환되는 실시간 이벤트를 볼 수 있습니다(새로 추가된 스크롤 배지 이벤트 포함). 예를 들어 스크롤 가능성에 영향을 미치는 요소의 스타일을 수정하면 관련 CDP 이벤트가 발생하는 즉시 이를 확인할 수 있습니다.
자세한 내용은 Protocol monitor: View and send CDP requests를 참고하세요.
스크롤 그 이상: 더보기 배지 소개
또한 스크롤의 원인을 정확하게 파악할 수 있는 새로운 오버플로 배지를 개발하고 있습니다. 이 배지는 컨테이너를 벗어난 요소 옆에 표시되므로 레이아웃 문제를 빠르게 진단할 수 있습니다.
작동 방식은 다음과 같습니다.
- 대화형 디버깅 스크롤 배지를 클릭하여 오버플로하는 하위 요소를 식별하는 DevTools 프로토콜 명령어를 트리거합니다.
- 오버플로 시각화 스크롤 가능한 컨테이너 내에서 요소 경계를 매핑하여 오버플로를 감지합니다.
- 문제의 원인 강조 오버플로 배지는 이러한 오버플로 요소를 표시하며, 배지를 클릭하면 DOM에서 직접 요소가 강조 표시됩니다.
이를 통해 개발자는 콘텐츠 오버플로로 인한 레이아웃 문제를 이해하고 해결할 수 있는 강력한 새 도구를 갖게 됩니다. 이러한 심층 분석을 통해 디버깅 워크플로를 대폭 간소화할 수 있을 것으로 기대합니다.