Zamrozić ekran w panelu debugowania Chrome / DevTools w celu kontroli popover?

394

Używam inspektora chrome, aby spróbować przeanalizować z-indextwitterowego popover bootstrap, i uważam to za bardzo frustrujące ...

Czy istnieje sposób na zablokowanie okna popover (gdy jest pokazane), aby móc ocenić i zmodyfikować powiązany CSS?

Umieszczenie stałego „aktywowania” na powiązanym linku nie powoduje wyświetlenia popovera.

css google-chrome google-chrome-devtools Abram
źródło
7
Spróbuj ustawić punkt przerwania w swoim JavaScript natychmiast po wyświetleniu wyskakującego okienka ( debugger;)
Hope4You
5
Używam window.setTimeoutdo wyzwalania debuggerza 5 sekund, a następnie najeżdżam na element i czekam.
grimmdude
Witaj, tutaj pisarz techniczny DevTools. Czy wszyscy możecie mi przesłać MVCE demonstrujące problem? Od 2019 roku mamy kilka narzędzi, które powinny załatwić sprawę ( punkty przerwania detektora zdarzeń , przełączanie pseudoklasowe ), ale nie mogę podać szczegółowej odpowiedzi, dopóki nie będę w stanie odtworzyć twojej sytuacji.
Kayce Basques
Tutaj możesz znaleźć inne rozwiązanie dla Chrome i Firefox
Muhammed AbdElFatah
@KayceBasques Oto przykład: telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist Kliknij listę rozwijaną, aby ją otworzyć, a następnie spróbuj przejrzeć zawartość listy w widoku Elementy.
RMorrisey

Odpowiedzi:

704

Mam to działa. Oto moja procedura:

  1. Przejdź do żądanej strony
  2. Otwórz konsolę programistyczną - F12w systemie Windows / Linux lub option+ ⌘+ Jw systemie macOS
  3. Wybierz Sourceskartę w Inspektorze Chrome
  4. Najedź kursorem na żądany element w oknie przeglądarki internetowej, aby zainicjować popover
  5. Uderz F8w Windows / Linux (lub fn+ F8na macOS), gdy wyświetla się okienko popover. Jeśli kliknąłeś gdziekolwiek na rzeczywistej stronie, F8 nic nie zrobi. Twoje ostatnie kliknięcie musi znajdować się gdzieś w inspektorze, na przykład na karcie źródeł
  6. Przejdź do Elementszakładki w inspektorze
  7. Znajdź swój popover (będzie zagnieżdżony w kodzie HTML elementu wyzwalającego)
  8. Baw się dobrze modyfikując CSS
Abram
źródło
9
Ten przepływ pracy dał mi krótkie, przydatne wprowadzenie do debuggera punktu przerwania i pomógł wyodrębnić menu, które było trudne do stylizacji, ponieważ zniknęło po kliknięciu konsoli.
Trevor Pierce
22
Jeśli element DOM używa zdarzenia focusout do ukrycia, nie masz szans na trafienie F8!
Marcel
2
@Dean, aby wyzwolić F8, którego potrzebujesz fn!
mik01aj,
10
Aby uzyskać więcej informacji, F8skrótem faktycznie jest wstrzymanie debugera (wykonanie skryptu). A ctrl + \ także działa. ( cmd + \ w MacOS).
LeOn - Han Li
1
Lub możesz nacisnąć F8dwukrotnie
samdd
274

Aby móc sprawdzić dowolny element, wykonaj następujące czynności. Powinno to działać, nawet jeśli trudno jest powielić stan najechania kursorem:

  • Uruchom następujący skrypt javascript w konsoli. To włamie się do debuggera za 5 sekund.

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

  • Idź pokaż swój element (najeżdżając myszką lub jednak) i poczekaj, aż Chrome włamie się do debugera.

  • Teraz kliknij Elements kartę w Inspektorze Chrome i możesz tam znaleźć swój element.
  • Możesz także być w stanie kliknąć Find Elementikonę (wygląda jak szkło powiększające), a Chrome pozwoli Ci przejść, sprawdzić i znaleźć element na stronie, klikając go prawym przyciskiem myszy, a następnie wybierającInspect Element

Pamiętaj, że to podejście jest niewielką odmianą tej innej świetnej odpowiedzi na tej stronie.

Brad Parks
źródło
7
szanuję, że odpowiednio uszanowałeś odpowiedź frzsombor. miły.
Jeremy Moritz,
4
Właśnie tego potrzebowałem, ponieważ ta funkcjonalność była spowodowana dodaniem elementu DOM do js Focus i usunięciem rozmycia, co zawsze dzieje się po przejściu na narzędzia programistyczne.
trudesign
6
Rozwiązanie Abram F8 nie działało dla mnie. Ten zrobił. Dzięki!
Ralf
3
Dzięki. Zrobiłem zakładkę z tytułem : ❚❚, adres : javascript:debugger;. F8działa, ale dla tych, którzy wolą używać myszy, może to być wygodniejsze.
Tymek
1
Jak skomentowali inni, odpowiedź F8 nie działała dla mnie i doprowadzała mnie do szału! To działa jak urok. Dziękuję Ci!
DoYouEvenCodeBro
70

