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

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

---

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

---

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

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

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

또는 펼쳐 패널에서 이벤트 리스너 중단 점 바 창을 사용하고 마우스에서 일시 중지를 선택할 수 있습니다.

---

또는 펼쳐 패널에서 이벤트 리스너 중단 점 바 창을 사용하고 마우스에서 일시 중지를 선택할 수 있습니다.

---

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

좀 더 빨리 빌드에서 작업하세요.

---

Chrome에서 :

요소 위에 마우스를 놓은 다음 클릭 CTRL+SHIFT+C하여 해당 요소를 검사 할 수도 있습니다 .

Firefox에서 :

방화범에서 :

출처 : https://stackoverflow.com/a/11272205/2165415

---

귀하의 질문을보기 이해하고 있는지 있는지 여부 검사 이벤트 코드를보기 요소를 검사하고 요소의 이벤트 리스너 사이드 바 창을 살펴 봅니다. 또 다른 방법은 패널에서 일시 중지를 버튼을 가리는 것입니다. 디버거는 첫 번째 이벤트 처리기의 첫 번째 명령에서 중지됩니다.

---

답변은 아래 링크를 참조하십시오

Chrome 개발자 도구에서 마우스 오버 상태를 참조하세요.

참고 URL : https://stackoverflow.com/questions/5789739/how-to-use-chrome-web-inspector-to-view-hover-code