크롬 웹 인스펙터를 사용하여 호버 코드를 보는 방법

99

크롬 웹 검사기를 사용하여 코드를 보는 것은 매우 유용합니다. 그러나 예를 들어 버튼의 호버 코드를 어떻게 봅니까? 버튼 위로 마우스를 가져 가야하므로 인스펙터에서 사용할 수 없습니다 (마우스). 인스펙터에서이를 수행하는 단축키 나 다른 방법이 있습니까?

css  google-chrome  google-chrome-devtools  web-inspector 
— 악.
소스
2
이것의 중복이 아닙니까? stackoverflow.com/questions/4515124/…
— Mixologic
이것이 귀하의 질문에 대답합니까? Chrome 개발자 도구의 마우스
— 오버

답변:

156

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

:hover스타일 창에서 와 같은 규칙을 보려면 오른쪽 상단의 작은 점선 상자 버튼을 클릭합니다.

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

또는 스크립트 패널에서 이벤트 리스너 중단 점 사이드 바 창을 사용하고 마우스 오버 핸들러에서 일시 중지하도록 선택할 수 있습니다.

— 트래비스 노스 컷
소스
1
Chrome 48 (및 perh 이전 버전)에서 점선 상자는 마우스를 가져 가면 요소 상태 전환이라는 압정 아이콘으로 대체되었습니다. 그런 다음 드롭 다운 목록에서 "hover"를 선택합니다.
— sameers
15

또는 스크립트 패널에서 이벤트 리스너 중단 점 사이드 바 창을 사용하고 마우스 오버 핸들러에서 일시 중지하도록 선택할 수 있습니다.

— 유리 세미 카츠키
소스
6

약간 성가신 일이지만 요소를 마우스 오른쪽 버튼으로 클릭 한 다음 링크 위에 마우스를 놓고 키보드를 사용하여 '요소 검사'링크를 선택하고 Enter 키를 눌러야합니다. 선택한 요소의 hover 가상 클래스에 대한 CSS가 표시됩니다.

향후 빌드에서이 작업이 좀 더 쉬워지기를 바랍니다.

— 보라색
소스
알아두면 좋지만 예, 키보드 만 사용하여 요소 검사 창을 훑어 보는 동안에도 마우스가 링크 위로 마우스를 가져 가야한다는 것은 매우 실망스러운 일입니다. 얼마나 귀찮은 일입니까!
— Chad Schultz 2012
실제 에 요소를 강요의 전 과정 :hover(상태 as in the accepted answer), 또한 요소를 통해 비아를 마우스 오른쪽 단추로 클릭을 달성,> 검사하고이 포인터를 유지 한 다음이를 위해 ... 의사 코드를 확인하기 위해 감사를 키보드 키를 사용하여 작업하는 대안 .... 그래서 실제로 성가신 것은 아닙니다 !
— :)
1

귀하의 질문을 올바르게 이해하고 있는지 확실하지 않지만 이벤트 핸들러 코드를 보려면 요소를 검사하고 요소 패널의 이벤트 리스너 사이드 바 창을 살펴보십시오. 또 다른 방법은 스크립트 패널에서 일시 중지 버튼을 누르고 요소를 가리는 것입니다. 디버거는 첫 번째 이벤트 처리기의 첫 번째 명령에서 중지됩니다.

— 로이 슬로
소스
이 작업을 수행하는 방법에 대해 좀 더 구체적으로 말씀해 주시겠습니까?. 일반적인 경우는 내가 좋아하는 버튼이며, 일반적인 검사와 동일한 방식으로 호버링 효과가 어떻게 수행되는지 확인하고 싶습니다.
— 보.
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.