[javascript] 다른 요소를 마우스 오버 / 입력 할 때만 나타나는 요소 검사
종종 다른 요소를 마우스 오버 / 입력 할 때만 나타나는 요소 (예 : 툴팁)를 검사하고 싶습니다. 나타나는 요소는 jQuery의 mouseenter 이벤트를 통해 표시됩니다.
마우스가 포함 된 요소를 떠날 때 도구 설명이 사라지기 때문에 도구 설명을 검사 할 수 없습니다.
요소 위로 마우스를 가져간 다음 브라우저의 JS를 일시 중지하고 성공적으로 검사 할 수 있도록 JS 이벤트를 일시 중지하는 방법이 있습니까?
예를 들어 Twitter 부트 스트랩의 도구 설명 ( http://getbootstrap.com/javascript/#tooltips)을 살펴보십시오 .
답변
Chrome 38.0.2094.0에서는 상당히 쉽습니다.
다음과 같이 표시됩니다.
단계별 :
- 소스 패널에서 DevTools를 엽니 다.
- 버튼 위로 마우스를 가져 가서 툴팁을 표시합니다.
- F8을 눌러 페이지 고정
- 요소 패널로 전환하고 왼쪽 상단의 돋보기 아이콘을 사용하여 툴팁을 선택합니다.
CSS로 인해 툴팁이 표시되는 경우 다음과 같이 할 수 있습니다.
단계별 :
- DevTools 열기
- 개발 도구 (링크)에서 트리거링 요소를 선택합니다.
- 마우스 오른쪽 버튼을 클릭하고 “force element state”를 선택하고 “: hover”를 선택합니다.
- CSS 툴팁 검사
답변
모두 당신이를 전환 할 수 있습니다 사파리와 크롬의 웹 인스펙터 제공 확인란 :active, :focus, :hover및:visited 요소의 상태를. 그것들을 사용하는 것이 더 쉬울 수 있습니다.
원정 여행:
크롬:
답변
이를 수행하는 또 다른 까다로운 방법이 있습니다.
- 툴팁을 표시하는 요소로 이동합니다.
- 마우스 오른쪽 버튼을 클릭하여 상황에 맞는 메뉴를 엽니 다.
- 마우스를 개발 도구 창으로 이동하고 개발 도구 패널의 아무 곳이나 왼쪽 클릭합니다.
툴팁은 계속 표시되고 요소 탭에서 검사 할 수 있습니다.
Chrome에서 테스트되었습니다. Firefox에서 작동하지 않는 것 같습니다.
답변
반면 @ SomeGuy의 대답은 (t-최대 애니메이션 GIF를위한) 우수, 대안으로 당신은 항상 프로그래밍을 할 수 있습니다. 콘솔을 열고 이벤트 이름을 입력하십시오.
document.getElementById('id').dispatchEvent(new Event('event-type'));(순수한 자바 스크립트 구문은 브라우저에 따라 다를 수 있음)
jQuery로 더 쉽게 :
$('#id').trigger('event-type');예제 ( http://getbootstrap.com/javascript/#tooltips )에서 콘솔을 열고 다음과 같이 입력합니다.
$("button:contains('Tooltip on right')").mouseenter();툴팁은 DOM에 표시되며 수동으로 검사 / 수정할 수 있습니다.
<div style="top: 14406.9px; left: 1048.25px; display: block;"
id="tooltip952596" class="tooltip fade right in" role="tooltip">
<div style="" class="tooltip-arrow"></div>
<div class="tooltip-inner">Tooltip on right</div></div>주석에서와 같이 페이지 프레임 위로 마우스 포인터를 이동하면 mouseout. 이를 방지하기 위해 F8(정답에서와 같이) 누르 거나 debugger;(스크립트에 해당하는) 입력 할 수 있습니다 .
