Chrome 버전 41.0.2272.101m (최신)을 사용 중이며이 업데이트가 엉망입니다. 그들은 검사기를 열었을 때 변경된 요소 (Firefox에서와 같이)에서 모든 DOM 변경이 자주색으로 깜박일 것이라고 말했지만, 이제는 마우스 오버 된 개체를 검사 할 수 없습니다 (FF에서도 마찬가지입니다. 프런트 엔드 개발시 사용).
예를 들어 superfish와 같은 js 트리거 이벤트에 대해 이야기하고 있습니다. 이전에는 메뉴를 가리키고 검사기로 메뉴를 가리면 메뉴가 열린 상태로 유지되고 검사기로 가서 어떤 의사 요소가 생성되는지 확인하고 패딩 등을 직접 변경하고 변경 사항을 확인할 수있었습니다. 이제 메뉴를 마우스 오른쪽 버튼으로 클릭하여 검사하면 메뉴가 닫히고 검사 할 수 없습니다!
관리자를 끌어다 놓았지만 도움이되지 않았습니다. 이 새로운 ‘기능’은 정말 짜증납니다. 요소에 중단 점을 두지 않고 js 트리거 이벤트를 검사하는 방법이 있습니까 (작동하지만 엉덩이에 약간의 고통입니다)?
답변
마우스로 요소 위로 마우스를 이동하고 F8 (Chrome에서만 작동)을 눌러 스크립트 실행을 일시 중지합니다. 마우스 오버 상태는 계속 표시됩니다. Mac을 사용하는 경우 시스템 환경 설정을 열고 “F1, F2 등 모두 사용”확인란을 선택해야 할 수 있습니다 (또는 간단히 fn + F8 사용).
인스펙터의 소스 탭에있는 경우에만 작동합니다.
답변
메뉴 요소 유형에 따라 드롭 다운 입력 메뉴에서이 문제가 발생했습니다. 검사 할 때 사라지는 이유 blur는 요소 외부의 아무 곳이나 클릭하면 항상 요소에서 이벤트가 트리거 되기 때문 입니다.
요소를 검사 할 수 있었던 한 가지 방법은 blur 이벤트 리스너를 제거하는 것입니다.
- Chrome에서 입력 요소 검사
- Event Listeners 탭으로 이동하여 blur 이벤트를 제거합니다.
흐림 이벤트가 제거되면 메뉴를 열고 사라지지 않고 검사 할 수 있습니다.
답변
Chrome에서 F12를 눌러 개발자 콘솔을 연 다음 설정 (톱니 바퀴 아이콘)을 클릭하거나 F1을 누릅니다.
그런 다음 “집중된 페이지 에뮬레이트”옵션을 찾아서 확인하십시오.
답변
Mac에서는 드롭 다운을 연 후 cmd+ \를 눌러 스크립트를 일시 중지 할 수 있습니다 . 그런 다음 shift+ cmd+ c를 사용하여 요소를 검사 할 수 있습니다 .
답변
이제 메뉴를 마우스 오른쪽 버튼으로 클릭하여 검사하면 메뉴가 닫히고 검사 할 수 없습니다!
나는 같은 문제에 직면했고 내가 사용한 것은 크롬 개발 도구에서 재귀 적 으로 확장 옵션 이었습니다 .
단계는 다음과 같습니다.
- 드롭 다운 필드 검사
- 동적 DOM 찾기 (보라색 강조 표시)
- 해당 동적 DOM을 마우스 오른쪽 버튼으로 클릭
- 재귀 적으로 확장을 선택합니다 .
- 모든 요소가 있음을 알 수 있습니다.
다음은 데모입니다.
답변
매초 JS 콘솔에서 주어진 요소의 내용을 쓰는 간격을 설정할 수 있습니다. 이것을 콘솔에 놓고 드롭 다운을 엽니 다.
setInterval(() =>
console.log(document.querySelector('.Select-menu-outer').outerHTML),
1000)
답변
Firefox에서
Inspector에서 드롭 다운이 포함 된 노드를 마우스 오른쪽 버튼으로 클릭하고 다음을 선택합니다.
중단 …> 하위 트리 수정
드롭 다운이 … 음 … 드롭 다운 순간 실행이 일시 중지됩니다.
