CSS Hatalarını Ayıklamak için Google Chrome Nasıl Kullanılır?

Öğeyi İncele aracı, web sayfalarınızda gerçek zamanlı olarak hata ayıklama söz konusu olduğunda harikadır. Bu aracı, bir web sitesinin tasarımını önizlemeye ve değiştirmeye yardımcı olması için kullanabilirsiniz. Ayrıca, CSS değişikliklerinizi hemen görüntüleyerek, sayfayı yeniden yüklemenize gerek kalmadan bunu yapmanızı sağlar.

Bu makale, Inspect Element penceresinde CSS sınıflarının ve uygulanan stillerin nasıl görüntüleneceğini anlatacaktır. Ayrıca, CSS'nizde yaptığınız değişiklikleri gerçek zamanlı olarak önizlemek için bunu nasıl kullanabileceğinizi de ele alacaktır.

Google Chrome'da Inspect Element'i Açma

HTML veya CSS kodunun nasıl göründüğünü görmek için herhangi bir web sitesini ziyaret edebilir ve Öğeyi İncele penceresini açabilirsiniz. Bu eğitimde kullanılacak örnek bir web sitesi göstermek.

Google Chrome'da Öğeyi İncele penceresini aşağıdaki düğmeye basarak açabilirsiniz. F12 anahtar. Ayrıca sayfada herhangi bir yere sağ tıklayıp üzerine tıklayabilirsiniz. İncelemek.

Öğeyi İncele penceresi, web sitesinin sağ tıkladığınız bölümünün HTML kodunu açar. Burası ayrıca yapabileceğiniz yer

Google Chrome'u kullanarak web sitesi metnini düzenleyin.

Öğeyi Denetle Penceresindeki Stiller Sekmesi

Öğeyi İncele penceresinin kendisinde, Elementler sekmesinde hem HTML hem de CSS kodunu görüntülemek için bir yer var. Öğeyi İncele penceresinin solunda HTML kodunu görebilirsiniz. CSS kodunu sağda, altında bulabilirsiniz. stiller sekme.

Sağ ve sol dolgu uygulanmış, "kart doldurma" adlı bir sınıfa sahip bir HTML öğeniz olduğunu varsayalım:

.kart dolgusu {
 dolgu-sağ: 0vh;
 dolgu-sol: 0vh;
}

Bu web sitesini tarayıcıda önizlerseniz, div "kart doldurma" sınıfına sahip öğe. "Kart doldurma" sınıfına uygulanan herhangi bir stil sağda, stiller sekme.

HTML kodu görünümünde bir öğenin üzerine geldiğinizde, web sayfasının o kısmı web tarayıcısında vurgulanır. HTML öğesi türü, sınıf adlarıyla birlikte öğenin yanındaki bir iletişim kutusunda da görüntülenecektir.

Bu durumda, sayfada "row", "card-padding" ve "pb-5" sınıf adlarının vurgulandığı div kapsayıcısını göreceksiniz.

CSS'de Gerçek Zamanlı Değişiklikler Nasıl Yapılır?

CSS'yi doğrudan Stiller sekmesinden değiştirebilirsiniz:

1. kullanma bu web sitesi, ilk başlığa sağ tıklayın.
2. Bu belirli h4 başlığında, "metin-gri" adı verilen ve #8a8a8a rengiyle kendisine uygulanan bir sınıf göreceksiniz.
3. Rengi turuncu gibi başka bir şeyle değiştirin. Özelliğin adı "renk" değil, yalnızca değerin kendisini değiştirmek istiyorsunuz.
4. Başlığın koyu griden turuncuya değiştiğini göreceksiniz.
5. Belirli bir CSS stilini devre dışı bırakmak istiyorsanız, stilin solundaki kutunun işaretini kaldırın.
6. Ayrıca orijinal sete daha fazla stil ekleyebilirsiniz. Yeni bir mülk eklemeye başlamak için bir mülkün hemen altına veya sağına tıklayın. Yeni stiller eklerken normal bir CSS dosyasında kullandığınız sözdizimini kullanmalısınız.
7. Yerel bir web sitesini önizliyorsanız, kullanıcı arayüzünüz için gereken görünüme ve izlenime yaklaşana kadar CSS değişiklikleri yapmaya devam edebilirsiniz. Bundan sonra, yaptığınız CSS değişikliklerini yerel kodunuza geri kopyalayabilirsiniz.

3. Taraf Kitaplıklardan veya Çerçevelerden CSS Nasıl Değiştirilir

Bootstrap gibi 3. taraf kitaplıklar veya çerçeveler kullanıyorsanız, HTML öğelerinde de değişiklik yapabilirsiniz.

