새 Chrome에서 드롭 다운 메뉴 검사
Chrome 버전 41.0.2272.101m (최신)을 사용 중이며이 업데이트가 엉망입니다. 검사기를 열었을 때 변경된 요소 (Firefox에서와 같이)에서 모든 DOM 변경이 자주색으로 깜박일보고 말했지만, 이제는 마우스 오버 된를 검사 할 수 없습니다 (FF도 마찬가지입니다. 개발시 사용).
예를 들어 superfish와 같은 js 트리거 이벤트에 대해 이야기하고 있습니다. 이전에는 메뉴를 가리키고 열린 상태로 메뉴를 가리면 메뉴가 열린 상태로 유지되고 검사기로 어떤 의사 요소가 생성 검사하고 패딩 등을 직접 변경하고 변경 사항을 확인할 수 있습니다. 이제 메뉴를 마우스 오른쪽 버튼으로 클릭하여 검사하면 메뉴가 닫히고 검사 할 수 없습니다!
도움을 끌어다 놓았지만 도움 관리자가되지 않습니다. 이 새로운 '기능'은 정말 짜증납니다. 요소에 중단 점을 두지 않고 js 트리거 이벤트를 검사하는 방법이 있습니까 (작동하지만 엉덩이에 약간의 고통입니다)?
마우스로 요소 위로 마우스를 이동하고 F8 (Chrome에서만 작동)을 긴장 실행을 일시 중지합니다. 마우스 오버 상태는 계속 표시됩니다. Mac을 사용하는 경우 시스템 Pres를 "Use all F1, F2, etc"확인란을 선택 취소해야 할 수 있습니다.
메뉴 요소 유형에 따라 드롭 다운 입력 메뉴에서 문제가 발생했습니다. 그 이유는 내가 검사 할 때 사라지는 이유는 blur요소 외부의 아무 곳이나 클릭 할 때 항상 요소에서 이벤트가 발생 원인 입니다.
요소를 검사 할 수 있습니다 한 가지 방법은 blur 이벤트 리스너를 제거하는 것입니다.
- 크롬의 입력 요소 검사
- 이벤트 리스너 탭으로 이동하여 흐림 이벤트를 제거합니다.
흐림 이벤트가 제거되면 이제 메뉴를 사라지지 않고 검사 할 수 있습니다.
Mac에서는 드롭 다운을 연 후 cmd+ \를 누르십시오 를 일시 중지 할 수 있습니다 . 그런 다음 shift+ cmd+ c를 사용하여 요소를 검사 할 수 있습니다 .
크롬에서 F12를 클릭하여 개발자 콘솔을 연 다음 설정 개발 도구 설정 을 클릭합니다.
마지막으로 "초점 페이지 에뮬레이트 "를 확인하십시오. 증가 페이지 에뮬레이션 옵션을 선택하십시오.
이제 메뉴를 마우스 오른쪽 버튼으로 클릭하여 검사하면 메뉴가 닫히고 검사 할 수 없습니다!
같은 문제에 나는 직면했고 내가 사용한 [해석] 크롬 개발 도구에서 재귀 적 으로 확장 옵션 이었습니다 .
단계는 다음과 가변합니다.
- 드롭 다운 필드 검사
- 동적 DOM 찾기 (보라색 강조 표시)
- 해당 동적 DOM을 마우스 오른쪽 버튼으로 클릭
- 재귀 적으로 확장을 선택합니다 .
- 모든 요소가 있음을 알 수 있습니다.
다음은 견본입니다.
매초 JS 콘솔에서 주어진 요소의 내용을 기록하는 간격을 수 있습니다. 콘솔에 드롭 다운을 제공합니다.
setInterval(() =>
console.log(document.querySelector('.Select-menu-outer').outerHTML),
1000)
Chrome에서 CSS 편집기를 사용하여 'hover'상태와 같은 상태를 적용 할 수 있습니다.
개발자 도구에서 요소를 선택합니다. 오른쪽에는 화살표가있는 사각형이 있습니다. 클릭하면 주를 선택할 수 있습니다. 예를 들어, hovered를 선택하면 요소가 지금 호버링되는 것처럼 창과 CSS 업데이트가 모두 표시됩니다.
요소 창 에서 HTML 변경
- 검사 모드 에서 계속 열려 있는 메뉴 위로 마우스를 가져 갑니다.
- 메뉴의 열림 / 닫힘 상태간에 요소 창의 요소에 대한 HTML 변경 사항을 관찰 합니다. 대부분의 경우이 스타일 변경입니다.
- 메뉴를 열고 닫는 이유를 찾으면 (이 예에서는 메뉴 상태 사이에 추가 및 제거 된 "dropdownOpen"이라는 클래스) 요소 탭 에서 HTML을 두 번 클릭 하고 필요한 변경을 수행합니다. 이 예에서는 "dropdownOpen"클래스를 요소에 추가합니다 .
<li>
콘솔 창 에서 jQuery 사용
이 동작을 반복해야하는 경우 jQuery를 사용할 수 있습니다. 당신은 선택 사용하여 요소를 jQuery를 과에서 필요한 변화 할 콘솔 . 이 예에서는 ID로 요소를 선택하고 다음 과 같이 "dropdownOpen"클래스를 추가합니다.
jQuery("#menu-item-11012").addClass("dropdownOpen");
참조 URL : https://stackoverflow.com/questions/29386116/inspecting-drop-down-menus-in-new-chrome
'ProgramingTip' 카테고리의 다른 글
| 즉석에서 CSS 파일 교체 (페이지에 새 스타일 적용) (0) | 2021.01.09 |
|---|---|
| elm에서`<<`연산자는 무엇을 의미합니까? (0) | 2021.01.09 |
| NSMutableArray addObject가 작동하지 않습니다. (0) | 2021.01.09 |
| UINavigationBar 여러 줄 제목 (0) | 2021.01.09 |
| 따옴표 안에 있지 않은 모든 인스턴스와 일치하는 정규식 (0) | 2021.01.09 |