참조:Chrome Developer Tools의 hover state
나는 그것을 보고 싶습니다.:hover제가 크롬에서 맴도는 앵커 스타일입니다.Firebug에는 요소에 대해 다른 상태를 선택할 수 있는 스타일 드롭다운이 있습니다.
크롬에서 비슷한 것을 찾을 수 없는 것 같습니다.내가 뭘 빼놓았나요?
이제 유사 클래스 규칙을 모두 보고 요소에 강제 적용할 수 있습니다.
와 같은 :hover[] [[스타일]]을 누릅니다.:hov오른쪽 위에 있는 텍스트.
요소를 강제로 삽입하는 방법:hover상태, 마우스 오른쪽 버튼을 클릭하고 선택합니다.:hover.
Chrome Developer Tools 바로 가기의 요소 패널에 대한 추가 팁.
편집: 이 답변은 버그 수정 이전의 것입니다. 컷트의 답변을 참조하십시오.
This was a bit tricky, but here goes:- 요소를 마우스 오른쪽 버튼으로 클릭하지만 마우스 포인터를 요소에서 멀리 이동하지 말고 호버 상태로 유지합니다.
- 팝업 화살표와 같이 키보드를 통해 검사 요소를 선택한 다음 키를 입력합니다.
- Matched CSS Rules 아래에서 개발자 도구를 보면 :hover를 볼 수 있을 것입니다.
PS: 저는 이것을 당신의 질문 태그 중 하나에 시도했습니다.
부트스트랩 툴팁에서 호버 상태를 확인하고 싶었습니다. 강제 :hover출력을 Chrome dev Tools를 .mouseenter콘솔을 통한 이벤트가 Chrome에서 트릭을 했습니다.페이지에 jQuery가 있는 경우 다음을 실행할 수 있습니다.
$('.YOUR-TOOL-TIP-CLASS').trigger('mouseenter');
Chrome Developer Tools에서 HOVER STATE 스타일을 볼 수 있는 몇 가지 방법이 있습니다.
방법 01
방법 02
Firefox의 경우 기본 개발자 수
파이어버그 포함
도움이 된다면 최신 Chrome(47.0.2526.106)에서 이 방법이 더 쉬울 것 같습니다.
요소를 검사한 다음 왼쪽 홈통에 있는 세 개의 흰색 점을 클릭합니다.
그런 다음 다음 드롭다운에서 원하는 요소 상태를 선택합니다.
저는 이것을 할 방법이 없다고 생각합니다.저는 기능 요청을 제출했습니다.방법이 있다면 구글의 개발자들이 과감하게 지적할 것이고 나는 내 답변을 수정할 것입니다.만약 그렇지 않다면, 우리는 지켜봐야 할 것입니다.(투표를 위해 이슈를 시작할 수 있습니다)
Chrome 프로젝트 멤버의 댓글 1:10.0.620.0에서 스타일 패널은 선택한 요소에 대한 :hover 스타일을 표시하지만 :active는 표시하지 않습니다.
(본 게시물 기준) Current Stable 채널 버전은 8.0.552.224입니다.
Google Chrome의 안정적인 채널 설치를 베타 채널 또는 개발 채널로 바꿀 수 있습니다(Early Access Release Channels 참조).
또한 Dev 채널보다 훨씬 최신의 크롬 보조 설치를 설치할 수 있습니다.
카나리아 빌드는 Dev 채널보다 더 자주 업데이트되며 출시 전에 테스트되지 않습니다.카나리아 빌드를 사용하지 못할 수도 있기 때문에 기본 브라우저로 설정할 수 없으며 위의 Google Chrome 채널 외에 추가로 설치할 수도 있습니다. ...
저는 제가 하는 일이 상당히 해결책이라는 것을 알고 있지만, 완벽하게 작동하고 항상 그렇게 하고 있습니다.
그런 다음 다음과 같이 진행합니다.
- 먼저 Chrome Developer Tools가 도킹 해제되었는지 확인합니다.
- 그런 다음 Dev Tools 창의 아무 쪽이나 호버링 중에 검사할 요소의 중간으로 이동합니다.
- 마지막으로 요소를 마우스 오른쪽 버튼으로 클릭하고 요소를 검사한 후 Dev Tools 창으로 마우스를 이동하면 요소:hover css를 가지고 놀 수 있습니다.
건배!
메뉴를 디버깅하고 있었습니다.hoverChrome을 사용하여 상태를 표시하고 호버 상태 코드를 확인할 수 있도록 했습니다.
Elements에 있는 패널을 클릭합니다.Toggle Element state 후 "버을눌러선택니합다튼다니합택▁button"를 선택합니다.:hover.
Scripts에서 패널이동으로 Event Listeners Breakpoints오른쪽 하단 섹션에서 를 선택합니다.Mouse -> mouseup.
이제 메뉴를 검사하고 원하는 상자를 선택합니다. 상태가 됩니다.Elements패널(자세한 내용은Styles섹션)을 클릭합니다.
Chrome에서 호버 상태로 변경하는 것은 매우 간단합니다. 아래 단계를 수행하십시오.
페이지에서 마우스 오른쪽 버튼을 클릭하고 검사를 선택합니다.
DOM에서 검사할 요소를 선택합니다.
핀 아이콘(요소 상태 토글)을 선택합니다.
그런 다음 호버를 선택합니다.
이제 브라우저에서 선택한 DOM의 호버 상태를 볼 수 있습니다!
저는 이것이 크롬에서 더 이상 문제가 아니라 만일의 경우를 대비해서라고 생각합니다.TAB 키로 이동할 때 DOM을 검사하기 위해 이 jQuery 스크립트를 작성했습니다.
'mouseover'를 사용하도록 변경하면 다음과 같습니다.
$("body *").on('mouseover', function(event) {
console.log(event.target);
inspect(event.target);
event.stopPropagation();
});
중지할 요소를 클릭하거나 작업을 수행할 때마다 이벤트 핸들러를 제거하도록 쉽게 수정할 수 있습니다.
Babiker가 제안한 아래 단계를 따라 스타일을 확인할 수 있었습니다. "우클릭 요소이지만 마우스 포인터를 요소에서 멀리 이동하지 말고 호버 상태로 유지하십시오.팝업 화살표와 같이 키보드를 통해 검사 요소를 선택한 다음 Enter 키를 누릅니다."
스타일을 변경하려면 위의 단계를 수행한 다음 - 키보드에서 ctrl + Tab을 눌러 브라우저 탭을 변경합니다.그런 다음 디버그할 탭을 다시 클릭합니다.호버 화면이 계속 표시됩니다.이제 마우스를 조심스럽게 개발자 도구 영역으로 가져갑니다.
저의 경우, 저는 더버그 부트스트랩 툴팁을 원합니다.하지만 위의 방법들은 저에게 효과가 없습니다.부트스트랩은 마우스 인/아웃 이벤트와 같은 것으로 이것을 구현한 것 같습니다.
어쨌든 버튼을 마우스로 가리키면 버튼 아래에 brother html 요소가 생성되므로 "개발자 도구" 창의 "요소" 탭에서 버튼의 상위 요소를 선택하고, 버튼을 마우스로 가리키면 "Ctrl + C"가 생성된 코드가 포함된 소스 코드를 붙여넣을 수 있습니다.마지막으로 생성된 코드를 찾은 후 "요소" 탭에서 "HTML로 편집"하여 소스 코드에 추가합니다.
누군가에게 도움이 되길 바랍니다.
이 툴팁을 디버그하려면 디바이스 툴바 토글을 클릭하여 모바일 뷰로 전환한 다음 호버 효과가 있는 div를 클릭하고 포커스 비주얼을 클릭하여 div와 툴팁 사이의 간격을 확인할 수 있습니다. 이것이 도움이 되기를 바랍니다.
트리거할 수 있습니다.MouseEventJS를 사용하는 요소에서.다음은 이를 위한 방법입니다.hover.
- 마우스 오른쪽 버튼을 클릭하여 요소를 검사합니다.
- JS 경로를 다음과 같이 복사
- 소스 크롬 DevTools에서 "Esc" 키를 눌러 콘솔을 엽니다.
- 그런 다음 복사된 경로를 붙여넣고 추가합니다.
.dispatchEvent(new MouseEvent('mouseover', { 'bubbles': true }));다음과 같이: - Enter 키를 누르면 호버 상태 후에 발생하는 DOM 변경 사항과 상호 작용할 수 있습니다.
또한 코드가 데이터베이스에 숨겨져 있을 수 있으며 코드를 포함하는 실제 파일이 없을 수도 있습니다.제 고객 중 한 명이 Colorlib의 "Travelify" 테마를 가지고 있으며 WP 관리 GUI의 일부 옵션은 DB에 직접 쓰고 DB는 즉시 CSS 코드를 생성합니다. HTML 소스에서는 CSS를 볼 수 있지만 실제 파일에서는 볼 수 없습니다.이것은 저를 미치게 했고 저는 알아내는데 시간이 좀 걸렸습니다.WP를 위한 훌륭한 DB 검색 도구가 있는데, Inpyde GmbH의 "Search and Replace"라는 것이 제가 매우 귀중하다고 생각했습니다.물론 조심하세요!
건배!
언급URL : https://stackoverflow.com/questions/4515124/see-hover-state-in-chrome-developer-tools
'sourcecode' 카테고리의 다른 글
| MySQL에서 목록을 열고 전치하는 방법 (0) | 2023.06.12 |
|---|---|
| Firebase 계정에서 Firebase 참조 URL을 어디서 찾을 수 있습니까? (0) | 2023.06.12 |
| 날짜 문자열이 ISO 및 UTC 형식인지 확인합니다. (0) | 2023.06.07 |
| 벡터의 n번째 요소마다 추출 (0) | 2023.06.07 |
| dbms_output 버퍼를 늘리는 방법은 무엇입니까? (0) | 2023.06.07 |