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 seçeneğini etkinleştirin veya devre dışı bırakın. Dosyalar yüklenirken veya kaydedilirken Linting özelliğini uygulayabilirsiniz. Linting özelliğini Tercihler > Linting seçeneğini kullanarak etkinleştirebilir veya devre dışı bırakabilirsiniz. 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üzenle > Tercihler (Win) veya Dreamweaver > Tercihler (Mac) seçeneğini tıklatın. 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: .eslintrc

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. 

Not:

Dreamweaver CC 19.0'dan önceki sürümler için Linting kuralları yapılandırma dosyası JS: DW.jshintrc dosyasıdır. http://jshint.com/docs/options/ bağlantısına başvurabilirsiniz

ECMAScript 6 linting seçeneği

Dreamweaver, ECMAScript 6 sözdizimini destekler. Dreamweaver ayrıca JavaScript lint aracı olarak ESLint varsayılanıyla ECMAScript kodunun lint işlemini de destekler.

  1. Site > Siteleri Yönet'i tıklatın.

    Siteleri Yönet iletişim kutusu
    Siteleri Yönet iletişim kutusundan web sitesini seçme
  2. Site Yapısı iletişim kutusunun sol bölmesinden Gelişmiş Ayarlar'ı seçin. 

  3. Sol bölmedeki Gelişmiş Ayarlar'dan JS Linting seçeneğini belirleyin. 

    ECMAScript Sürümü'nün bitişiğindeki açılır listeyi tıklatıp 3, 5 veya 6 seçeneğini belirleyebilirsiniz. Dreamweaver, seçtiğiniz sürüm için varsayılan kural kümesini kullanır. 

    ECMAScript sürümünü seçme
    ECMAScript sürümünü seçme
  4. Kural kümesini özelleştirmek için açılır listeden Yapılandırma Dosyası'nı seçip Yapılandırma Dosyasını Düzenle'yi tıklatabilirsiniz. 

    JS Linting Yapılandırması dosyasını düzenleme
    JS Linting Yapılandırması dosyasını düzenleme

    Site Yapısı'nda yaptığınız değişiklikler kaydedilir ve site kökünde yoksa yeni bir .eslintrc.js dosyası oluşturulur.

    .eslintrc.js dosyası düzenlenmek üzere site kökünde açılır. Daha fazla bilgi için bkz. ESLint kuralları

    .eslintrc.js yapılandırma dosyası
    .eslintrc.js yapılandırma dosyası

    Not:

    • Site Yapısı iletişim kutusunda tanımlanan ECMAScript Sürüm ayarları, site kökünde kullanılan .eslintrc.js dosyasına göre daha önceliklidir. 
    • Site ayarlarında .eslintrc.js dosyasını kullanmazsanız Dreamweaver, kök dizini oluşturan tüm konumlarda .eslintrc.js dosyasını arar. 

    Yapılandırma dosyasının basamaklı yapısı ve hiyerarşisi hakkında daha fazla bilgi için bkz. ESLint sitesi.

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