새 Chrome에서 드롭 다운 메뉴 검사

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를 사용하여 요소를 검사 할 수 있습니다 .

이제 메뉴를 마우스 오른쪽 버튼으로 클릭하여 검사하면 메뉴가 닫히고 검사 할 수 없습니다!

나는 같은 문제에 직면했고 내가 사용한 것은 크롬 개발 도구에서 재귀 적 으로 확장 옵션 이었습니다 .

단계는 다음과 같습니다.

1. 드롭 다운 필드 검사
2. 동적 DOM 찾기 (보라색 강조 표시)
3. 해당 동적 DOM을 마우스 오른쪽 버튼으로 클릭
4. 재귀 적으로 확장을 선택합니다 .
5. 모든 요소가 있음을 알 수 있습니다.

다음은 데모입니다.

매초 JS 콘솔에서 주어진 요소의 내용을 쓰는 간격을 설정할 수 있습니다. 이것을 콘솔에 놓고 드롭 다운을 엽니 다.

setInterval(() => 
    console.log(document.querySelector('.Select-menu-outer').outerHTML),
1000)

Firefox에서

Inspector에서 드롭 다운이 포함 된 노드를 마우스 오른쪽 버튼으로 클릭하고 다음을 선택합니다.

중단 ...> 하위 트리 수정

드롭 다운이 ... 음 ... 드롭 다운 순간 실행이 일시 중지됩니다.

Chrome에서 CSS 편집기를 사용하여 'hover'상태와 같은 상태를 적용 할 수 있다고 생각합니다.

개발자 도구에서 요소를 선택합니다. 오른쪽에는 화살표가있는 사각형이 있습니다. 그것을 클릭하면 주를 선택할 수 있습니다. 예를 들어, hovered를 선택하면 요소가 지금 호버링되는 것처럼 창과 CSS 업데이트가 모두 표시됩니다.

위에 언급 된 치료법 중 어느 것도 저에게 효과가 없었습니다. 드롭 다운 (반응 기반)이 한 번의 클릭 (오른쪽 또는 왼쪽)으로 닫히므로 아래 해결 방법을 찾았습니다.

• Chrome Open 개발자 도구에서
• 먼저 접힌 상태에서 드롭 다운을 클릭하고 옵션으로 확장합니다.
• 그런 다음 요소 섹션에서 드롭 다운 항목의 세부 정보가 포함 된 div 노드를 마우스 오른쪽 버튼으로 클릭합니다 (오른쪽 클릭하기 전에 왼쪽 클릭하지 않아야 함).
• 그런 다음 ' Expand Recursively ' 옵션을 선택하십시오.
• 그런 다음 필요한 세부 정보가 표시되었습니다.

요소 창 에서 HTML 변경

• 검사 모드 에서 계속 열려 있는 메뉴 위로 마우스를 가져 갑니다.
• 메뉴의 열림 / 닫힘 상태간에 요소 창의 요소에 대한 HTML 변경 사항을 관찰 합니다. 대부분의 경우 이것은 스타일 변경입니다.
• 메뉴를 열고 닫는 이유를 찾으면 (이 예에서는 메뉴 상태 사이에 추가 및 제거 된 "dropdownOpen"이라는 클래스) 요소 탭 에서 HTML을 두 번 클릭 하고 필요한 변경을 수행합니다. 이 예에서는 "dropdownOpen"클래스를 요소에 추가합니다 .<li>

콘솔 창 에서 jQuery 사용

이 동작을 반복해야하는 경우 jQuery를 사용할 수 있습니다. 당신은 선택 사용하여 요소를 jQuery를 과에서 필요한 변화 할 콘솔 . 이 예에서는 ID로 요소를 선택하고 다음 과 같이 "dropdownOpen"클래스를 추가합니다.

jQuery("#menu-item-11012").addClass("dropdownOpen");