İçeriğe geç
DomainQ
WordPress

WordPress’te Menü veya Butonlar Çalışmıyorsa JavaScript Hatası Nasıl Ayıklanır?

Menüler veya düğmeler tepki vermediğinde sorunu tarayıcı eklentilerinden JavaScript konsolundaki tam hata iletisine kadar düzenli biçimde daraltın.

WordPress’te Menü veya Butonlar Çalışmıyorsa JavaScript Hatası Nasıl Ayıklanır? — DomainQ blog kapak görseli

Yönetim panelinde Add Media düğmesine basıyorsunuz ama hiçbir şey olmuyor; ya da sitenizdeki açılır menü açılmıyor. Görünür bir hata mesajı olmadığında, sorunun nerede başladığını anlamak zorlaşabilir. WordPress JavaScript hatası ayıklama sürecinde amaç ilk anda bir eklentiyi veya temayı sorumlu ilan etmek değildir. Önce sorunun hangi koşulda görüldüğünü belirlemek, ardından tarayıcının sunduğu hata bilgisini toplamak daha düzenli bir inceleme sağlar. WordPress’te etkileşimli işlevler çoğu zaman JavaScript’e dayanır. Kırık menüler, sürüklenemeyen metakutular ve Add Media gibi tepki vermeyen düğmeler JavaScript hataları veya çakışmalarından kaynaklanabilir. Tarayıcı geliştirici araçları, kaynak kodunu incelemek ve JavaScript sorunlarını teşhis etmek için kullanılabilir.

JavaScript sorunu daraltma akışı: Menü veya düğme tepki vermiyor; En az iki tarayıcıda deneyin; Eklentileri veya gizli pencereyi kontrol edin; SCRIPT_DEBUG davranışını kaydedin; Konsolda hata ve hata yığınını kaydedin; Destek isteğine bağlamı ekleyin
JavaScript sorunu daraltma akışı

Kısa özet

  • Menüler, sürüklenemeyen metakutular ve tepki vermeyen düğmeler JavaScript hataları veya çakışmalarıyla ilişkili olabilir.
  • İlk ayrım, aynı sorunun en az iki tarayıcıda görülüp görülmediğini kontrol etmektir.
  • Tarayıcı eklentilerini elemek, SCRIPT_DEBUG altındaki davranışı kaydetmek ve Konsoldaki tam hata bilgisini toplamak destek isteğini daha kullanılabilir hâle getirir.

Önce sorunun kapsamını ayırın

İlk kontrol, aynı işlemi en az iki tarayıcıda tekrar etmektir. Sorun yalnızca bir tarayıcıda görülüyorsa tarayıcıya özgü olabilir. Sorun denediğiniz tarayıcıların her birinde görülüyorsa JavaScript ya da eklenti/tema hatası olasılığı daha yüksektir.

Bu ayrım kesin teşhis değildir; sonraki incelemeyi daraltan bir gözlemdir. Örneğin, örnek bir senaryoda Add Media düğmesi bir tarayıcıda tepki vermiyor, diğerinde çalışıyorsa önce sorun görülen tarayıcının koşullarını incelemek uygundur. Düğme denediğiniz en az iki tarayıcıda da tepki vermiyorsa sonraki kontroller için daha fazla bilgi toplamanız gerekir.

Hangi ekranın etkilendiğini ve hangi işlemin sonucu değiştirmediğini açıkça not edin. Örneğin yalnız yönetim ekranındaki Add Media düğmesi mi, yalnız bir açılır menü mü, yoksa sürükleme işlemi mi çalışmıyor? Bu bağlam, Konsolda görülen bir hata varsa onu sorunlu işlemle ilişkilendirmeye yardımcı olur.

  • Aynı işlemi en az iki tarayıcıda deneyin.
  • Sorunun yalnız bir tarayıcıda mı, denediğiniz tarayıcıların her birinde mi görüldüğünü not edin.
  • Çalışmayan ekranı, menüyü, düğmeyi veya işlemi açıkça tanımlayın.

Kaynak: [1] [2]

Tarayıcı eklentilerini devre dışı bırakın veya gizli pencere kullanın

Reklam engelleyiciler ve gizlilik araçları gibi tarayıcı eklentileri JavaScript’e müdahale edebilir. Bu nedenle WordPress tarafındaki olasılıkları incelemeden önce tarayıcı eklentilerinin etkisini elemek yararlıdır.

