Geliştirici Araçları İpuçları: CSS flexbox'ı denetleme ve hata ayıklama
Koleksiyonlar ile düzeninizi koruyun
İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
Chrome Geliştirici Araçları, CSS flexbox düzenlerinde hata ayıklama işlemini sezgisel hale getirir. Öğeler panelinde bağlama duyarlı bir Flexbox Düzenleyici ve özelleştirilebilir yer paylaşımı bulunur.
Aşağıdakileri nasıl yapacağınızı öğrenmek için videoyu izleyin:
- Flexbox özelliklerini yazmak yerine bir düğmeyi tıklayarak değiştirmek için Flexbox Düzenleyici'yi kullanın.
- Yaptığınız değişiklikleri hemen görmek için görüntü alanındaki esnek kutu yer paylaşımını açın.
- Tüm öğelerin listesini görmek ve bunları DOM ağacında bulmak için Öğeler > Düzen > Esnek Kutu bölümünü kullanın. Ayrıca, yer paylaşımı renklerini buradan özelleştirebilirsiniz.
CSS flexbox hakkında genel bilgi edinmek için CSS'yi Öğrenme > Flexbox başlıklı makaleyi inceleyin.
Geliştirici Araçları'nda daha uygulamalı bir hata ayıklama deneyimi için CSS flexbox düzenlerini inceleme ve hata ayıklama eğitimini uygulayın.
Aksi belirtilmediği sürece bu sayfanın içeriği Creative Commons Atıf 4.0 Lisansı altında ve kod örnekleri Apache 2.0 Lisansı altında lisanslanmıştır. Ayrıntılı bilgi için Google Developers Site Politikaları'na göz atın. Java, Oracle ve/veya satış ortaklarının tescilli ticari markasıdır.
Son güncelleme tarihi: 2022-09-01 UTC.
[[["Anlaması kolay","easyToUnderstand","thumb-up"],["Sorunumu çözdü","solvedMyProblem","thumb-up"],["Diğer","otherUp","thumb-up"]],[["İhtiyacım olan bilgiler yok","missingTheInformationINeed","thumb-down"],["Çok karmaşık / çok fazla adım var","tooComplicatedTooManySteps","thumb-down"],["Güncel değil","outOfDate","thumb-down"],["Çeviri sorunu","translationIssue","thumb-down"],["Örnek veya kod sorunu","samplesCodeIssue","thumb-down"],["Diğer","otherDown","thumb-down"]],["Son güncelleme tarihi: 2022-09-01 UTC."],[],[],null,[]]
