브라우저에서 사라지는 요소를 어떻게 검사 할 수 있습니까?

마우스가 움직일 때 사라지는 요소를 어떻게 검사 할 수 있습니까?

나는 그것이 ID, 클래스 또는 아무것도 모르지만 그것을 조사하고 싶습니다.

내가 시도한 솔루션 :

콘솔 내에서 jQuery 선택기를 실행 $('*:contains("some text")')하지만 주로 요소가 숨겨져 있지는 않지만 DOM 트리에서 제거 되었기 때문에 운이 없었습니다.

DOM 트리에서 변경 사항을 수동으로 검사하면 변경된 내용을 알기에는 너무 빠르기 때문에 아무것도 제공하지 않습니다.

성공:

이벤트 중단 점에 성공했습니다. 특히-내 경우에는 마우스 다운. Sources-> Event Listener Breakpoints-> Mouse-> mousedownChrome으로 이동하십시오 . 그 후 검사하고 싶은 요소를 클릭하고 내부에서 Scope Variables유용한 지침을 보았습니다.

(이 답변은 Chrome 개발자 도구에만 적용됩니다. 아래 업데이트를 참조하십시오.)

사라지는 요소가 포함 된 요소를 찾습니다. 요소를 마우스 오른쪽 단추로 클릭하고 "중단 ...> 서브 트리 수정"을 적용하십시오. 그러면 요소가 사라지기 전에 디버거 일시 중지가 발생하여 일시 중지 된 상태에서 요소와 상호 작용할 수 있습니다.

2019 년 10 월 22 일 업데이트 : v. 70 릴리스에서는 FireFox가 마침내 이런 종류의 디버깅 2 3을 지원하는 것처럼 보입니다 .

Chrome의 다른 방법 :

• devTools (F12)를 엽니 다.
• "소스"탭을 선택하십시오.
• 원하는 요소가 표시되는 동안 F8 (또는 Ctrl + /)을 누르십시오. 그러면 스크립트 실행이 중단 되고 DOM이 표시된대로 정확하게 "고정"됩니다.
• 이 시점에서 Ctrl + Shift + C를 사용하여 요소를 선택하십시오.

1. 열린 콘솔
2. 입력 setTimeout(()=>{debugger;},5000);
3. 엔터 키를 치시오

이제 5 초 안에 요소가 나타납니다. 그것이 나타나면 디버거가 칠 때까지 기다리십시오. 다시 시작하지 않는 한, 요소를 가지고 놀 수 있으며 사라지지 않습니다.

매번 위의 단계를 반복하지 않는 유용한 팁 :

이것을 북마크릿으로 추가하십시오.

1. 아무 페이지 나 북마크
2. 이 새로운 북마크 수정
3. URL / 위치를 다음으로 바꾸십시오. javascript:(function(){setTimeout(()=>{debugger;},5000);})();

다음에이 기능을 사용하려면이 책갈피를 클릭 / 탭하십시오.

위의 단계를 수행 한 Mac에서 크롬을 사용하고 있지만 조금 더 설명하려고합니다.

1. 마우스 오른쪽 버튼을 클릭하고 요소 검사로 이동하십시오.
2. 소스 탭으로 이동하십시오.
3. 그런 다음 요소 위로 마우스를 가져갑니다.
4. 그런 다음 키보드 F8 또는을 사용하십시오 Command(Window) \ . 정적 상태에서 화면을 일시 중지하고 요소가 호버 아웃해도 사라지지 않습니다.

Firebug에는 이에 대한 다양한 솔루션이 있습니다.

1. HTML 패널 내에서 Break On Mutate를 사용할 수 있습니다 . (이것으로 어떤 요소인지 알 수 있습니다)
2. 요소를 마우스 오른쪽 버튼으로 클릭하고 Firebug로 요소 검사를 선택할 수 있습니다

또한 특정 이벤트를 일시적으로 차단하는 방법을 요청하는 551 문제 를 따르고 싶을 수도 있습니다.

편집하다:

어떤 요소인지 확인하려면 HTML 패널 옵션 강조 표시 변경 , 확장 변경 및 보기 로 변경 스크롤 을 사용하여 HTML 패널 내에 요소를 표시 할 수도 있습니다.

세바스찬

필자의 경우 Google 크롬에서 재귀 펼치기 옵션을 사용했습니다 .

단계는 다음과 같습니다.

1. 드롭 다운 필드 검사
2. 동적 DOM 찾기 (보라색 하이라이트)
3. 해당 동적 DOM을 마우스 오른쪽 버튼으로 클릭
4. 재귀 적으로 확장을 선택 하십시오 .
5. 모든 요소가있는 것을 볼 수 있습니다

데모는 다음과 같습니다.

마우스로 요소 위로 마우스를 가져간 다음 F8 (Chrome의 경우)을 눌러 스크립트 실행을 일시 중지하십시오. 호버 상태는 계속 표시됩니다.

소스 탭으로 이동합니다. 요소 탭으로 돌아갑니다. 이 타임 코드는 디스 퍼되지 않습니다.

요소 아래에서 관리자에 표시되거나 사라지는 요소를 볼 수 있습니다. 요소가 표시 될 때 요소를 탐색하면 요소가 사라지거나 상태가 변경 될 때 CSS 변경 사항을 볼 수 있어야합니다.

이것은 파이어 폭스의 파이어 버그 또는 크롬의 내장 검사기로 가능합니다.

나는 같은 문제가 있었지만 Firefox를 사용하면 검사 요소를 열면 해결책이 발견되면 사라집니다 .4 대시 (설정)를 열고 웹 개발자> 디버거로 이동 한 다음 즉시 스크립트를 중지하는 일시 중지 바로 가기 인 F8을 누릅니다 시작하기 전에 개발자 도구를 열었 음을 감지하십시오.