팝 오버 검사를 위해 Chrome 디버거 / DevTools 패널의 화면 고정?

394

크롬 관리자를 사용하여 z-index트위터 부트 스트랩 팝 오버를 분석하고 매우 실망 스럽습니다 ...

관련 CSS를 평가하고 수정할 수 있도록 팝업을 고정하는 방법이 있습니까 (표시된 동안)?

연결된 링크에 고정 된 '호버'를 배치해도 팝 오버가 나타나지 않습니다.

css  google-chrome  google-chrome-devtools 
— 아브람
소스
7
팝업이 표시된 후 즉시 JavaScript에서 중단 점을 설정하십시오 ( debugger;)
— Hope4You
5
내가 사용하는 window.setTimeout트리거 debugger다음 호버 요소와 대기 동안 5 초.
— grimmdude
안녕하세요, DevTools 기술 저술가입니다. 문제를 시연하는 MVCE를 보내주실 수 있습니까 ? 2019 년 현재 트릭을 수행 해야하는 몇 가지 도구 ( 이벤트 리스너 중단 점 , 의사 클래스 토글 )가 있지만 상황을 재현 할 수있을 때까지 자세한 답변을 제공 할 수 없습니다.
— Kayce Basques
— 모하메드 AbdElFatah
@KayceBasques 예제는 다음과 같습니다. telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist 드롭 다운 목록을 클릭하여 연 다음 요소보기에서 목록 컨텐츠 팝업을 검사하십시오.
— RMorrisey

답변:

704

작동했습니다. 내 절차는 다음과 같습니다.

  1. 원하는 페이지로 이동
  2. 개발자 콘솔을 엽니 다 F12-Windows / Linux에서 또는 option+ ⌘+ JmacOS에서
  3. SourcesChrome 관리자 에서 탭을 선택하십시오.
  4. 웹 브라우저 창에서 원하는 요소 위에 마우스를 올려 놓으면 팝 오버가 시작됩니다.
  5. 팝 오버가 표시되는 동안 F8Windows / Linux (또는 macOS의 경우 fn+) F8에서 적중하십시오 . 실제 페이지의 아무 곳이나 클릭하면 F8이 아무 작업도 수행하지 않습니다. 마지막 클릭은 소스 탭과 같이 관리자 어딘가에 있어야합니다.
  6. Elements인스펙터 의 탭으로 이동
  7. 팝 오버 찾기 (트리거 요소의 HTML에 중첩 됨)
  8. CSS를 수정하는 재미
— 아브람
소스
9
이 워크 플로는 중단 점 디버거에 대한 짧고 유용한 소개를 제공했으며 콘솔 클릭시 사라져서 스타일을 지정하기 어려운 메뉴를 격리하는 데 도움이되었습니다.
— Trevor Pierce
22
DOM 요소가 focusout 이벤트를 사용하여 숨기면 F8을 칠 기회가 없습니다!
— Marcel
2
@Dean F8을 트리거하려면 사용해야합니다 fn!
— mik01aj
10
자세한 내용 F8은 바로 가기가 실제로 디버거를 일시 중지하는 것입니다 (스크립트 실행). 그리고 ctrl + \ 또한 작동합니다. ( cmd + \ MacOS에서).
— LeOn-Han Li
1
또는 F8두 번 누를 수 있습니다
— samdd
274

모든 요소를 ​​검사하려면 다음을 수행하십시오. 호버 상태를 복제하기 어려운 경우에도 작동합니다.

  • 콘솔에서 다음 자바 스크립트를 실행하십시오. 5 초 후에 디버거에 침입합니다.

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

  • 마우스를 올리거나 가져 와서 요소를 표시하고 Chrome이 디버거에 침입 할 때까지 기다리십시오.

  • 이제 ElementsChrome Inspector에서 탭을 클릭 하면 요소를 찾을 수 있습니다.
  • Find Element아이콘 (돋보기 모양) 을 클릭 할 수도 있고 Chrome에서 마우스 오른쪽 버튼을 클릭 한 다음 페이지에서 요소를 검사하고 찾아서 선택할 수 있습니다.Inspect Element

이 방법은 이 페이지의 다른 훌륭한 답변 과 약간 다릅니다 .

— 브래드 파크
소스
7
나는 당신이 frzsombor의 대답에 대해 올바른 존경을 표했다는 것을 존중합니다. 좋은.
— Jeremy Moritz
4
이 기능은 DOM 요소가 js Focus에 추가되고 흐림시 제거 되었기 때문에 필요한 기능입니다. 이것은 항상 개발 도구로 전환 할 때 발생합니다.
— trudesign
6
Abram의 F8 솔루션이 작동하지 않았습니다. 이건 감사!
— Ralf
3
고마워. 제목 : ❚❚, 주소 : 로 책갈피를 작성했습니다 javascript:debugger;. F8작동하지만 마우스 사용을 선호하는 사람들에게는 더 편리 할 수 ​​있습니다.
— Tymek
1
다른 사람들이 언급했듯이 F8 답변은 나를 위해 작동하지 않았으며 나를 완전히 몰아 냈습니다! 이것은 매력처럼 작동합니다. 감사합니다!
— DoYouEvenCodeBro
70

