Fareyle üzerine gelme kodunu görüntülemek için Chrome web denetçisi nasıl kullanılır?

99

Kodu görüntülemek için chromes web denetçisini kullanmak çok kullanışlıdır. Ancak, örneğin bir düğmenin fareyle üzerine gelme kodunu nasıl görüntülüyorsunuz? Fareyi düğmenin üzerine getirmeniz gerekecek ve bu nedenle denetçide kullanamazsınız (fare). Denetçide bunu başarmanın herhangi bir kısayolu veya başka yolu var mı?

css  google-chrome  google-chrome-devtools  web-inspector 
— Bö.
kaynak
2
Bu, bunun bir kopyası değil mi? stackoverflow.com/questions/4515124/…
— Mixologic
— TylerH

Yanıtlar:

156

Artık hem sözde sınıf stil kurallarını görebilir hem de bunları öğelere zorlayabilirsiniz.

:hoverStiller bölmesindeki gibi kuralları görmek için sağ üstteki küçük noktalı kutu düğmesini tıklayın.

Bir öğeyi :hoverduruma zorlamak için sağ tıklayın.

Alternatif olarak, Komut Dosyaları panelindeki Olay Dinleyici Kesme Noktaları kenar çubuğu bölmesini kullanabilir ve fareyle üzerine gelme işleyicilerinde duraklatmayı seçebilirsiniz.

— Travis Northcutt
kaynak
1
Chrome 48'de (ve daha önce de), bu noktalı kutu, üzerine geldiğinizde Öğe Durumunu Değiştir yazan bir raptiye simgesiyle değiştirildi. Ardından açılır listeden "üzerine gelme" yi seçersiniz.
— sameers
15

Alternatif olarak, Komut Dosyaları panelindeki Olay Dinleyici Kesme Noktaları kenar çubuğu bölmesini kullanabilir ve fareyle üzerine gelme işleyicilerinde duraklatmayı seçebilirsiniz.

— Yury Semikhatsky
kaynak
6

Bu biraz can sıkıcı, ancak öğeye sağ tıklamanız ve ardından farenizi bağlantının üzerinde tutmanız, klavyenizi kullanarak "Öğeyi İncele" bağlantısını seçip enter tuşuna basmanız gerekir. Bu size, seçilen öğe için fareyle üzerine gelme sözde sınıfının css'sini göstermelidir.

Bunu gelecekteki yapılarda biraz daha kolay hale getirmelerini umuyoruz.

— Purpletonic
kaynak
Bilmekte fayda var, ama evet, farenin bağlantının üzerinde durması çok sinir bozucu ... Öğeyi Denetle penceresinde yalnızca klavyeyi kullanarak gezinirken bile. Ne sıkıntı!
— Chad Schultz
Fiili için eleman zorlayarak tüm süreç :hover(devlet as in the accepted answer), aynı zamanda öğenin üzerine Via sağ tıklayarak elde edilir,> kontrol ve orada işaretçi tutmak ve sonra bunun için .. sözde kodunu kontrol sayesinde klavye tuşlarını kullanarak çalışan alternatif .... Yani aslında bir sıkıntı değil !
— :)
1

Sorunuzu doğru anladığımdan emin değilim, ancak olay işleyici kodunu görmek istiyorsanız, öğeyi inceleyebilir ve Elements Panelinin Etkinlik Dinleyicileri kenar çubuğu bölmesine bakabilirsiniz. Başka bir yol da Komut Dosyaları Panelinde duraklat düğmesine basmanız ve öğenin üzerine gelmenizdir. Hata ayıklayıcı, ilk olay işleyicisinin ilk talimatında duracaktır.

— Loislo
kaynak
Bunu nasıl yaptığınız konusunda biraz daha net konuşabilir misiniz? Tipik bir durum, sevdiğim bir düğme olabilir ve gezinme efektinin sıradan incelemeyle aynı kolay şekilde nasıl gerçekleştirildiğini görmek isterim.
— Bo.
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.