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)?
źródło
F8
hover najpierw znika, a następnie zatrzymuje wykonywanie. To niesamowicie frustrujące, nie wiem, dlaczego tak się dzieje.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
blur
zdarzenie 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:
Po usunięciu zdarzenia rozmycia możesz otworzyć menu i obejrzeć je bez znikania
źródło
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ę”.
źródło
Na Macu możesz nacisnąć cmd+, \aby wstrzymać skrypt po otwarciu listy rozwijanej. Następnie możesz użyć shift+ cmd+, caby sprawdzić elementy.
źródło
Napotkałem ten sam problem i użyłem Expand rekurencyjnie opcji w narzędziach programistycznych Chrome:
Kroki są następujące:
Oto demo:
źródło
Możesz ustawić interwał, który co sekundę wypisze zawartość danego elementu w konsoli JS. Upuść to w konsoli i otwórz listę rozwijaną.
źródło
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.
źródło
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.
źródło
element:hover
lubelement:active
lubelement:focus
. Moja zmiana jest oparta na js. Wtyczka doda klasę i zmieni styl (tak jak na przykład robi to superfish). Więc przełączanie stanu nie pomoże tutaj ...Ż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:
źródło
Zmiana kodu HTML w oknie elementów
<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:
źródło