[javascript] 다른 요소를 마우스 오버 / 입력 할 때만 나타나는 요소 검사

Program / 글쓴이

종종 다른 요소를 마우스 오버 / 입력 할 때만 나타나는 요소 (예 : 툴팁)를 검사하고 싶습니다. 나타나는 요소는 jQuery의 mouseenter 이벤트를 통해 표시됩니다.

마우스가 포함 된 요소를 떠날 때 도구 설명이 사라지기 때문에 도구 설명을 검사 할 수 없습니다.

요소 위로 마우스를 가져간 다음 브라우저의 JS를 일시 중지하고 성공적으로 검사 할 수 있도록 JS 이벤트를 일시 중지하는 방법이 있습니까?

예를 들어 Twitter 부트 스트랩의 도구 설명 ( http://getbootstrap.com/javascript/#tooltips)을 살펴보십시오 .

답변

Chrome 38.0.2094.0에서는 상당히 쉽습니다.

다음과 같이 표시됩니다.

단계별 :

  1. 소스 패널에서 DevTools를 엽니 다.
  2. 버튼 위로 마우스를 가져 가서 툴팁을 표시합니다.
  3. F8을 눌러 페이지 고정
  4. 요소 패널로 전환하고 왼쪽 상단의 돋보기 아이콘을 사용하여 툴팁을 선택합니다.

CSS로 인해 툴팁이 표시되는 경우 다음과 같이 할 수 있습니다.

단계별 :

  1. DevTools 열기
  2. 개발 도구 (링크)에서 트리거링 요소를 선택합니다.
  3. 마우스 오른쪽 버튼을 클릭하고 “force element state”를 선택하고 “: hover”를 선택합니다.
  4. CSS 툴팁 검사

답변

모두 당신이를 전환 할 수 있습니다 사파리와 크롬의 웹 인스펙터 제공 확인란 :active, :focus, :hover및:visited 요소의 상태를. 그것들을 사용하는 것이 더 쉬울 수 있습니다.

원정 여행:

Safari의 체크 상자

크롬:

Chrome의 체크 박스

답변

이를 수행하는 또 다른 까다로운 방법이 있습니다.

  1. 툴팁을 표시하는 요소로 이동합니다.
  2. 마우스 오른쪽 버튼을 클릭하여 상황에 맞는 메뉴를 엽니 다.
  3. 마우스를 개발 도구 창으로 이동하고 개발 도구 패널의 아무 곳이나 왼쪽 클릭합니다.

툴팁은 계속 표시되고 요소 탭에서 검사 할 수 있습니다.

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;(스크립트에 해당하는) 입력 할 수 있습니다 .

답변