[css] 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 개발자 도구 도킹 해제

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

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

요소 위에 마우스를 올려 놓기

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

건배!