Chrome 개발자 도구에서 마우스 오버 상태 참조

Chrome:hover 에서 가리키고있는 앵커 의 스타일 을보고 싶습니다 . 에서 방화범 , 나를 요소에 대해 서로 다른 상태를 선택할 수있는 스타일 드롭 다운이있다.

Chrome에서 비슷한 것을 찾을 수없는 것 같습니다. 뭔가 빠졌습니까?

이제 의사 클래스 규칙을 모두보고 요소에 적용 할 수 있습니다.

:hover스타일 창에서 와 같은 규칙을 보려면 :hov오른쪽 상단 의 작은 텍스트를 클릭하십시오 .

요소를 강제로 :hover상태 로 만들려면 마우스 오른쪽 단추로 클릭하고을 선택하십시오 :hover.

온 추가 팁 요소 패널 의 크롬 개발자 도구 바로 가기 .

편집 :이 답변은 버그 수정 전에 이루어졌습니다 .tnothcutt의 답변을 참조하십시오.

• 요소를 마우스 오른쪽 버튼으로 클릭하지만 마우스 포인터를 요소에서 멀리 떨어 뜨리지 말고 마우스를 가져 가십시오.
• 적중 화살표와 같이 키보드를 통해 요소 검사를 선택한 다음 Enter 키를 선택하십시오.
• 일치하는 CSS 규칙에서 개발자 도구를 살펴보면 : 호버가 표시됩니다.

추신 : 나는 당신의 질문 태그 중 하나에서 이것을 시도했습니다.

Bootstrap 툴팁에서 호버 상태를 확인하고 싶었습니다. Chrome 개발자 도구에서 : hover 상태를 강요하면 필요한 출력이 생성되지 않았지만 콘솔을 통해 mouseenter 이벤트를 트리거하면 Chrome에서 트릭이 발생했습니다. jQuery가 페이지에 존재하면 다음을 실행할 수 있습니다.

$('.YOUR-TOOL-TIP-CLASS').trigger('mouseenter');

Chrome 개발자 도구에서 호버 상태 스타일 을 보는 방법에는 여러 가지가 있습니다 .

방법 01

방법 02

Firefox 기본 개발자 유료

Firebug로

도움이되는 경우 최신 Chrome (47.0.2526.106)에서 더 쉬운 것처럼 보입니다.

요소를 검사 한 다음 왼쪽 거터에서 3 개의 흰색 점을 클릭하십시오.

그런 다음이 드롭 다운에서 원하는 요소 상태를 선택하십시오.

나는 이것을 할 수있는 방법이 없다고 생각합니다. 기능 요청을 제출 했습니다 . 방법이 있다면 Google 개발자가 분명히 지적하고 답변을 편집 할 것입니다. 그렇지 않다면 기다렸다가 지켜봐야합니다. (이 문제에 별표를 표시하여 투표 할 수 있습니다)

Chrome 프로젝트 멤버의 주석 1 : 10.0.620.0에서 스타일 패널은 선택한 요소에 대한 : 호버 스타일을 표시하지만 : 활성은 아닙니다.

(이 게시물 기준) 현재 안정 채널 버전은 8.0.552.224입니다.

Chrome 의 안정적인 채널 설치를 베타 채널로 교체 할 수 있습니다. 또는 개발자 채널로 ( Early Access Release Channels 참조 ).

개발자 채널보다 훨씬 최신 인 2 차 크롬 설치를 설치할 수도 있습니다 .

... Canary 빌드는 Dev 채널보다 훨씬 더 자주 업데이트되며 릴리스 전에 테스트되지 않습니다. 카나리아 빌드는 때때로 사용할 수 없으므로 기본 브라우저로 설정할 수 없으며 위의 Chrome 채널에 추가하여 설치할 수 있습니다. ...

나는 내가하는 일이 해결 방법이라는 것을 알고 있지만 완벽하게 작동하며 매번 내가하는 방식입니다.

그런 다음 다음과 같이 진행하십시오.

• 먼저 Chrome 개발자 도구가 도킹 해제되어 있는지 확인합니다.
• 그런 다음, Dev Tools 창의 측면을 마우스로 가리킬 때 검사하려는 요소의 중간으로 이동하십시오.

• 마지막으로 요소를 마우스로 가리키고 마우스 오른쪽 단추를 클릭하여 요소를 검사 한 다음 마우스를 개발 도구 창으로 옮기면 요소를 가리킬 수 있습니다.

건배!

메뉴를 디버깅하고있었습니다 hoverChrome 상태를 하고 호버 상태 코드를 볼 수 있도록했습니다.

에서 Elements패널을 통해 클릭 Toggle Element state버튼을 선택합니다 :hover.

에서 Scripts패널로 이동 Event Listeners Breakpoints우측 하단 부분에 선택Mouse -> mouseup .

이제 메뉴를 검사하고 원하는 상자를 선택하십시오. 마우스 버튼을 놓으면 중지되고 Elements패널 에서 선택한 요소 호버 상태가 표시 됩니다 ( Styles섹션 참조).

호버로 변경Chrome에서 상태로 것은 매우 쉽습니다. 아래 단계를 따르십시오.

1) 페이지를 마우스 오른쪽 버튼으로 클릭 하고 inspect를 선택하십시오.

2) DOM 에서 검사하려는 요소를 선택하십시오.

3) 핀 아이콘 선택 (요소 상태 토글)

4) 그런 다음 호버를 선택하십시오.

이제 브라우저에서 선택한 DOM 의 호버 상태를 볼 수 있습니다 !

Babiker가 제안한 아래 단계를 따라 스타일을 볼 수 있습니다- "요소를 마우스 오른쪽 버튼으로 클릭하십시오. 그러나 마우스 포인터를 요소에서 떨어 뜨리지 말고 마우스를 올려 놓지 마십시오. 키보드로 요소를 선택하십시오. "키를 입력하십시오."

스타일을 변경하려면 위 단계를 수행 한 다음-키보드에서 ctrl + TAB을 눌러 브라우저 탭을 변경하십시오. 그런 다음 디버깅하려는 탭을 다시 클릭하십시오. 호버 화면이 계속 남아 있습니다. 이제 마우스를 개발자 도구 영역으로 조심스럽게 가져 가십시오.

필자의 경우 부트 스트랩 툴팁을 dubug하고 싶습니다. 그러나 위의 방법은 저에게 효과적이지 않습니다. 부트 스트랩이 마우스 인 / 아웃 이벤트와 같은 것으로 이것을 구현했다고 생각합니다.

어쨌든 버튼을 가리키면 버튼 아래에 형제 HTML 요소가 생성되므로 "개발자 도구"창의 "요소"탭에서 버튼의 부모 요소를 선택하고 버튼을 가리키면 "Ctrl + C", 그런 다음 생성 된 코드가 포함 된 소스 코드를 붙여 넣을 수 있습니다. 마지막으로 생성 된 코드를 찾아 "요소"탭의 "HTML로 편집"을 통해 소스 코드에 추가하십시오.

누군가를 도울 수 있기를 바랍니다.

나는 이것이 더 이상 Chrome에서 문제가 아니라고 생각합니다. 이 jQuery 스크립트를 작성했습니다Tab 키로 이동할 때 DOM을 검사하기 를 .

'마우스 오버'를 사용하도록 변경 한 경우 다음과 같습니다.

$("body *").on('mouseover', function(event) {       
    console.log(event.target);      
    inspect(event.target);
    event.stopPropagation();
});

중지하려는 요소를 클릭하거나 수행 할 때마다 이벤트 핸들러를 제거하도록 쉽게 수정할 수 있습니다.