Debugowanie styli CSS elementów, które pokazywane są z użyciem zdarzeń obsługiwanych przez JavaScript w Chrome jest uciążliwe, ponieważ w odróżnieniu od Firefoksa Chrome przy inspekcji elementów nie wywołuje zdarzeń do nich przypisanych.
Zupełnym przypadkiem odkryłem ostatnio ciekawą metodą debugowania takich elementów:
W skrócie:
- Uruchamiamy narzędzia developerskie
- Najeżdżamy na interesujący nas element
- Z użyciem skrótów klawiaturowych przełączamy się na sąsiedni ekran
- Przesuwamy kursor w dół tak żeby po powrocie na pierwotny ekran znajdował się on nad obszarem narzędzi developerskich
- Powracamy na pierwotny ekran
- Możemy debugować wybrany element
Całość bazuje na tym, że Chrome przy zmianie ekranów nie wywołuje zdarzeń związanych z kursorem podpiętych do elementów.
Możecie przetestować tę metodę na tym prostym demo.
P.S. Jeżeli znacie inną metodę aby rozwiązać problem debugowania tego typu elementów, dajcie znać w komentarzach – może istnieje jakaś flaga dla Chrome, która wywołuje eventy przy inspekcji elementów.
P.S.2. Powyższa metoda działa też w Safari
P.S.3. Ten sam sposób można wykorzystać do robienia screenshotów tego typu elementów np. programem Skitch, pod warunkiem, że zakończymy zaznaczanie obszaru screenshota na narzędziach developerskich.