Event Listeners 클릭, 마우스 오버, 스크롤, 터치, 키보드 및 양식 등 종류별로 색상이 지정된 event listener 있는 모든 요소의 개요를 설명하며 각 핸들러의 출처를 표시하고 DOM 변경에 따라 요소를 깜박입니다.
무언가가 반응하거나 반응하지 않는 이유를 알아내는 것은 일반적으로 페이지가 대답하지 않는 질문으로 시작됩니다. 이 요소에 클릭 핸들러가 있습니까? 호버 동작을 실제로 소유하는 요소는 무엇입니까? 스크롤을 듣고 페이지가 끊기는 것은 무엇입니까? 선택할 요소를 이미 알고 있는 경우 브라우저 DevTools 한 번에 한 요소의 listeners 를 나열할 수 있습니다.
이 도구는 전체 페이지에 대한 질문에 한 번에 답변합니다. listener 있는 모든 요소는 클릭, 마우스 오버, 스크롤, 터치 및 드래그, 키보드 또는 양식 및 포커스 등 해당 종류의 색상으로 윤곽선을 가져오며 마우스를 가져가면 정확한 이벤트와 각 이벤트의 출처(인라인 속성, 속성, React 또는 Vue 핸들러, jQuery 또는 addEventListener 표시됩니다. 카테고리 타일은 각 종류를 켜고 끄며, 아래 목록에는 모든 요소의 이름이 표시되므로 클릭 한 번으로 해당 항목으로 스크롤할 수 있습니다.
프레임워크가 올바르게 처리됩니다. React listeners 를 루트에 연결하고 내부적으로 이벤트를 전달하므로 전체 앱이 클릭 가능한 것처럼 보입니다. 도구는 해당 루트 등록을 따로 설정하고 이를 선언하는 요소에 React 핸들러를 표시합니다. 빠른 스캔은 다시 로드할 필요가 없으며 인라인 핸들러, React, Vue 및 jQuery 포함합니다. 도구가 열리기 전에 일반 addEventListener 사용하여 추가된 Listeners 페이지 로드 시작 시에만 볼 수 있으므로 Reload & record 녹음이 켜진 상태에서 페이지를 한 번 다시 로드합니다. 그런 다음 도구는 포함된 모든 listener, window 및 document 페이지 수준 리스너와 함께 자체적으로 다시 열립니다.
두 번째 탭은 DOM 자체를 감시합니다. 추가되거나 제거된 모든 노드, 속성 변경 및 텍스트 변경이 페이지에서 깜박이고 카운터는 초당 변형을 표시하며 목록은 관련된 속성과 함께 가장 많이 변경된 요소의 순위를 지정합니다. 아무도 페이지를 건드리지 않는 동안 꾸준한 스트림은 일반적으로 타이머, JavaScript 기반 애니메이션 또는 프레임워크가 필요한 것보다 더 많이 다시 렌더링되는 것을 의미합니다. 바로 배터리를 소모하고 페이지를 더듬게 만드는 것입니다.
클릭, 마우스 오버, 스크롤, 터치, 키보드 및 양식 listeners 포함된 요소는 고유한 색상으로 윤곽선이 표시되며 각 종류를 표시하거나 숨길 수 있는 타일이 있습니다.
인라인 속성, 속성, React 및 Vue 핸들러, jQuery 이벤트 및 addEventListener 호출이 모든 요소에 라벨이 지정됩니다.
React 의 루트 수준 listeners 따로 설정되어 있으며 해당 핸들러는 전체 앱이 아닌 이를 선언하는 요소에 표시됩니다.
Reload & record 해당 로드에 대해서만 window 및 document listeners 포함하여 페이지 로드 시작 시 모든 addEventListener 호출을 포착합니다.
추가 및 제거된 노드, 속성 변경 사항 및 텍스트 변경 사항이 초당 돌연변이 카운터와 함께 페이지에 깜박입니다.
관련 속성과 함께 가장 많이 변경되는 요소의 순위 목록은 폭주하는 재렌더링을 바로 가리킵니다.
버튼에 실제로 listener 있는지, 아니면 핸들러가 래퍼 요소에 있는지 한 눈에 확인하세요.
window 및 document listeners 포함하여 스크롤, 휠 또는 터치무브를 수신하는 모든 요소를 찾습니다.
키보드 이벤트에 반응하는 컨트롤과 마우스에만 반응하는 컨트롤을 확인하세요.
페이지가 유휴 상태인 동안 돌연변이 카운터를 살펴보세요. 타이머 또는 추가 작업을 수행하는 프레임워크를 계속해서 변경하는 요소입니다.
익숙하지 않은 사이트 주위로 마우스를 가져가면 어떤 부분이 대화형이고 어떤 프레임워크가 이를 연결했는지 확인하세요.
DevSuite Pro 도크에서 Event Listeners 아이콘을 클릭합니다. 빠른 스캔이 즉시 실행되어 찾은 모든 요소의 개요를 보여줍니다.
이벤트와 해당 소스를 보려면 윤곽선이 있는 요소에 마우스를 올리세요. 클릭, 마우스 오버 또는 스크롤 listeners 만 표시하려면 카테고리 타일을 사용하세요.
녹음이 켜진 상태에서 페이지를 한 번 다시 로드하려면 Reload & record 누르세요. 도구가 자체적으로 다시 열리며 이제 모든 addEventListener 호출이 포함됩니다.
목록에서 행을 클릭하면 해당 요소로 페이지를 스크롤하고 플래시할 수 있습니다. Copy report 전체 목록을 텍스트로 제공합니다.
DOM mutations 탭을 열고 페이지를 사용하세요. 변경되는 요소가 깜박이고 가장 바쁜 요소가 목록의 맨 위로 올라갑니다.
