Przeglądanie menu rozwijanych w nowym Chrome

Korzystam z Chrome w wersji 41.0.2272.101 m (najnowsza) i ta aktualizacja jest pomieszana. Mówią, że gdy masz otwarty inspektor, każda zmiana DOM będzie migać fioletowo na zmienionym elemencie (jak w Firefoksie), ale teraz nie mogę sprawdzić żadnego obiektu najechanego kursorem (również jak w FF, dlatego nie lubię używać go podczas tworzenia front-endu).

Mówię o zdarzeniach wyzwalanych przez js, na przykład superfish. Wcześniej mogłem najechać kursorem na menu i zakryć menu inspektorem, a menu pozostałoby otwarte, a mógłbym wejść do inspektora, zobaczyć, jakie pseudoelementy są utworzone, bezpośrednio zmienić dopełnienia itp. I zobaczyć zmianę. Teraz, kiedy najeżdżam na menu i klikam prawym przyciskiem myszy, aby je sprawdzić, menu zamyka się i nie mogę go sprawdzić!

Próbowałem przeciągnąć inspektora, ale nic nie pomogło. Ta nowa „funkcja” jest irytująca jak cholera. Czy istnieje sposób na sprawdzenie zdarzeń wyzwalanych przez js, bez umieszczania punktów przerwania na elementach (co działa, ale jest trochę upierdliwe)?

Najedź myszą na element i naciśnij klawisz F8 (działa to tylko w przeglądarce Chrome), aby wstrzymać wykonywanie skryptu. Stan najechania pozostanie widoczny dla Ciebie. Jeśli używasz komputera Mac, może być konieczne otwarcie preferencji systemowych i zaznaczenie pola wyboru „Użyj wszystkich klawiszy F1, F2 itp.” (Lub po prostu użyj fn + F8).

Czasami działa to tylko wtedy, gdy jesteś w zakładce Źródła inspektora.

W zależności od typu elementu menu napotkałem ten problem z rozwijanymi menu wprowadzania. Powodem, dla którego znika, kiedy go sprawdzam, jest to, że blurzdarzenie jest zawsze wyzwalane na elemencie, kiedy kliknę gdziekolwiek poza elementem.

Jednym ze sposobów, w jaki mogłem sprawdzić ten element, jest zapobieżenie wywoływaniu zdarzenia rozmycia, poprzez usunięcie detektora zdarzenia rozmycia:

• Sprawdź element wejściowy w Chrome
• Przejdź do karty Detektory zdarzeń i usuń zdarzenie rozmycia

Po usunięciu zdarzenia rozmycia możesz otworzyć menu i obejrzeć je bez znikania

W przeglądarce Chrome naciśnij F12, aby otworzyć konsolę programisty, a następnie kliknij Ustawienia (ikona koła zębatego) lub naciśnij F1:

następnie znajdź i zaznacz opcję „Emuluj wybraną stronę”.

Na Macu możesz nacisnąć cmd+, \aby wstrzymać skrypt po otwarciu listy rozwijanej. Następnie możesz użyć shift+ cmd+, caby sprawdzić elementy.

Teraz, kiedy najeżdżam na menu i klikam prawym przyciskiem myszy, aby je sprawdzić, menu zamyka się i nie mogę go sprawdzić!

Napotkałem ten sam problem i użyłem Expand rekurencyjnie opcji w narzędziach programistycznych 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:

Możesz ustawić interwał, który co sekundę wypisze zawartość danego elementu w konsoli JS. Upuść to w konsoli i otwórz listę rozwijaną.

setInterval(() => 
    console.log(document.querySelector('.Select-menu-outer').outerHTML),
1000)

W przeglądarce Firefox

W Inspektorze kliknij prawym przyciskiem myszy węzeł zawierający listę rozwijaną, wybierz:

Przerwa w ...> Modyfikacja poddrzewa

Spowoduje to wstrzymanie wykonywania w momencie, gdy lista rozwijana jest ... cóż ... opuszczona.

Myślę, że możesz użyć edytora CSS w Chrome, aby zastosować stan, na przykład stan „najechanie kursorem”.

W Narzędziach dla programistów wybierasz element. Po prawej stronie masz kwadrat ze strzałką nad nim. Kliknij to i możesz wybrać stan. Na przykład wybierz wskaźnik myszy, a zobaczysz zarówno swoje okno, jak i aktualizację CSS, tak jakby element był teraz unoszony.

Żaden z wyżej wymienionych środków nie zadziałał. Ponieważ nasza lista rozwijana (oparta na reakcji) zamknie się po każdym kliknięciu (prawym lub lewym), więc znaleźliśmy poniższe obejście:

• W narzędziach programistycznych Chrome Open
• najpierw kliknij listę rozwijaną w stanie zwiniętym i pozwól jej rozwinąć się z opcjami
• następnie pod sekcją elementów kliknij prawym przyciskiem myszy węzeł div (pamiętaj, aby nie kliknąć lewym przyciskiem myszy przed kliknięciem prawym przyciskiem myszy), który zawiera szczegóły rozwijanych elementów
• Następnie wybierz opcję „ Rozwiń rekurencyjnie ”
• Następnie pokazano wymagane szczegóły

Zmiana kodu HTML w oknie elementów

• Najedź kursorem na menu , które chcesz pozostawić otwarte w trybie inspekcji .
• Obserwuj zmiany HTML na elemencie w oknie Element pomiędzy otwartymi / zamkniętymi stanami menu. W większości przypadków jest to zmiana stylu.
• Kiedy dowiesz się, co powoduje otwieranie i zamykanie menu (w tym przykładzie klasa o nazwie „dropdownOpen” została dodana i usunięta między stanami menu), kliknij dwukrotnie kod HTML na karcie Element i wprowadź niezbędne zmiany. W tym przykładzie dodajemy klasę „dropdownOpen” do <li>elementu.

Korzystanie z jQuery w oknie konsoli

Jeśli chcesz powtórzyć to zachowanie, możesz skorzystać z jQuery. Ci wybrać element przy użyciu jQuery i wprowadzić niezbędne zmiany w konsoli . W tym przykładzie wybieramy element według jego identyfikatora i dodajemy do niego klasę „dropdownOpen” w następujący sposób:

jQuery("#menu-item-11012").addClass("dropdownOpen");