브라우저의 소실 요소를 검사하려면 어떻게 해야 합니까?

브라우저의 소실 요소를 검사하려면 어떻게 해야 합니까?

마우스가 이동하면 사라지는 요소를 검사하려면 어떻게 해야 합니까?

신분증인지 수업인지 모르겠지만 검사하고 싶어요.

시도해 본 솔루션:

를 실행합니다.jQuery는 jQuery 。$('*:contains("some text")')요소가 숨겨져 있는 것이 아니라 DOM 트리에서 삭제되었을 가능성이 있기 때문에 운이 없었습니다.

DOM 트리의 변경 내용을 수동으로 검사해도 변경 내용을 알아채지 못할 정도로 빠른 것 같습니다.

성공:

이벤트 중단점을 성공적으로 처리했습니다.그냥 가기만 하면 돼요.Sources-> Event Listener Breakpoints-> Mouse-> mousedown크롬으로 되어 있습니다.후, 하고 싶은 와 그 내부를 했습니다.Scope Variables몇 가지 유용한 길 안내서를 봤어요.

(이 답변은 Chrome Developer Tools에만 적용됩니다.아래 업데이트를 참조하십시오.)

사라지는 요소를 포함하는 요소를 찾습니다.요소를 마우스 오른쪽 버튼으로 클릭하고 "Break on..."을 적용합니다.> 서브트리의 변경.그러면 요소가 사라지기 전에 디버거 일시 중지가 발생하므로 일시 중지 상태에서 요소와 상호 작용할 수 있습니다.

2019년 10월 22일 업데이트: 버전 70이 출시됨에 따라 FireFox는 마침내 이러한 종류의 디버깅을 지원하는 것으로 보입니다 2 3:

업데이트 2020년 9월 15일 : Chrome에는 이러한 요구에 맞는 "Emulate a page" 옵션이 있습니다([]]+[P] 명령어 메뉴 또는 글로벌 기본 설정에서 얻을 수 있습니다). 5 - h/t @sulco on Twitter

Chrome의 대체 방법:

• devTools(F12)를 엽니다.
• "소스" 탭을 선택합니다.
• 원하는 요소가 표시된 상태에서 F8(또는 Ctrl+/)을 누릅니다.이렇게 하면 스크립트 실행이 중단되고 표시된 대로 DOM이 "프리즈"됩니다.
• 여기서 Ctrl+Shift+C를 사용하여 요소를 선택합니다.

1. 콘솔 열기
2. ★★를 합니다.setTimeout(()=>{debugger;},5000);
3. Enter 키를 누릅니다.

이제 5초 안에 요소를 표시할 수 있습니다.디버거가 나타나면 디버거가 히트할 때까지 기다립니다.재개하지 않는 한 요소를 가지고 놀 수 있어 없어지지 않습니다.

---

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

북마크릿으로 추가합니다.

1. 임의의 페이지 북마크
2. 이 새 북마크 편집
3. 를 URL/URL/URL로.javascript:(function(){setTimeout(()=>{debugger;},5000);})();

다음에 이 북마크를 사용하려면 이 북마크를 클릭/탭하면 됩니다.

2022년 검증 완료

다음을 수행합니다.

1. 콘솔을 열고 [Elements]
2. 「」라고 입력합니다.command + shift + P (OSX)control + shift + P(Windows)
3. 입력해보세요.focused
4. 선택합니다.Emulate a focused page

이제 콘솔에서 를 클릭해도 요소가 닫히지 않습니다.

Mac에서 크롬을 사용하고 있습니다. 위의 단계를 따르지만 좀 더 자세히 설명하겠습니다.

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

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

1. HTML 패널 내에서 Break On Mutate를 사용할 수 있습니다.(이것으로 어떤 요소인지도 알 수 있습니다)
2. 요소를 우클릭하여 [Inspect Element with Firebug]를 선택할 수 있습니다.

또한 특정 이벤트를 일시적으로 차단하는 방법을 요청하는 551번도 따라할 수 있습니다.

편집:

어떤 요소인지 확인하려면 HTML 패널 옵션인 [Highlight Changes], [Expand Changes], [Scroll Into View]를 활성화하여 요소를 HTML 패널 내에 표시할 수도 있습니다.

세바바스

내 경우 Google Chrome에서 Expand recursive 옵션을 사용했습니다.

순서는 다음과 같습니다.

1. 드롭다운 필드를 검사합니다.
2. 동적 DOM 찾기(보라색 강조 표시)
3. 동적 DOM 오른쪽 마우스 클릭
4. [ Expand recursive ]를 선택합니다.
5. 모든 요소가 거기에 있는 것을 알 수 있습니다.

다음은 데모입니다.

마우스를 요소 위에 놓고 F8(Chrome의 경우)을 눌러 스크립트 실행을 일시 중지합니다.호버 상태가 표시된 상태로 유지됩니다.

그러면 소스 탭으로 이동합니다. ][ Elements ]탭으로 돌아갑니다이 타임 코드는 사라지지 않습니다.

세션을 새로 고치기 위해 싸우는 돔 요소와 컨트롤러 기능이 있을 수 있습니다.디버깅하지 않고 시작'으로 응용 프로그램을 실행하면 도움이 됩니다.

여기에 이미지 설명 입력

인스펙터의 요소 아래에 나타나는 요소와 사라지는 요소를 볼 수 있습니다.요소가 표시되었을 때 해당 요소로 이동하면 요소가 사라지거나 상태가 변경되었을 때 CSS가 변경되는 것을 확인할 수 있습니다.

이는 Firefox의 Firebug 또는 Chrome의 빌트인스펙터에서 가능합니다.

소실 요소의 CSS 디버깅에 대한 기사를 썼습니다.

단축키를 사용하여 자동으로 액세스debugger단축키 키보드 단축키가 있는 모드:

---

1. 단축키 확장 설치
2. 확장 아이콘을 클릭하고 "옵션"을 선택합니다.
   
3. 다음과 같이 설정합니다.
4. 바로 가기 저장 버튼(오른쪽 아래)을 클릭합니다.

이제 임의의 페이지로 이동하여 devtools가 열려 있는지 확인하고 검사 대상 요소가 보이는 동안 + 키를 누릅니다.SPACEBAR

---

Windows OS 를 사용하고 있기 때문에, 이 단축키 조합은 나에게 있어서 편리합니다.다른 숏컷에 의해서 「선택」되는 것은 아니지만, 물론 다른 숏컷을 선택할 수 있습니다.

같은 문제가 있었지만 Firefox를 사용하고 있습니다.해결책을 찾으면 바로 사라집니다.4개의 대시(설정)를 열고 Web developer > Debugger로 이동하여 스크립트가 정지되기 전에 바로 F8 키를 눌러 개발자 도구를 열었음을 검출합니다.

언급URL : https://stackoverflow.com/questions/19422214/how-can-i-inspect-disappearing-element-in-a-browser