Jak mogę sprawdzić znikający element w przeglądarce?

Jak mogę sprawdzić element, który znika, gdy moja mysz się oddala?

Nie wiem, czy to identyfikator, klasa czy coś, ale chcę to sprawdzić.

Rozwiązania, które wypróbowałem:

Uruchom selektor jQuery w konsoli, $('*:contains("some text")')ale nie miałem szczęścia, głównie dlatego, że element nie jest ukryty, ale prawdopodobnie usunięty z drzewa DOM.

Ręczna inspekcja drzewa DOM pod kątem zmian nie daje mi nic, ponieważ wydaje mi się, że jest po prostu zbyt szybko, aby zauważyć, co się zmieniło.

SUKCES:

Odniosłem sukces z punktami przerwania zdarzeń. A konkretnie - w moim przypadku mousedown. Po prostu przejdź do Sources-> Event Listener Breakpoints-> Mouse-> mousedownw Chrome. Następnie kliknąłem element, który chciałem sprawdzić, a wewnątrz Scope Variableszobaczyłem kilka przydatnych wskazówek.

(Ta odpowiedź dotyczy tylko Narzędzi Chrome dla programistów. Zobacz aktualizację poniżej).

Znajdź element, który zawiera znikający element. Kliknij prawym przyciskiem myszy element i zastosuj „Przerwij na ...> Modyfikacje poddrzewa”. Spowoduje to wstrzymanie debugera, zanim element zniknie, co pozwoli na interakcję z elementem w stanie wstrzymania.

Aktualizacja z 22 października 2019 r .: wraz z wydaniem wersji 70 wygląda na to, że FireFox wreszcie obsługuje ten rodzaj debugowania 2 3 :

Alternatywna metoda w Chrome:

• Otwórz devTools (F12).
• Wybierz kartę „Źródła”.
• Gdy żądany element jest wyświetlony, naciśnij klawisz F8 (lub Ctrl + /). Spowoduje to przerwanie wykonywania skryptu i „zamrożenie” modelu DOM dokładnie tak, jak jest wyświetlany.
• Od tego momentu użyj Ctrl + Shift + C, aby zaznaczyć element.

1. Otwórz konsolę
2. Wpisz setTimeout(()=>{debugger;},5000);
3. naciśnij enter

Teraz masz 5 sekund, aby pojawił się element. Gdy się pojawi, poczekaj, aż debugger zadziała. Dopóki nie wznowisz gry, możesz bawić się swoim żywiołem i nie zniknie.

Przydatna wskazówka, aby za każdym razem unikać powtarzania powyższych kroków:

dodaj to jako bookmarklet:

1. Dodaj dowolną stronę do zakładek
2. Edytuj tę nową zakładkę
3. Zastąp adres URL / lokalizację: javascript:(function(){setTimeout(()=>{debugger;},5000);})();

Następnym razem, gdy będziesz chciał tego użyć, po prostu kliknij / dotknij tej zakładki.

Używam Chrome na Macu. Wykonałem powyższe kroki, ale spróbuję wyjaśnić trochę więcej:

1. Kliknij prawym przyciskiem myszy i przejdź do sprawdzenia elementu.
2. Przejdź do zakładki źródeł.
3. Następnie umieść kursor na elemencie.
4. Następnie za pomocą klawiatury F8 lub Command(Window) \ . Spowoduje zatrzymanie ekranu w stanie statycznym, a element nie zniknie po najechaniu kursorem.

W Firebug istnieją różne rozwiązania tego problemu:

1. Możesz użyć Break On Mutate w panelu HTML. (dzięki temu będziesz mógł również dowiedzieć się, który to element)
2. Możesz kliknąć element prawym przyciskiem myszy i wybrać opcję Zbadaj element za pomocą Firebuga

Możesz również zapoznać się z wydaniem 551 , w którym prosi się o czasowe blokowanie określonych wydarzeń.

Edytować:

Aby dowiedzieć się, który to element, możesz również włączyć opcje panelu HTML Podświetl zmiany , Rozwiń zmiany i Przewiń zmiany do widoku, aby element był widoczny w panelu HTML.

Sebastian

W moim przypadku użyłem opcji Rozwiń rekurencyjnie w Google Chrome:

Kroki są następujące:

1. Sprawdź rozwijane pole
2. Znajdź dynamiczny DOM (fioletowe podświetlenie)
3. Kliknij prawym przyciskiem myszy ten dynamiczny DOM
4. Wybierz Rozwiń rekurencyjnie :
5. Widzimy, że są tam wszystkie elementy

Oto demo:

Najedź myszą na element i naciśnij klawisz F8 (w Chrome), aby wstrzymać wykonywanie skryptu. Stan najechania pozostanie widoczny dla Ciebie.

Zabierze Cię do karty źródeł. Wróć do zakładki Elementy. Ten kod czasowy nie zniknie.

możesz zobaczyć elementy pojawiające się i znikające w inspektorze pod elementami. Jeśli przejdziesz do elementu, gdy jest on widoczny, powinieneś być w stanie zobaczyć, jak znika lub zobaczyć zmianę css, gdy zmienia się stan.

Jest to możliwe dzięki firebug w Firefoksie lub wbudowanemu inspektorowi w chrome.

Miałem ten sam problem, ale używam Firefoksa, który znika, gdy tylko otworzę, sprawdź element znalazł rozwiązanie: otwórz 4 myślniki (ustawienia) przejdź do programisty internetowego> Debugger i natychmiast naciśnij F8, który jest skrótem do pauzy zatrzymującej skrypt zanim kopie i wykryje, że otworzyłeś narzędzia programistyczne