초점을 잃었을 때 DOM에서 사라지는 html 요소를 어떻게 검사할 수 있습니까?

초점을 잃었을 때 DOM에서 사라지는 html 요소를 어떻게 검사할 수 있습니까?

테이블 셀에 입력된 CSS 속성을 검사하려고 합니다.입력은 클릭하면 나타나고 초점을 잃으면 사라집니다. 마치 제가 검사하려고 할 때와 같습니다.다른 창(검사자)으로 이동하는 동안 초점을 잃지 않으려면 어떻게 해야 합니까?

Chrome 브라우저에서 Developer Tools(개발자 도구)를 열고 Elements(요소) 탭을 선택한 다음, 검사할 요소의 상위 노드의 상황별 메뉴를 열고 상황별 메뉴에서 Break on > Subtree modifications(부분 트리 수정)를 클릭합니다.

나중에 페이지를 클릭하기만 하면 포커스를 잃지 않고 검사할 요소를 잃지 않고 검사자에게 연결됩니다.

chrome devtools 설정에는 다음과 같은 이름의 옵션이 있습니다.Emulate a focused page기본적으로 비활성화되어 있습니다.이 옵션을 활성화한 후, devtool 창에서 아무 곳이나 클릭해도 DOM의 어떤 요소에도 초점이 손실되지 않습니다.

Chrome 버전 >= 86의 경우:

devtools를 연 다음 을 누릅니다.Command+Shift+P(Mac) 또는Control+Shift+P(Windows, Linux)를 클릭하여 명령 메뉴를 엽니다.입력 시작Rendering명령 메뉴에서 다음을 선택합니다.Show Rendering활성화할 수 있는 위치Emulate a focused page.

그런 다음 포커스를 맞출 요소를 클릭한 다음 Devtool 창에서 아무 곳이나 클릭합니다.요소가 초점을 잃지 않는 것을 볼 수 있습니다.따라서 이제 쉽게 검사하거나 디버그할 수 있습니다.

크롬 버전 < 86

에 가다devtool settings -> preferences이하Global옵션, 사용Emulate a focused page.

마우스를 움직이지 않고 JavaScript 실행을 일시 중지하면 사라지는 요소를 캡처할 수 있습니다.바로 가기 키를 사용하거나 바로 가기 키를 트리거하여 이 작업을 수행할 수 있습니다.debugger진술.이것은 CSS가 아닌 자바스크립트에 의해 외관이 제어되는 요소에 대해 작동합니다.:hover(CSS일 경우 덤바 F.의 답변 참조).

바로 가기 키

이 접근 방식은 JS를 사용하여 키 누르기에서 특수 동작을 트리거하지 않는 페이지에 적용됩니다.다음 지침은 Google Chrome용이지만 다른 최신 브라우저에 적용할 수 있습니다.

1. 개발자 도구를 열고 소스로 이동합니다.

2. 스크립트 F8실행을 일시 중지하는 바로 가기를 메모합니다(OS에 따라 다른 바로 가기도 있을 수 있음).

   

3. UI와 상호 작용하여 요소를 표시합니다.

4. 치세요.

5. 이제 마우스를 움직이거나 DOM을 검사할 수 있습니다.원소는 거기에 머물 것입니다.

debugger

을 debugger은 호된요표소동는안실문는행, 용사되를 합니다.setTimeout:

1. JS 콘솔을 열고 다음을 입력합니다.

   // Pause script execution in 5 seconds
   setTimeout(() => { debugger; }, 5000)
   

2. 마우스 커서를 열고 스크립트 실행이 일시 중지될 때까지 기다립니다.

(Nick Farina의 답변과 동일)

그렇지 않으면 콘솔에 다음을 입력합니다.

setTimeout(() => { debugger; }, 5000)

그런 다음 5초 동안(또는 값을 다른 값으로 변경) 디버그할 내용을 표시합니다.

다른 답변은 효과가 없었습니다. 스크립트가 일시 중지되기 직전에 DOM 트리가 계속 수정되었습니다(즉, 제가 관심 있는 항목이 사라졌습니다).

할 수 , 는 또한 이것당그상일으로않적반작확만지는지때실수시경당요상모있션할이레가뮬은를소신태에우는든가언치이할관급여하와련에문도훌기이이구신한륭리그황고이것의서에동지는하하)▁not▁also▁states그▁but▁and▁is▁normally▁in▁element▁situation▁tool▁as▁great▁works▁your▁this▁one▁developer▁(▁chrome경and당▁to▁tools▁a▁sure▁it▁worth모시수있이▁case▁in상▁you요:focus.

이 작업을 수행하려면 다음 페이지로 이동합니다.Elements개발자 도구의 탭을 클릭하고 사용자가 다음 위치에 있는지 확인합니다.Styles오른쪽 섹션(개발자 도구를 시작할 때 이 위치가 기본 위치여야 함).이제 오른쪽 상단 모서리의 스타일 아래에 아이콘이 있습니다.Toggle Element State이 가능합니다.:active,:hover그리고:focus:visited코드 보기의 왼쪽에서 선택한 요소입니다.

테스트 중인 페이지의 개발자 도구 페이지에 있는 Chrome에서...옵션 메뉴를 클릭하고 기본 설정을 엽니다.DevTools에서 'Emulate a focused page'를 활성화합니다.

그런 다음 테스트 페이지에 요소를 표시합니다.팝업 검색 결과를 화면에 유지하기 위해 이 작업을 수행했습니다. 이 작업을 수행했습니다.

실제 솔루션은 아니지만 일반적으로 작동합니다(:

1. 요소에 포커스
2. 상황에 맞는 메뉴를 마우스 오른쪽 버튼으로 클릭
3. 개발자 도구로 이동

저는 매우 어려운 상황에 처해 있었고 여기서 아무런 답도 나오지 않았습니다(저는 그것을 모르기 때문에 저를 위한 본체인 컨테이너나 원래 이벤트를 변경하는 답을 확인하지 않았습니다).Chrome Inspector의 Control Event Listener 중단점을 통해 해결 방법을 찾았습니다.아마도 그것은 F8이나 마우스 오른쪽 버튼을 클릭해도 팝업이 다시 보이지 않는 복잡한 상황에서 브라우저를 가로지르는 방법일 것입니다.

chrome devtools에서 요소의 오른쪽 클릭 ;-)

브라우저 개발자 콘솔에 다음 Javascript를 붙여넣습니다.

// Delayed console log of parent element with disappearing child element(s)
// Once code is trigger, you have 3 seconds to trigger the hidden element before it snapshots.
// The hidden elements should appear in the console ready to inspect.

var timer = 3000; //time before snapshot
var parent_of_element_to_inspect = 'div.elementcontainer'; //container of element to snapshot
setTimeout(function(){
 console.log(document.querySelector(parent_of_element_to_inspect).cloneNode(true));
},timer);

저는 도구를 잘 사용하지 못하기 때문에 더 빨리 고칠 수 있습니다. 제가 하는 일은 이렇습니다.

event.originalEvent.preventDefault();
event.originalEvent.stopImmediatePropagation();
event.originalEvent.stopPropagation();

Chrome DevTools를 연 다음 키보드 단축키를 사용하여 요소 검사기를 트리거하면 문제가 해결됩니다.

Mac: Cmd+Opt+J그리고 나서.Cmd+Opt+C

Windows: Ctrl+Shift+J그리고 나서.Ctrl+Shift+C

[

언급URL : https://stackoverflow.com/questions/28963272/how-can-i-inspect-html-element-that-disappears-from-dom-on-lost-focus