Firebug : 마우스 움직임으로 변경되는 요소를 검사하는 방법은 무엇입니까?

Firebug : 마우스 움직임으로 변경되는 요소를 검사하는 방법은 무엇입니까?

---

때로는 일부 영역에 마우스를 올려 놓으면 페이지에만 표시되는 요소를 검사해야합니다. 문제는 변경 사항을 확인하기 위해 마우스를 방화범 콘솔로 이동하기 시작하면 mouse-out 이벤트가 트리거되고 검사하려는 모든 변경 사항이 사라진다는 것입니다. 그러한 경우를 어떻게 처리합니까?

기본적으로 다음 중 하나를 찾고 있습니다.

• 마우스를 움직이지 않고 방화범 콘솔로 전환 (키보드 단축키를 사용할 수 있습니까?하지만 키보드만으로 방화범을 사용하는 방법을 알 수 없음)
• 마우스 움직임이 더 이상 이벤트를 트리거하지 않도록 페이지를 "고정"하는 기능이 있습니다.

감사.

---

나는 또한 이것을 할 수 있다고 생각한다.

• Firebugs Inspect 모드 선택

• 검사하려는 요소를 팝업하는 항목 위로 마우스를 가져간 다음 Tab키를 여러 번 사용하여 Firebug를 활성화합니다. 도구 모음이 활성화 된 후 Firebug에 들어가기 위해 Shift+ Tab뒤로 두 번했습니다.

• 그런 다음 L / R 화살표 키를 사용하여 요소를 축소 / 확장하고 U / D 화살표 키를 사용하여 Firebugs 콘솔을 탐색합니다.

어쨌든 나를 위해 일했습니다!

---

HTML 툴팁 (Firebug)

인스펙터 또는 DOM에서 요소를 선택합니다. 방화범의 "스타일"탭으로 이동하여 탭의 작은 화살표를 클릭하고 ": hover"를 선택합니다 ( ": active"도 사용 가능). 상태는 "호버"상태로 유지되며 다른 요소를 선택하여 호버 할 수 있습니다.

HTML 툴팁 (Firefox 개발자 도구)

버튼을 클릭하면 선택된 요소에 대한 : hover, : active 및 : focus 의사 클래스를 설정하는 데 사용할 수있는 세 개의 확인란이 표시됩니다.

이 기능은 HTML보기의 팝업 메뉴에서도 액세스 할 수 있습니다.

노드에 대해 이러한 의사 클래스 중 하나를 설정하면 의사 클래스가 적용된 모든 노드 옆에있는 마크 업보기에 주황색 점이 나타납니다.

JQuery 툴팁

콘솔을 열고 다음을 입력하십시오. jQuery('.css-class').trigger('mouseover')

일반 자바 스크립트 툴팁

콘솔을 열고 다음을 입력하십시오. document.getElementById('yourId').dispatchEvent(new Event('mouseover'));

---

Firebug의 스타일 패널에는 :active또는 :hover상태를 선택할 수있는 드롭 다운 메뉴가 있습니다 .

---

Jquery UI 툴팁의 경우 마침내 요소 숨기기에 대해 긴 지연을 설정하여 삭제하기 전에 검사 할 시간을 갖게되었습니다. 예를 들어, 나는 이것을 사용하여 툴팁을 검사했습니다.

    $( document ).tooltip({ hide: {duration: 100000 } });

대신에:

    $( document ).tooltip();

---

mouseout 이벤트 핸들러의 시작 부분에 중단 점을 삽입 할 수 있습니다. 계속할 수있을 때까지 코드가 실행되지 않으며 실행이 중지되는 동안 DOM 검사기 등을 사용할 수 있습니다.

---

타이머에서 디버거를 시작할 수도 있습니다. 콘솔에 다음 명령을 입력하십시오.

setTimeout(function(){ debugger; }, 10000);

이렇게하면 마우스를 사용하는 데 10 초가 걸리고 페이지를 검사하기 위해 원하는 방식으로 표시됩니다. 디버거가 시작되면 페이지가 고정되고 DOM이 변경되거나 추가 마우스 이벤트에 응답하지 않고 개발자 도구 탭에서 요소를 탐색 할 수 있습니다.

---

Firebug의 요소 검사 핫키는 Ctrl+ Shift+ C(Windows / Linux)입니다.

모든 Firebug 키보드 단축키 목록을 보려면 여기로 이동하십시오 .

---

부트 스트랩 툴팁 :

$(document ).tooltip({delay: { show: 0, hide: 100000 }});

---

:hoverCSS 메뉴에서 선택 하는 것은 일부 CSS 코드 만 검사하려는 경우 좋을 수 있지만 검사하려는 내용이 JavaScript를 사용하여 변경되면 작동하지 않습니다.

이 경우 간단한 해킹은 Firebug를 원하는 위치로 이동하고 브라우저 창에서 무언가를 끌어다 놓는 것보다 다른 창 (Firebug 막대의 오른쪽 상단 모서리)에서 Firebug를 여는 것입니다. 이제 Firebug 창에서 무엇이든 검사 할 수 있습니다. 마우스를 브라우저 창으로 다시 이동하지 마십시오.

---

Mouse over 와 같은 Javascript 이벤트의 경우 .

1. Firebug 열기 / 요소 검사.
2. mouseover 이벤트 전에 요소 를 클릭합니다 (예 : div 클릭). 선택되었음을 나타 내기 위해 파란색으로 바뀝니다.
3. Put your mouse over the element and don't move it from this point forward.
4. Use your ↑/↓ arrow keys to manoeuvre in Firebug.
5. Use your ←/→ arrow keys to expand/contract code with + or -.
6. Double tap Tab to get to the CSS pane.
7. Use the arrow keys to navigate. Use shift and arrow keys to select text. Ctrl & C to copy.
8. Hold Shift and double tap Tab to get back to the HTML pane.

---

I found that Chrome does work a bit differently than Firefox. In particular, menus that close when the mouse is clicked outside of the menu remain open when inspecting them in Chrome (and they close when inspecting them with Firebug). So the advice is to try to use a different development tool in a different browser to see if it makes a difference.

---

Open console:

If you have javascript based tooltip, find applicable elements in console with appropriate selector. like below and confirm you able to find appropriate element with selectors.

$('your selector') 

Write above javascript and Press enter. you will have list of elements.

Now e.g. If library added event on mouseenter enter following script:

$('your selector').mouseenter() 

Press enter.

이렇게하면 실제 마우스없이 마우스 이동 이벤트를 시뮬레이션 할 수 있습니다. 실제 마우스 포인터를 사용하여 디버거 도구에서 조사 할 수 있습니다.

---

이것은 지금까지 매우 오래된 질문이지만 질문의 "브라우저 고정"부분에 직접 답변하는 답변을 찾았습니다.

Control + Alt + B. "break on mutate"입니다. 즉, 방화범이 관여 된 요소 (Ctrl + Shift + C) 위로 마우스를 가져 가면 HTML 속성이 변경 될 때 대신 중단 점에 도달하여 경로 등을 쉽게 탐색 할 수 있습니다.

참고 URL : https://stackoverflow.com/questions/1675405/firebug-how-to-inspect-elements-changing-with-mouse-movements