Chrome의 개발자 도구를 통해 사이트에서 툴팁이 어떻게 구성되는지 보려고합니다. 그러나 항목 위로 마우스를 가져가도 “요소 검사”를 수행하면 html의 도구 설명에 대해 아무것도 표시되지 않습니다. 스타일을로 설정할 수 :hover있지만 여전히 툴팁의 html 또는 css를 볼 수 없습니다.
어떤 아이디어?
답변
실제로 Twitter Bootstrap 툴팁으로이를 수행하는 트릭을 찾았습니다. 다른 모니터에서 개발 도구 (F12)를 연 다음 요소 위로 마우스를 가져가 도구 설명을 표시하고 ‘요소 검사’를 선택하는 것처럼 마우스 오른쪽 버튼을 클릭합니다. 컨텍스트 메뉴를 열어두고 포커스를 개발 도구로 이동합니다. 도구 설명에 대한 html은 HTML에서 도구 설명에 대한 요소 옆에 표시되어야합니다. 그러면 다른 요소 인 것처럼 볼 수 있습니다. Chrome으로 돌아 가면 HTML이 사라 지므로주의해야 할 사항이 있습니다.
좀 이상한 방법이지만 나에게 효과가있어서 공유하겠다고 생각했습니다.
답변
이 솔루션은 추가 코드없이 작동합니다.
command-option-j콘솔을 열려면 누르 십시오. 콘솔의 오른쪽 상단 모서리에있는 창 모양 버튼을 클릭하여 다른 창에서 콘솔을 엽니 다.
그런 다음 Chrome 창에서 팝 오버를 트리거하는 요소 위로 마우스를 가져 command-`가서 콘솔에 집중해야하는 횟수만큼 누른 다음을 입력 debugger합니다. 그러면 페이지가 고정되고 요소 탭에서 요소를 검사 할 수 있습니다.
답변
F8 디버깅을 일시 중지합니다.
툴팁 위에 마우스를 놓고 F8표시되는 동안 누릅니다 .
이제 인스펙터를 사용하여 CSS를 볼 수 있습니다.
답변
툴팁을 강제로 표시하면됩니다.
$('.myelement').tooltip('open');이제 마우스 오버 상태에 관계없이 툴팁이 표시됩니다.
마크 업이 표시되어야하는 DOM 하단 근처에서 아래로 스크롤합니다.
업데이트 는 부트 스트랩 3에 대한 cneuro의 의견을 참조하십시오.
$('.myelement').tooltip('show');업데이트 는 Chrome에 대한 Marko Grešak의 답변을 참조하고 Safari도 $0현재 선택된 요소의 바로 가기로 사용할 수 있습니다. 이것은 Safari에서도 작동하는 것으로 보입니다.
$($0).tooltip('show')답변
f12콘솔 탭으로 이동을 클릭 하고 다음을 추가하십시오.
setTimeout(()=> {debugger},5000)이렇게하면 원하는 작업을 수행하는 데 5 초가 걸리며에서 중단됩니다 5 seconds. 그런 다음 대상 요소를 검사 할 수 있습니다.
(예 : 요소를 가리키고 5 초간 기다린 후 검사합니다.)
답변
저에게는 수락 된 답변이 작동하지 않았습니다. DevTools를 클릭하면 도구 설명이 즉시 닫혔습니다.
그러나 /superuser/249050/chrome-keyboard-shortcut-to-pause-script-execution 을 찾았 습니다.
- 콘솔에서 다음을 실행합니다.
const F12 = 123
window.addEventListener('keydown', function(event) {
if (event.keyCode === F12 ) {
debugger;
}
});-
인스펙터로 요소 강조
-
F12 누르기
이제 DOM이 변경되지 않도록 JavaScript를 일시 중지 한 상태에서 요소를 검사 할 수 있습니다.
답변
코딩없이 단일 창 응답
다른 답변 중 어느 것도 옳지 않거나 충분한 세부 정보가 없으므로 여기에 내 시도가 있습니다.
- F12 / Ctrl + Shift + I (Windows / Linux) 또는 Command + Option + I (Mac)를 사용하여 Chrome의 DevTools를 엽니 다.
- DevTools 창에서 Sources 탭을 선택합니다 .
- 마우스를 사용하여 검사 할 요소 위로 마우스를 가져 가면 도구 설명이 표시됩니다.
- F8 (Windows / Linux / Mac)을 눌러 스크립트 실행을 일시 중지합니다. 기본 창이 회색으로 표시되고 “디버거에서 일시 중지됨”팝업이 나타납니다.
- DevTools 창에서 Elements 탭을 선택합니다.
- 부트 스트랩은 툴팁의 경우, 툴팁은 마지막으로 표시됩니다
<div>에서<body>
