1

Chrome (및 Firefox)에는 요소의 현재 상태를 변경하는 데 정말 멋진 도구가 있습니다. 호버 상태로 설정하면 당신은/검사 CSS를 수정할 수 있도록 :개발자 도구로 JavaScript 이벤트를 에뮬레이트 하시겠습니까?

enter image description here

문제는이 자바 스크립트 이벤트를 설정하지 않는 것이다.

현재 커서를 가리키면 표시되는 툴팁의 스타일을 지정하려고합니다. 요소를 마우스로 가져 가면 툴팁이 사라지기 때문에 수동으로 요소 위에 마우스를 올려 놓기가 어렵습니다. 개발자 도구에서 마우스를 가져 가면 상태가 jQuery 이벤트를 시작하지 않는 것 같습니다. 내가 개발자 도구 관리자의 요소에 ID를 추가하는 리조트 데

는 다음 콘솔에서 다음을 수행 : 잘못된 느낌 (약간 복잡)

$("#custom-element-hover").mouseover(); 

합니다.

잘 모르는 더 좋은 방법이 있습니까?

답변

2

간단한 상황에서 나는 콘솔을 사용하는 것이 더 쉽다고 생각합니다. 그러나 개발자 도구에서, 당신은 또한 이벤트 리스너 코드를 찾을 수 있으며 중단 점 설정 :

enter image description here

그런 다음 바로이 핸들러를 클릭하고 소스보기를 할을 {} 버튼으로 소스를 unminimize 및 설정 이 핸들러 함수의 중단 점.

관련없는 이벤트에서이 핸들러 함수가 트리거되는 경우 해당 핸들러 함수를 마우스 오른쪽 단추로 클릭하고 조건부 중단 점을 작성하거나 올바른 식의 이벤트를 확인할 수 있도록 조사 식을 추가해야 할 수 있습니다.

같은 중단 점 설정 방법을 사용하여 특정 mouseout 이벤트를 건너 뛸 수도 있습니다.

1

나는 이런 종류의 상황에서 내가 할 수있는 것을 나눌 수 있습니다. 크롬 디버거에서 요소 탭을 열고 대상 요소를 마우스 오른쪽 버튼으로 클릭합니다. 이

#mdhelp-tabs > li:nth-child(1) 

같은이 당신이 얻을 것이다 뭔가를 할 경우 그 때 나는 "복사 CSS 경로"

enter image description here

를 선택하고이 문자열은 실제로 jQuery를위한 legimit 셀렉터로 사용할 수 있습니다. 따라서이

$("#mdhelp-tabs > li:nth-child(1)") 

은 대상 요소가 dom 인 jquery 객체를 제공합니다.

그래서 처리 할 모든 단일 요소에 ID를 할당하지 않아도됩니다.

-1

나는 확실하지 오전하지만 당신은 툴팁

enter image description here

을 처리하기 위해 콘솔을 사용할 수 있습니다