Geliştirici, Bir Kod Satırıyla Sayfanızdaki DOM Öğelerini Hata Ayıklama

Kaç kere mücadele ettin belirli bir problem bul CSS düzeninizi karıştırıyor musunuz? Eksik kapanış etiketlerinden yanlış yerleştirilmiş kardeşlere kadar, CSS sorunları bir düzine kadar önemli. Ve birlikte bu CSS mizanpajı hata ayıklayıcısı, sadece süreç çok kolaylaştı.

Bu bir kod satırı DOM’den geç ve her öğenin ana hatlarını farklı bir renk ile. Bu şekilde yapabilirsiniz daha iyi görselleştirmek CSS’niz nasıl çalışıyor (veya çalışmıyor) ve sorunlu bölgeleri hızla tespit edin.

GitHub geliştiricilere izin verir kodun küçük parçalarını sakla Gists denir. Bunların hepsi açık kaynak ve ücretsiz kendi kullanımınız için saklayın. Bu yüzden bu CSS hata ayıklayıcısını kullanışlıdır. Bu birleştirir Chrome DevTools'un modern kahramanlığı ile tarayıcı yer imlerinin basitliği.

Bu kodu kullanmak için önce en çok hangi sürümü seversin Gist sayfasından. Sonra siz bu kodu yapıştır Terminal pencerenize girin ve koş. Bitmelisin böyle bir sonuç:

Şimdi, mümkün bu kodu yer imi olarak kaydet Tarayıcı araç çubuğunda Ancak bir Chrome kullanıcısıysanız, bu JS kodunu kod pasajı olarak kaydet çalıştırması çok daha kolay.

Bu kod pasajı olabilir tekrar tekrar hatırladı bir düğmeye tıklayarak. Yapabilirsin her sayfayı ayrıştır, Bu renkli CSS ana hatlarıyla dolu, hem ebeveynlerin hem de çocukların DOM unsurları için.

Ancak, yalnızca Chrome ile sınırlı hissetmemelisiniz. Bu pasajı tüm büyük tarayıcılar için çalışıyor, Firefox, Safari, Opera ve Internet Explorer dahil.

Ve bunun nasıl çalıştığını öğrenmek isteyen herkes için açıklamalı sürüm Her kod satırı için yorumlarla birlikte.

Bu Gist dolu ilgili kullanıcı yorumları ve diğer geliştiricilerin güncellemeleri daha küçük ve daha verimli hale getirmek için yardımcı olur. Ancak şu anki durumunda, bu en basit yollardan biridir. Herhangi bir DOM’de tek bir kod satırıyla hata ayıklama.