Jak mogę sprawdzić element html, który znika z DOM po utracie fokusu?

Próbuję sprawdzić właściwości CSS z danych wejściowych do komórki tabeli. Dane wejściowe pojawiają się po kliknięciu i znika po utracie ostrości, tak jak przy próbie sprawdzenia. Jak mogę to zrobić, aby nie stracić ostrości podczas przechodzenia do innego okna (inspektora)?

W przeglądarce Chrome otwórz Narzędzia programistyczne i wybierz kartę Elementy , a następnie otwórz menu kontekstowe węzła nadrzędnego elementu, który chcesz sprawdzić, w menu kontekstowym kliknij Przerwij na > Modyfikacje poddrzewa .

Następnie wystarczy kliknąć stronę, aby przejść do inspektora bez utraty ostrości lub utraty elementu, który chcesz sprawdzić.

Możesz uchwycić znikający element, wstrzymując wykonywanie JavaScript za pomocą skrótu klawiaturowego bez poruszania myszą. Oto jak to zrobić w Chrome:

1. Otwórz Narzędzia programistyczne i przejdź do Źródła.

2. Zwróć uwagę na skrót do wstrzymania wykonywania skryptu - F8.

   

3. Wejdź w interakcję z interfejsem użytkownika, aby pojawił się element.

4. Hit F8.
5. Jak możesz poruszać myszą, sprawdzać DOM, cokolwiek. Element pozostanie tam.

Ta sztuczka działa również w Firefoksie i innych nowoczesnych przeglądarkach.

Jeśli wszystko inne zawiedzie, wpisz to w konsoli:

setTimeout(() => { debugger; }, 5000)

Następnie masz 5 sekund (lub zmień wartość na dowolną inną), aby wyświetlić wszystko, co chcesz debugować.

Żadna z pozostałych odpowiedzi nie działała dla mnie - drzewo DOM było ciągle modyfikowane (tj. Rzeczy, na których mi zależy, znikały) tuż przed zatrzymaniem skryptu.

Nie jestem pewien, czy to zadziała w Twojej sytuacji, ale normalnie (i w każdym przypadku warto o tym wspomnieć, ponieważ jest to świetne narzędzie) w Chrome Developer Tools możesz symulować stany elementów i tak jest :focus.

Aby to zrobić, przejdź do Elementszakładki w Narzędziach dla programistów i upewnij się, że znajdujesz się w Stylessekcji po prawej stronie (powinna to być domyślna lokalizacja po uruchomieniu narzędzi programistycznych). Teraz tuż pod Stylami w prawym górnym rogu masz ikonę Toggle Element State. Po kliknięciu go można symulować :active, :hover, :focusa :visiteddla elementu wybranego na lewej stronie w widoku kodu.

W przeglądarce Chrome na stronie narzędzi programistycznych dla testowanej strony ... kliknij menu opcji i otwórz ustawienia preferencji ... w Narzędziach dla programistów włącz opcję „Emuluj skoncentrowaną stronę”

Następnie na stronie testowej powoduje pojawienie się elementów. To działało, aby moje wyskakujące wyniki wyszukiwania były skoncentrowane na pozostaniu na ekranie, więc mogłem z nimi pracować.

Nie jest to prawdziwe rozwiązanie, ale zwykle działa (:

1. Skup się na elemencie
2. Kliknij prawym przyciskiem myszy, aby wyświetlić menu kontekstowe
3. Przejdź do narzędzi programistycznych

Miałem bardzo trudną sytuację i stąd żadna odpowiedź nie działała (nie weryfikowałem odpowiedzi zmieniając pojemnik, który jest dla mnie body, ani oryginalne wydarzenie, bo tego nie wiem). W końcu znalazłem obejście tego problemu, przerywając za pomocą punktów kontrolnych nasłuchiwania zdarzeń kontrolnych w przeglądarce Chrome. Być może jest to również sposób na łamanie przeglądarki w skomplikowanych sytuacjach, w których nawet F8 lub kliknięcie prawym przyciskiem myszy ponownie ukrywa wyskakujące okienko:

Wklej następujący kod Javascript w konsoli programisty przeglądarki:

// Delayed console log of parent element with disappearing child element(s)
// Once code is trigger, you have 3 seconds to trigger the hidden element before it snapshots.
// The hidden elements should appear in the console ready to inspect.

var timer = 3000; //time before snapshot
var parent_of_element_to_inspect = 'div.elementcontainer'; //container of element to snapshot
setTimeout(function(){
 console.log(document.querySelector(parent_of_element_to_inspect).cloneNode(true));
},timer);

Mam szybsze rozwiązanie, ponieważ nie jestem zbyt dobry w używaniu narzędzi. Oto, co robię.

event.originalEvent.preventDefault();
event.originalEvent.stopImmediatePropagation();
event.originalEvent.stopPropagation();

Jeśli otworzysz Chrome DevTools, a następnie uruchomisz inspektora elementów za pomocą skrótów klawiaturowych, powinno to rozwiązać problem.

Mac: Cmd+Opt+J a potemCmd+Opt+C

Windows: Ctrl+Shift+J a potemCtrl+Shift+C

[