업데이트 : Brad Parks가 자신의 의견을 썼을 때 한 줄의 JS 코드만으로 훨씬 더 좋고 쉬운 솔루션이 있습니다.

을 실행 setTimeout(function(){debugger;},5000);한 다음 요소를 표시하고 디버거에 침입 할 때까지 기다립니다.

원래 답변 :

방금 같은 문제가 있었고 "유니버설"솔루션을 찾았습니다. (사이트가 jQuery를 사용한다고 가정)
누군가 도움이되기를 바랍니다.

  1. 인스펙터의 요소 탭으로 이동
  2. 마우스 오른쪽 버튼으로 클릭 <body>하고 "를 클릭 HTML로 편집 "
  3. 다음 요소를 추가 <body>한 후 Ctrl + Enter를 누르십시오.
    <div id="debugFreeze" data-rand="0"></div>
  4. 이 새로운 요소를 마우스 오른쪽 버튼으로 클릭하고 "Break on ..."-> "Attributes modified"를 선택하십시오.
  5. 이제 콘솔 보기 로 이동 하여 다음 명령을 실행하십시오.
    setTimeout(function(){$("#debugFreeze").attr("data-rand",Math.random())},5000);
  6. 이제 브라우저 창으로 돌아가서 5 초 동안 요소를 찾고 중단 점에 도달하고 브라우저가 "멈추기"전에 클릭 / 호버 / 포커스 / 등을 클릭하십시오.
  7. 이제 클릭 / 호버 / 포커스 / 등의 요소를 안전하게 검사 할 수 있습니다.

물론 아이디어를 얻는다면 자바 스크립트와 타이밍을 수정할 수 있습니다.

— frzsombor
소스
11
야! 좋은 아이디어 ... 추가 div를 추가 할 필요조차 없습니다 ... 대신이 자바 스크립트를 실행 setTimeout(function(){debugger;}, 5000);한 다음 요소를 표시하고 디버거에 들어갈 때까지 기다리십시오. 그런 다음 Chrome Inspector에서 '요소'탭을 클릭하면 해당 요소를 찾을 수 있습니다. '요소 찾기'아이콘 (돋보기 모양)을 클릭하면 Chrome에서 페이지를 마우스 오른쪽 버튼으로 클릭 한 다음 '요소 검사'를 선택하여 페이지에서 요소를 검사하고 찾을 수 있습니다.
— Brad Parks
5
이 솔루션이 내 것보다 낫지 만 여기의 다른 모든 것보다 낫기 때문에 이것을 대답으로 추가해야한다고 생각합니다. 정말 좋습니다!
— frzsombor
38
  1. 요소 탭 내부를 마우스 오른쪽 버튼으로 클릭
  2. 고르다 Breakon... > subtree modifications
  3. 보고 싶은 팝업을 트리거하면 DOM에 변경 사항이 표시되면 정지됩니다
  4. 그래도 팝업이 보이지 않으면보고 싶은 팝업을 고정시킬 때까지 크롬 상단 중앙의 Step over the next function(F10)옆 Resume(F8)에있는 버튼을 클릭 하십시오.
— 아드리안 엔리케스
소스
3
감사합니다! 나는 이것과 저를 구할 줄
— 몰랐
14

Chrome에서 실제로 잘 작동한다는 것을 알았습니다.

검사하려는 요소를 마우스 오른쪽 단추로 클릭 한 다음 요소 상태 강제 지정> 호버를 클릭하십시오. 스크린 샷이 첨부되었습니다.

힘 요소 상태

— 리아 휴이
소스
5
팝 오버가 CSS에 의해 트리거되는 경우에만 작동합니다.
— mik01aj
6

이것을 콘솔 탭에 넣으십시오.

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

그런 다음 5 초 후에 팝업을 표시 할 위치를 클릭하십시오-화면이 고정되어 CSS를 사용자 정의 할 수 있습니다.

— 파커 루 첸조
소스
0

내 간단한 방법 :

setTimeout(function(){ debugger; }, 3000);
— 나다 브 B
소스
7
이 3 년 전에 정확히 게시 브래드 공원 '솔루션과 동일
— frzsombor
-2

다른 솔루션을 시도했지만 작동하지만 게 으르므로 이것이 내 솔루션입니다.

  1. 확장 된 상태를 트리거하려면 요소 위로 마우스를 가져갑니다.
  2. ctrl+ shift+c
  3. 요소 위로 다시 마우스를 가져갑니다
  4. 마우스 오른쪽 버튼으로 클릭
  5. 디버거로 이동

마우스 오른쪽 버튼을 클릭하면 컨텍스트 메뉴가 팝업되어 더 이상 마우스 이벤트를 등록하지 않으므로 마우스를 안전하게 멀리 이동할 수 있습니다

— 빈센트 탕
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.