초점이 맞지 않으면 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요소에 대한 당신은 당신의 코드보기에서 왼쪽 선택했습니다.

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

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

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

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

나는 매우 어려운 상황을 겪었고 여기에서 아무런 대답도 얻지 못했습니다 (나는 그것을 알지 못하기 때문에 몸을위한 컨테이너 또는 원래 이벤트를 변경하는 답변을 확인하지 못했습니다). 마침내 Chrome Inspector의 Control Event Listener Breakpoints를 통해 해결 방법을 찾았습니다. 어쩌면 F8 또는 마우스 오른쪽 버튼 클릭으로 팝업을 다시 숨기는 복잡한 상황에서 브라우저 간을 깨는 방법 일 수도 있습니다.

브라우저 개발자 콘솔에 다음 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를 연 다음 키보드 단축키를 사용하여 요소 관리자를 트리거하면 문제가 해결됩니다.

맥 : Cmd+Opt+J 그리고Cmd+Opt+C

Windows : Ctrl+Shift+J 그런 다음Ctrl+Shift+C

[