Adobe Dreamweaver'da HTML, CSS ve JS dosyalarını ayıklamayı öğrenin. Çıktı panelinde hata ve uyarıları görüntüleyin ve tek bir tıklamayla hatalı kod satırlarına atlayın.

İster acemi ister deneyimli bir kodlayıcı olun, yanlışlıkla veya bilgi eksikliği nedeniyle kodunuzda hatalar olması mümkündür. Web sayfası veya sayfanın bir bölümü beklediğiniz gibi görünmediğinde sözdizimi veya mantık hatalarını bulmak için kodda hata ayıklamak zorunda kalırsınız. Hata ayıklama son derece zorlu ve özellikle karmaşık uygulamalarda zaman alan bir işlem olabilir.

Dreamweaver sık karşılaşılan hatalarda Linting özelliği yardımıyla hata ayıklamayı basit ve kolay hale getirir. Linting kodu analiz ederek olası hataları veya şüpheli kod kullanımını işaretleme işlemidir. Dreamweaver'da Linting yoluyla işaretlenen bazı hatalara örnek olarak HTML sözdizimi hataları, CSS'de ayrıştırma hataları veya JavaScript dosyalarındaki uyarılar gösterilebilir.

Bulunan hatalar ve uyarılar çalışma alanının alt kısmına sabitlenmiş ayrı bir panelde (Çıktı paneli) listelenir. Bu paneldeki her satır hatanın oluştuğu kod bölümüne giderek kodun bulunmasını ve düzeltilmesini kolaylaştırır. Ayrıca, hatalı kodun satır numaraları kırmızı ile ve uyarılar da sarı ile vurgulanır. Fareyi vurgulanan satır numaralarının üzerine getirdiğinizde hatanın veya uyarının önizlemesi görüntülenir.

Dreamweaver ile HTML (.htm ve .html), CSS ve JavaScript dosyalarını ayıklayabilirsiniz. Bu dosyalarda kodunuzu ayıklamak için şu adımları gerçekleştirin:

  1. HTML, CSS ve JS yapılandırma dosyalarını düzenleyerek Linting kurallarını belirtin. Daha fazla bilgi için bkz. Linting kurallarını belirtme.

  2. Linting özelliğini etkinleştirin ve bu özelliğin tetiklenmesi gereken zamanı belirtin. Dosyalar yüklenirken, kaydedilirken veya düzenlenirken Linting özelliğini uygulayabilirsiniz. Daha fazla bilgi için bkz. Linting özelliğini etkinleştirme ve tercihleri ayarlama.

Dosyalarda bulunan hatalar ve uyarılar çıktı panelinde görüntülenir. Daha fazla bilgi için bkz. Linting sonuçları ve Çıktı paneli.

Linting özelliğini etkinleştirme ve linting kurallarını belirtme

Düzen > Tercihler (Win) veya Dreamweaver > Tercihler (Mac) seçeneğini belirleyin. Kategori listesinde Linting'i ve sonra da Linting'i Etkinleştir'i seçin.

Linting kurallarını belirtme

Karşılık gelen yapılandırma dosyalarında Linting kurallarını düzenleyerek HTML, CSS ve JS dosyalarına Linting özelliğini uygulayabilirsiniz:

  • HTML: DW.htmlhintrc
  • CSS: DW.csslintrc
  • JS: DW.jshintrc

Bu dosyalara erişmek ve dosyaları düzenlemek için şu adımları gerçekleştirin:

  1. Düzen > Tercihler (Win) veya Dreamweaver > Tercihler (Mac) öğesini tıklatın. 

  2. Kategori listesinde Linting'i seçin.

  3. Kural Kümesini Düzenle bölümünde, gerekli dosya türünü ve sonra da Düzenle ve Değişiklikleri Uygula'yı tıklatın.

    Karşılık gelen yapılandırma dosyası Dreamweaver'da açılır.

  4. Yapılandırma dosyalarındaki Linting kurallarını düzenleyin veya yeni kural ekleyin. Linting kuralları hakkında daha fazla bilgi için aşağıdaki belgelere başvurun:

    Bu yapılandırma dosyalarında, görüntülenecek hata ve uyarı türlerini de ayarlayabilirsiniz. JS yapılandırma dosyalarında, bulunacak maksimum hata sayısını da ayarlayabilirsiniz.

Linting sonuçları ve Çıktı paneli

Linting sonuçları (hatalar ve uyarılar) Çıktı panelinde listelenir. Çıktı paneli tüm varsayılan çalışma alanlarının alt kısmında, sabitlenmiş modda kullanılabilir. Çıktı paneli kapalıysa aşağıdaki işlemlerden birini gerçekleştirerek açabilirsiniz:

  • Belge penceresi durum çubuğunda linting durum simgesini tıklatarak
  • Shift+F6 klavye kısayolunu kullanarak
  • Pencere > Sonuçlar > Çıktı'yı kullanarak
Çıktı paneli ve linting simgesi
Çıktı paneli ve Linting simgesi

Durum çubuğundaki Linting simgesi Linting sonuçlarını gösterir:

  • Kırmızı: Geçerli belgede hatalar ve uyarılar var
  • Sarı: Geçerli belgede yalnızca uyarılar var
  • Yeşil: Geçerli belgede hiç hata yok

Not:

Durum çubuğundaki Linting simgesi kırmızı veya sarı ise (yeşil değilse) bu simgeyi kullanarak da Çıktı panelini açıp kapatabilirsiniz.

Hataları veya uyarıları içeren satırlar sırasıyla kırmızı ve sarı ile vurgulanır. Çıktı panelinde bir mesajı çift tıklatarak, hatanın oluştuğu satıra atlayabilirsiniz. Kod görünümünde, fareyi hatalı kodun bulunduğu satır numaralarının üzerine getirerek hatanın veya uyarının önizlemesini de görebilirsiniz.

Çıktı panelinde aynı anda 50 mesaj listelenir ve hatalar uyarılardan önce yer alır. Hatalar düzeltildikçe, paneldeki liste de kaydırılarak sonraki hata görüntülenir.

Bu çalışma Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License kapsamında lisanslanmıştır  Creative Commons şartları, Twitter™ ve Facebook sitelerinde paylaşılanları kapsamaz.

Yasal Uyarılar   |   Çevrimiçi Gizlilik İlkesi