Aynı işlemi eklentileri geçici olarak devre dışı bıraktıktan sonra veya gizli pencerede yeniden deneyebilirsiniz. Buradaki amaç, davranışın normal tarayıcı oturumunda mı yoksa bu koşullarda da mı sürdüğünü gözlemlemektir. Sonucu, kullandığınız tarayıcıyla birlikte kaydedin.

Örnek olarak, bir menü normal pencerede açılmıyor ama gizli pencerede açılıyorsa bu gözlem tarayıcı eklentilerinin ayrıca değerlendirilmesi gerektiğini gösterir. Bu sonuç tek başına hangi eklentinin etkilediğini veya WordPress tarafında başka bir sorun bulunmadığını kanıtlamaz.

  • Sorunu normal tarayıcı oturumunda gözlemleyin.
  • Eklentileri geçici olarak devre dışı bırakarak veya gizli pencerede aynı adımı tekrarlayın.
  • Davranış değişirse bunun hangi tarayıcıda ve hangi denemede olduğunu not edin.

Kaynak: [1]

SCRIPT_DEBUG davranışını kaydedin

WordPress varsayılan olarak küçültülmüş JavaScript kullanır. SCRIPT_DEBUG etkinleştirildiğinde WordPress, hataların izini sürmeyi kolaylaştıran tam ve sıkıştırılmamış JavaScript sürümlerini yükler.

Bu makale SCRIPT_DEBUG ayarının nasıl etkinleştirileceğine ilişkin yapılandırma adımları vermez. Ayar sitenizde etkinleştirildiyse veya bu ayarı yöneten kişi tarafından etkinleştirilebiliyorsa, sorunlu sayfayı yeniden yükleyin ve aynı işlemi tekrar edin. Amaç, bu koşulda davranışın değişip değişmediğini kaydetmektir.

Sorun bu koşulda düzelirse SCRIPT_DEBUG yeniden kapatılmalı ve bu davranış destek isteğinde belirtilmelidir. Sorun sürüyorsa tarayıcı geliştirici araçlarındaki Console, yani Konsol sekmesine geçin. Ayarın açık olması tek başına hatanın nedenini veya çözümünü göstermez; destek için paylaşılacak gözlemlerden biridir.

  • SCRIPT_DEBUG etkin durumdaysa sorunlu sayfayı yeniden yükleyin.
  • Aynı menü, düğme veya sürükleme işlemini tekrar deneyin.
  • Davranış düzelirse ayarın yeniden kapatıldığını ve sonucu kaydedin.
  • Davranış sürerse Konsol incelemesine devam edin.

Kaynak: [1]

Konsolda tam hata mesajını ve hata yığınını bulun

Modern tarayıcılarda geliştirici araçları bulunur. Araçları açtıktan sonra Console sekmesine geçin. WordPress dokümantasyonu, tarayıcı geliştirici araçlarının kaynak kodunu incelemek ve JavaScript sorunlarını teşhis etmek için kullanılabileceğini; hata devam ederse Konsolun incelenmesini önerir.

Konsolda ilk bakışta hata görünmüyorsa sayfayı yeniden yükleyin. Bazı JavaScript hataları yalnızca sayfa yüklenirken oluşur. Ardından hatayı tetikleyen işlemi tekrar edin: örneğin çalışmayan menüyü açın, Add Media düğmesine basın veya tepki vermeyen başka bir denetimi kullanın.

Yalnız satır numarasını kaydetmeyin. Tam hata iletisini ve hata yığınını birlikte kopyalayın. Ayrıca hatanın göründüğü dosyanın adını ve satır numarasını not edin. WordPress dokümantasyonundaki örnekte bu bilgi jquery.js:2 biçiminde yer alabilir. Bu kayıtlar, destek isteğinde sorunun hangi işlem sırasında görüldüğünü açıklayan bağlamla birlikte paylaşılmalıdır.

  • Geliştirici araçlarını açın ve Console sekmesine geçin.
  • Hata görünmüyorsa sayfayı yeniden yükleyin.
  • Sorunu tetikleyen işlemi yeniden yapın.
  • Tam hata iletisini ve hata yığınını kopyalayın.
  • Dosya adını ve satır numarasını not edin.

