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

Program / 글쓴이

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

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

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

답변

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

  1. 원하는 페이지로 이동
  2. 개발자 콘솔을 엽니 다 F12-Windows / Linux에서 또는 option+ ⌘+ JmacOS에서
  3. SourcesChrome 관리자 에서 탭을 선택하십시오.
  4. 웹 브라우저 창에서 원하는 요소 위에 마우스를 올려 놓으면 팝 오버가 시작됩니다.
  5. 팝 오버가 표시되는 동안 F8Windows / Linux (또는 macOS의 경우 fn+) F8에서 적중하십시오 . 실제 페이지의 아무 곳이나 클릭하면 F8이 아무 작업도 수행하지 않습니다. 마지막 클릭은 소스 탭과 같이 관리자 어딘가에 있어야합니다.
  6. Elements인스펙터 의 탭으로 이동
  7. 팝 오버 찾기 (트리거 요소의 HTML에 중첩 됨)
  8. CSS를 수정하는 재미

답변

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

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

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

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

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

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

답변

업데이트 :
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. 이제 클릭 / 호버 / 포커스 / 등의 요소를 안전하게 검사 할 수 있습니다.

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

답변

  1. 요소 탭 내부를 마우스 오른쪽 버튼으로 클릭
  2. 고르다 Breakon... > subtree modifications
  3. 보고 싶은 팝업을 트리거하면 DOM에 변경 사항이 표시되면 정지됩니다
  4. 그래도 팝업이 보이지 않으면보고 싶은 팝업을 고정시킬 때까지 크롬 상단 중앙의 Step over the next function(F10)옆 Resume(F8)에있는 버튼을 클릭 하십시오.

답변

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

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

힘 요소 상태

답변

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

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

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

답변

내 간단한 방법 :

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