1. kullanma bu web sitesi, sayfadaki Bootstrap düğmelerinden birine sağ tıklayın.
2. Düğmeye uygulanan iki sınıf göreceksiniz, "btn" ve "btn-birincil". Bootstrap zaten bu sınıfların her ikisine de uygulanan kendi stiline sahiptir. Arka plan ve bordür renkleri olarak kullanılan renkler #007bff'dir. Bunu Violet gibi başka bir şeyle değiştirin.
3. Yerel bir web sitesini önizliyorsanız, yeni değişikliklerinizi yerel kodunuza geri ekleyebilirsiniz. CSS'nizin sırasına bağlı olarak, şunları yapmanız gerekebilir: daha spesifik bir CSS seçici kullanın. Örneğin, seçicinin önüne ".btn" ekleyin. Bu, orijinal Bootstrap stilini geçersiz kılar.

   .btn.btn-birincil {
    arka plan rengi: menekşe;
    sınır rengi: menekşe;
   }

Stiller Sekmesinde element.style Ne Anlama Geliyor?

Öğeyi İncele penceresinde vurguladığınız her HTML öğesinin bir element.styles bloğu vardır. Bu, bir seçici kullanarak hedeflemek yerine HTML öğesine satır içi stil eklemeye eşdeğerdir.

1. Bir HTML öğesine sağ tıklayın. element.style bölümüne aşağıdaki gibi herhangi bir stil ekleyin:

   renk: beyaz duman;

2. HTML öğesinin kodunun da değiştiğini göreceksiniz. HTML öğesi içindeki kod artık yeni satıra sahiptir:

   stil="renk: beyaz duman;"

Alt HTML Öğeleri Stili Nasıl Devralır?

Bir üst öğeye ve bir alt öğeye uygulanan iki farklı stil değeriniz varsa, alt öğedeki değer öncelikli olacaktır.

1. kullanma bu web sitesi, web sitesinin dış kenarlarında herhangi bir yeri sağ tıklayın.
2. Öğeyi İncele penceresinin HTML bölümünde, iki belirli HTML öğesine odaklanın. Kendisine "içerik" sınıfı uygulanmış bir üst div öğesi var. Bu HTML öğesi, kendisine uygulanan bir "text-grey" sınıfıyla birlikte bir h4 alt öğesine sahiptir.
3. Alt h4 HTML öğesini seçin ve "text-grey" sınıfında renk stilini devre dışı bırakın.
4. "İçerik" sınıfına sahip üst HTML Öğesini seçin. Aşağıdaki CSS stilini sınıfa ekleyin:

   kırmızı renk;

   Üst div içindeki tüm metinler kırmızıya döner. Bu değişiklik aynı zamanda alt öğelere de yansıyacaktır, bu da h4'ün de kırmızı bir renge sahip olacağı anlamına gelir.
5. Alt h4 HTML öğesini seçin ve "text-grey" sınıfına yeni bir stil ekleyin:

   yeşil renk;

   Bu, herhangi bir ebeveyn sınıfının stilini geçersiz kılar. h4 HTML öğesi kırmızıdan yeşile dönecektir.
6. Ayrıca "içerik" sınıfının stilini görüntülerseniz bir üstü çizili görürsünüz. Bu, h4 alt öğesinin ebeveynin rengini geçersiz kıldığını doğrular.

Tarayıcıda CSS Hatalarını Ayıklamanın Faydaları

Tarayıcınızda CSS hatalarını ayıklamak çok zaman kazandırabilir ve kodlama iş akışınızı hızlandırabilir. Bu, özellikle yeni CSS değişikliklerinizin web sitenizdeki kullanıcı arayüzünü gerçek zamanlı olarak nasıl etkilediğini görmeniz gerekiyorsa geçerlidir.

Yerel kodunuzda değişiklik yapmak ve uygulamanızı yeniden yüklemek yerine bu tekniği kullanabilirsiniz. Artık kullanıcı arayüzü değişikliklerinizi yaparken görüntüleyebileceğiniz için, bu sizi hangi CSS değerlerinin işe yarayacağını tahmin etmekten kurtaracaktır.

İstediğiniz tasarıma yaklaşana kadar Inspect Element penceresinde değişiklik yapabilirsiniz. Bunu yaptıktan sonra, Inspect Element penceresinden kodu tekrar yerel kodunuza kopyalayabilirsiniz. Yeni CSS değişikliklerinizin hala işe yarayıp yaramadığını test etmek için uygulamanızı yeniden çalıştırabilirsiniz.

Bu eğitimde, Stiller sekmesinde CSS'nin nerede bulunacağı da dahil olmak üzere, Öğeyi İncele penceresini kullanarak bir web sitesinin CSS'sinde nasıl hata ayıklanacağına ilişkin temel bilgiler ele alındı.

Ayrıca, CSS'de nasıl değişiklik yapılacağını ve kullanıcı arayüzündeki görsel değişiklikleri gerçek zamanlı olarak nasıl görüntüleyeceğinizi de ele aldı. Umarım, CSS bir üçüncü taraf kitaplığı kullandığında nasıl değişiklik yapacağınızı ve stil mirasının nasıl çalıştığını da anlamışsınızdır.

Öğeyi Denetle penceresiyle yapabileceğiniz başka ilginç şeyler de var.

Inspect Element ile Yapabileceğiniz 7 Eğlenceli Şey

Sonrakini Oku

Yazar hakkında