Kaynak: [1] [2]

Destek isteğini gerekli bağlamla hazırlayın

Bir JavaScript sorununu başkasının inceleyebilmesi için kısa ama eksiksiz bağlam gerekir. “Buton çalışmıyor” yerine, sorunun hangi tarayıcılarda tekrarlandığını, hangi işlemin hatayı tetiklediğini ve Konsolda hangi bilginin göründüğünü ekleyin.

Destek isteğinde sorunun görüldüğü tarayıcıları, SCRIPT_DEBUG etkinleştirildiğinde davranışın değişip değişmediğini, tam JavaScript hata iletisini ve hata yığınını bulundurun. Hata dosyasının adı, satır numarası, hatayı tetikleyen işlem ve mümkünse etkilenen sayfanın bağlantısı da aynı isteğe eklenmelidir.

Örnek bir kayıt şu biçimde olabilir: Sorun yönetim ekranındaki Add Media düğmesine basıldığında oluşuyor; en az iki tarayıcıda yapılan denemelerin sonuçları kaydedildi; SCRIPT_DEBUG ile davranışın değişip değişmediği belirtildi; Konsoldaki tam hata iletisi ve hata yığını eklendi; dosya ile satır bilgisi not edildi. Bu örnek bir çözüm iddiası değil, gözlemleri düzenli aktarma biçimidir.

  • Sorunun görüldüğü tarayıcıları yazın.
  • SCRIPT_DEBUG sonrasında davranışın değişip değişmediğini belirtin.
  • Tam hata iletisini ve hata yığınını ekleyin.
  • Dosya adı ve satır numarasını kaydedin.
  • Hatayı tetikleyen işlemi tarif edin.
  • Mümkünse etkilenen sayfanın bağlantısını ekleyin.

Kaynak: [1]

Uygulama kontrol listesi

  • Aynı sorunu en az iki tarayıcıda denedim.
  • Sorunun yalnız bir tarayıcıda mı, denediğim tarayıcıların her birinde mi olduğunu not ettim.
  • Tarayıcı eklentilerini devre dışı bırakarak veya gizli pencerede yeniden denedim.
  • SCRIPT_DEBUG etkinse davranışın değişip değişmediğini kaydettim.
  • Geliştirici araçlarında Console sekmesini açtım.
  • Hata görünmediğinde sayfayı yeniden yükledim.
  • Tam hata mesajını ve hata yığınını kopyaladım.
  • Dosya adını, satır numarasını ve hatayı tetikleyen işlemi not ettim.

Çalışmayan bir WordPress menüsü veya düğmesi tek başına sorunun kaynağını göstermez. Aynı işlemi en az iki tarayıcıda denemek, tarayıcı eklentilerini elemek, SCRIPT_DEBUG altındaki davranışı kaydetmek ve Konsoldan tam hata bilgisini toplamak belirsizliği azaltır. Bu sıra, hem ön yüzde hem de yönetim ekranında görülen JavaScript kaynaklı etkileşim sorunlarını daha düzenli incelemenize yardımcı olur.

Sık sorulan sorular

Sorun yalnızca bir tarayıcıda oluyorsa ne anlama gelir?

Bu durum tarayıcıya özgü olabilir. Tarayıcı eklentileri de JavaScript’e müdahale edebileceği için eklentileri devre dışı bırakarak veya gizli pencerede yeniden denemek, bu olasılığı elemenize yardımcı olur.

Konsolda hata görünmüyorsa ne yapmalıyım?

Sayfayı yeniden yükleyin. Bazı JavaScript hataları yalnızca sayfa yüklenirken oluşur. Ardından sorunu tetikleyen işlemi tekrar deneyin.

Destek talebine yalnız hata satır numarasını eklemek yeterli mi?

Hayır. Tam hata iletisini ve hata yığınını kopyalayın. Ayrıca dosya adını, satır numarasını, hatayı tetikleyen işlemi, sorunun görüldüğü tarayıcıları ve SCRIPT_DEBUG davranışını ekleyin.

Kaynaklar

[1] Using Your Browser to Diagnose JavaScript Errors – Advanced Administration Handbook | Developer.WordPress.org

[2] Debugging WordPress – Advanced Administration Handbook | Developer.WordPress.org