제목대로 Chrome DevTools에서 클릭시에만 Node가 그려지는 요소를 확인하는 방법 외에 DevTools의 작은 재료를 게시합니다.

클릭시에만 그려지는 예

다음과 같은 것이 그에 해당합니다.
이 경우, Elements를 조사하려고 해도, input 태그 이외를 클릭하면 삭제되어 버리기 쉽게 확인할 수 없습니다.
h tps : // 마테리아 음. 코 m / 코 m 포넨 ts / 아우 토코 mp 0 / / 코 m 보보 x

중단점 지정

따라서이 DOM 요소에 중단 점을 지정해야합니다.
브레이크하고 싶은 요소를 DevTools에서 마우스 오른쪽 버튼으로 클릭 한 후 아래 이미지의 빨간색 위 화살표의 node removal을 클릭하십시오.
이것은, 지정된 요소가 삭제되었을 때에 브레이크 하는 구조를 제공해 줍니다.



이렇게 하면, 이 예에서 내놓은 material-ui의 예라고 최하부로 이동해 버립니다만, 제대로 요소의 확인을 할 수 있습니다!

FYI : 호버시에만 그려지는 예

이것은 동료로부터 가르쳐 주셨습니다만, 호버시에만 드로잉이 바뀌는 경우는,
아래 이미지와 같이 :hov를 클릭한 후 적하 화살표의 확인란을 선택합니다.
(여기에서는 링크 텍스트의 호버시의 것을 확인할 수 있습니다)