Chrome에서 마우스 커서를 올린 요소를 검사 하시겠습니까?
답변:
실제로 Twitter Bootstrap 툴팁으로이를 수행하는 트릭을 찾았습니다. 다른 모니터에서 개발 도구 (F12)를 연 다음 요소 위로 마우스를 가져가 도구 설명을 표시하고 '요소 검사'를 선택하는 것처럼 마우스 오른쪽 버튼을 클릭합니다. 컨텍스트 메뉴를 열어두고 포커스를 개발 도구로 이동합니다. 도구 설명에 대한 html은 HTML에서 도구 설명에 대한 요소 옆에 표시되어야합니다. 그러면 다른 요소 인 것처럼 볼 수 있습니다. Chrome으로 돌아 가면 HTML이 사라 지므로주의해야 할 사항이 있습니다.
좀 이상한 방법이지만 나에게 효과가있어서 공유하겠다고 생각했습니다.
이 솔루션은 추가 코드없이 작동합니다.
command-option-j콘솔을 열려면 누르 십시오. 콘솔의 오른쪽 상단 모서리에있는 창 모양 버튼을 클릭하여 다른 창에서 콘솔을 엽니 다.
그런 다음 Chrome 창에서 팝 오버를 트리거하는 요소 위로 마우스를 가져 command-`가서 콘솔에 집중해야하는 횟수만큼 누른 다음을 입력 debugger합니다. 그러면 페이지가 고정되고 요소 탭에서 요소를 검사 할 수 있습니다.
debugger콘솔에 쓰는 동안 초점 alt+tab을 잃은 경우 요소 위로 마우스를 가져 가면서 키를 누를 수 있습니다 . Windows의 Chromium 앱에서 작동했습니다.
F8 디버깅을 일시 중지합니다.
툴팁 위에 마우스를 놓고 F8표시되는 동안 누릅니다 .
이제 인스펙터를 사용하여 CSS를 볼 수 있습니다.
툴팁을 강제로 표시하면됩니다.
$('.myelement').tooltip('open');이제 마우스 오버 상태에 관계없이 툴팁이 표시됩니다.
마크 업이 표시되어야하는 DOM 하단 근처에서 아래로 스크롤합니다.
업데이트 는 부트 스트랩 3에 대한 cneuro의 의견을 참조하십시오.
$('.myelement').tooltip('show');업데이트 는 Chrome에 대한 Marko Grešak의 답변을 참조하고 Safari도 $0현재 선택된 요소의 바로 가기로 사용할 수 있습니다. 이것은 Safari에서도 작동하는 것으로 보입니다.
$($0).tooltip('show')$0콘솔에서와 같이 액세스 할 수 있습니다 . 따라서 툴팁을 트리거하는 요소를 선택하고을 실행할 수 $($0).tooltip('show')있습니다.
저에게는 수락 된 답변이 작동하지 않았습니다. 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>
다음과 같이하세요
Inspect크롬에서 창을 엽니 다 .툴팁 위에 마우스를 놓습니다.
프레스 F8
JS 실행이 일시 중지되고 툴팁을 검사 할 수 있습니다.
눌러 F8다시 실행하고 시작 F10디버깅 할 수 있습니다.
이러한 툴팁을 편집하는 것은 매우 간단합니다.
1 단계 : 툴팁이있는 요소를 검사합니다. devtools에서 파란색으로 강조 표시되어 있는지 확인하십시오.
2 단계 : 요소 (devtools 부분)를 마우스 오른쪽 버튼으로 클릭하고 Break on에서 속성 수정을 선택합니다.
3 단계 : 검사 된 요소 위로 마우스를 가져 가면 작은 텍스트와 함께 회색 오버레이가 사이트 위에 나타납니다. 디버거에서 일시 중지됨
화면 상단
4 단계 : 마우스 오버 상태가 선택 될 때까지 파란색 화살표를 클릭합니다.
5 단계 : 도구 설명 검사 및 편집
Linux의 Chome에서는 다음을 수행하여 WikiPedia에 대한 참조와 같은 JS 생성 툴팁에 대해이를 수행 할 수 있습니다.
위에서 언급했듯이 F12를 사용하여 개발 도구를 엽니 다. 다른 창에서 엽니 다. 툴팁을 강조 표시하고 Ctrl-Shift-C (HTML Inspector)를 클릭합니다. 팁 위로 이동하면 개발 창에 적절한 섹션이 표시됩니다.
마우스를 떼어 놓을 때 팁을 열어 두어야 다른 창에서 더 철저하게 검사 할 수 있습니다. 툴팁을 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴를 그대로두고 개발 도구 창을 클릭합니다. 이 시나리오에서는 위키 백과 창에 팁을 남겨 둡니다.
어느 정도는 부트 스트랩 팁에서도 작동합니다.
개발 도구는 도구 설명과 같이 마우스가있는 요소를 검사하는 방법을 제공합니다.
1-F12를 사용하여 개발 도구를 엽니 다.
2- "요소"탭을 선택합니다.
3-툴팁이 포함 된 상위 요소를 선택합니다.
4- "..."(상위 요소 줄에 있음)를 클릭하고 "Break on"/ "subtree modifiers"를 선택한 후 (아래 이미지 참조)
5-마지막으로 응용 프로그램으로 돌아가서 도구 설명이 표시되도록합니다. 툴팁이 표시되면 실행을 차단해야합니다.
누군가에게 유용 할 수 있기를 바랍니다!
개발자 도구 내에서 : hover 상태를 토글하는 것은 처음에 CSS : hover 규칙을 통해 힌트 텍스트가 활성화 된 경우에만 영향을 미칩니다. 토글은 렌더링 목적으로 요소에 마우스 오버 상태 만 적용하지만 해당 자바 스크립트 마우스 오버 이벤트를 트리거하지 않습니다.
AngularJS와 같은 많은 프레임 워크는 대상 요소를 가리키면 JavaScript를 통해 문서 본문 하단에 툴팁 HTML을 동적으로 첨부하므로 대상 요소를 마우스로 가리키고 검사하는 것은 도움이되지 않습니다.
@joeyyang의 대답은이 시나리오에서 나를 위해 매우 잘 작동했습니다.
내가 찾은 가장 쉬운 방법 중 하나는 다음과 같습니다.
측면에서 Chrome 개발 도구를 엽니 다.
요소 위로 마우스를 가져갑니다.
마우스 오른쪽 버튼으로 클릭
개발 도구를 클릭하십시오.
이제 스타일을 검사하고 변경할 수 있습니다.