크롬 웹 검사기를 사용하여 코드를 보는 것은 매우 유용합니다. 그러나 예를 들어 버튼의 호버 코드를 어떻게 봅니까? 버튼 위로 마우스를 가져 가야하므로 인스펙터에서 사용할 수 없습니다 (마우스). 인스펙터에서이를 수행하는 단축키 나 다른 방법이 있습니까?
답변
이제 가상 클래스 스타일 규칙을 모두보고 요소에 적용 할 수 있습니다.
:hover스타일 창에서 와 같은 규칙을 보려면 오른쪽 상단의 작은 점선 상자 버튼을 클릭합니다.
요소를 :hover상태 로 강제하려면 마우스 오른쪽 단추를 클릭하십시오.
또는 스크립트 패널에서 이벤트 리스너 중단 점 사이드 바 창을 사용하고 마우스 오버 핸들러에서 일시 중지하도록 선택할 수 있습니다.
답변
또는 스크립트 패널에서 이벤트 리스너 중단 점 사이드 바 창을 사용하고 마우스 오버 핸들러에서 일시 중지하도록 선택할 수 있습니다.
답변
약간 성가신 일이지만 요소를 마우스 오른쪽 버튼으로 클릭 한 다음 링크 위에 마우스를 놓고 키보드를 사용하여 ‘요소 검사’링크를 선택하고 Enter 키를 눌러야합니다. 선택한 요소의 hover 가상 클래스에 대한 CSS가 표시됩니다.
향후 빌드에서이 작업이 좀 더 쉬워지기를 바랍니다.
답변
Chrome에서 :
요소 위에 마우스를 놓은 다음 클릭 CTRL+SHIFT+C하여 해당 요소를 검사 할 수도 있습니다 .
Firefox에서 :
방화범에서 :
답변
귀하의 질문을 올바르게 이해하고 있는지 확실하지 않지만 이벤트 핸들러 코드를 보려면 요소를 검사하고 요소 패널의 이벤트 리스너 사이드 바 창을 살펴보십시오. 또 다른 방법은 스크립트 패널에서 일시 중지 버튼을 누르고 요소를 가리는 것입니다. 디버거는 첫 번째 이벤트 처리기의 첫 번째 명령에서 중지됩니다.
