DOM Click Visualizer

개발자도구 패널에서 DOM 요소에 클릭 이벤트가 발생했을 때, 버블링되는 요소를 시각적으로 확인할 수 있습니다.

[기능] 웹 페이지를 클릭했을 때, 발생한 클릭 이벤트를 웹 페이지의 구조를 시각화(2.5D) 한 화면에서 확인할 수 있습니다. 클릭 이벤트가 발생한 요소들은 잠깐동안 어둡게 표시됩니다. [활용 분야] - ⭐ 웹 개발 시 클릭 이벤트 디버깅 - 웹 페이지의 설계도로 사용 [실행 방법] 1. 크롬 개발자도구(f12)의 ‘Click Visualizer’ 패널을 엽니다. 2. 웹 페이지를 클릭하여 DOM요소가 버블링되는 모습을 확인합니다. --- [Function] When you click a webpage, you can see the click events that occur on a single screen (2.5D) visualizing the structure of the webpage. The elements where the click event occurred are dimmed for a short time. [Used area] - ⭐ Debugging click events in web development - Use as a blueprint for web pages [How to do it] 1. Open the 'Click Visualizer' panel of the chrome developer tool (f12). 2. Click on the web page to see how the DOM element is bubbling.