AKTUALIZACJA: Jak napisał Brad Parks w swoim komentarzu, istnieje znacznie lepsze i łatwiejsze rozwiązanie z tylko jedną linią kodu JS:

uruchom setTimeout(function(){debugger;},5000);, a następnie pokaż element i poczekaj, aż włamie się do debugera

Oryginalna odpowiedź:

Właśnie miałem ten sam problem i myślę, że znalazłem „uniwersalne” rozwiązanie. (zakładając, że strona korzysta z jQuery)
Mam nadzieję, że komuś to pomoże!

  1. Przejdź do zakładki Elementy w Inspektorze
  2. Kliknij prawym przyciskiem myszy <body>i kliknij „ Edytuj jako HTML ”
  3. Dodaj następujący element, <body>a następnie naciśnij Ctrl + Enter:
    <div id="debugFreeze" data-rand="0"></div>
  4. Kliknij ten nowy element prawym przyciskiem myszy i wybierz „Przerwij ...” -> „Modyfikacje atrybutów”
  5. Teraz przejdź do widoku konsoli i uruchom następujące polecenie:
    setTimeout(function(){$("#debugFreeze").attr("data-rand",Math.random())},5000);
  6. Teraz wróć do okna przeglądarki i masz 5 sekund na znalezienie elementu i kliknięcie go / najechanie / skupienie / etc, zanim punkt przerwania zostanie trafiony, a przeglądarka „zamrozi się”.
  7. Teraz możesz spokojnie sprawdzić swój kliknięty / zawieszony / skoncentrowany / etc element.

Oczywiście, jeśli masz pomysł, możesz zmodyfikować javascript i czas.

frzsombor
źródło
11
Hej! Świetny pomysł ... nawet nie musisz dodawać dodatkowego diva ... Po prostu uruchom ten skrypt javascript setTimeout(function(){debugger;}, 5000);, a następnie pokaż swój element i poczekaj, aż włamie się do Debuggera. Następnie kliknij kartę „Elementy” w Inspektorze Chrome, a tam możesz poszukać swojego elementu. Możesz także kliknąć ikonę „Znajdź element” (wygląda jak lupa), a Chrome pozwoli ci przejść i sprawdzić swój element na stronie, klikając go prawym przyciskiem myszy, a następnie wybierając „Sprawdź element”.
Brad Parks
5
Myślę, że powinieneś dodać to jako odpowiedź, ponieważ to rozwiązanie jest nie tylko lepsze niż moje, ale lepsze niż wszystkie inne tutaj. Bardzo miłe!
frzsombor
38
  1. Kliknij prawym przyciskiem myszy w dowolnym miejscu na karcie Elementy
  2. Wybierać Breakon... > subtree modifications
  3. Uruchom wyskakujące okienko, które chcesz zobaczyć, a zawiesi się, jeśli zobaczy zmiany w DOM
  4. Jeśli nadal nie widzisz wyskakującego okienka, kliknij Step over the next function(F10)przycisk obok Resume(F8)w górnym, górnym środku chromu, dopóki nie zamrozisz wyskakującego okienka, które chcesz zobaczyć.
Adrian Enriquez
źródło
3
DZIĘKUJĘ CI! Nie znałem tego i to mnie ratuje
R Claven
14

Przekonałem się, że działa to naprawdę dobrze w Chrome.

Kliknij prawym przyciskiem myszy element, który chcesz sprawdzić, a następnie kliknij polecenie Wymuś stan elementu> Najedź. Zrzut ekranu w załączeniu.

Wymuś stan elementu

Leah Huyghe
źródło
5
Działa tylko wtedy, gdy popover jest uruchamiany przez css.
mik01aj,
6

Umieść to w zakładce konsoli:

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

Następnie kliknij, gdzie wyświetlić wyskakujące okienko, 5s później - ekran zostanie zamrożony i baw się dobrze, dostosowując CSS.

Parker Lucenzo
źródło
0

Mój prosty sposób:

setTimeout(function(){ debugger; }, 3000);
Nadav B.
źródło
7
Jest to dokładnie to samo, co rozwiązanie Brada Parks opublikowane 3 lata temu
frzsombor
-2

Wypróbowałem inne rozwiązania tutaj, działają, ale jestem leniwy, więc to jest moje rozwiązanie

  1. najedź kursorem na element, aby uruchomić stan rozwinięty
  2. ctrl+shift +c
  3. ponownie najedź kursorem na element
  4. kliknij prawym przyciskiem myszy
  5. przejdź do debuggera

kliknięcie go prawym przyciskiem myszy nie rejestruje już zdarzenia myszy, ponieważ pojawia się menu kontekstowe, dzięki czemu można bezpiecznie odsunąć mysz

Vincent Tang
źródło