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

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

---

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

---

Chrome 브라우저에서 개발자 도구 를 열고 요소 탭 을 선택한 다음, 검사하려는 요소의 상위 노드에 대한 상황에 맞는 메뉴를 열고 상황에 맞는 메뉴에서 중단 > 하위 트리 수정을 클릭합니다 .

그 후에 페이지를 클릭하기 만하면 포커스를 잃거나 검사하려는 요소를 잃지 않고 인스펙터로 이동할 수 있습니다.

---

마우스를 움직이지 않고 키보드 단축키로 JavaScript 실행을 일시 중지하면 사라지는 요소를 캡처 할 수 있습니다. Chrome에서이 작업을 수행하는 방법은 다음과 같습니다.

1. 개발자 도구를 열고 소스로 이동하십시오.

2. 스크립트 실행을 일시 중지하는 단축키에 유의하십시오 F8.

   

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

4. 을 누르십시오 F8.
5. 어떻게 마우스를 움직이고 DOM을 검사 할 수 있는지. 요소는 그대로 유지됩니다.

이 트릭은 Firefox 및 기타 최신 브라우저에서도 작동합니다.

---

다른 모든 방법이 실패하면 콘솔에 다음을 입력하십시오.

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

그런 다음 디버그하려는 항목이 표시되도록 5 초 (또는 값을 다른 값으로 변경)가 있습니다.

다른 답변 아무도 나를 위해 일한 - DOM 트리가 (내가 사라진 신경 즉, 물건을) 수정하기 보관 바로 스크립트가 일시 중지하기 전에.

---

이것이 귀하의 상황에서 작동하는지 확실하지 않지만 Chrome 개발자 도구에서 일반적으로 (그리고 모든 경우에 훌륭한 도구이므로 언급 할 가치가 있음) 요소 상태를 시뮬레이션 할 수 있으며 하나는 :focus.

이렇게하려면 Elements개발자 도구 의 탭으로 이동 Styles하여 오른쪽 섹션에 있는지 확인합니다 (개발자 도구를 시작할 때 기본 위치 여야 함). 이제 오른쪽 상단 모서리에있는 스타일에 아이콘이 Toggle Element State있습니다. 당신이 그것을 클릭하면 당신은 시뮬레이션 할 수 있습니다 :active, :hover, :focus및 :visited요소에 대한 당신은 당신의 코드보기에서 왼쪽 선택했습니다.

---

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

1. 요소에 집중
2. 상황에 맞는 메뉴를 보려면 마우스 오른쪽 버튼을 클릭하십시오.
3. 개발자 도구로 이동

---

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

그런 다음 테스트 페이지에서 요소가 나타납니다. 이것은 내 팝업 검색 결과가 화면에 유지되도록 집중하여 작업 할 수 있도록하기 위해 노력했습니다.

---

브라우저 개발자 콘솔에 다음 자바 스크립트를 붙여 넣습니다.

// 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();

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