Geliştirici Konsolu Nedir?
Geliştirici Konsolu, tarayıcınız içinde uygulamaları oluşturmanızı, hata ayıklamanızı ve test etmenizi sağlayan bir araç setine sahip gömülü bir geliştirme ortamıdır. Bu ortam, bir sayfayla ilişkili bilgileri kaydeder; örneğin ağ istekleri, HTML, CSS, JavaScript, uyarılar ve hatalar. Geliştirici Konsolu’ndaki uyarıların ekran görüntüleri, Elfsight destek ekibinin widgetlerle yaşadığınız sorunu çözmesine son derece yardımcı olabilir.
Farklı Tarayıcılarda Konsolu Nasıl Açılır
Kullanmakta olduğunuz herhangi bir tarayıcıda konsolu açmak sadece birkaç tıklama gerektirir; ayrıca kısayollarla da başlatabilirsiniz. Aşağıdaki rehberde en popüler tarayıcılarda konsolu nasıl açacağınıza dair kısa talimatlar ve işlemin ekran görüntülerini bulacaksınız.
Chrome’da Geliştirici Konsolu Nasıl Açılır
Google Chrome’da geliştirici panelini açmak için tarayıcı penceresinin sağ üst köşesindeki üç nokta simgesine tıklayın, Daha Fazla Araç seçeneğine tıklayın; açılır listede Geliştirici Araçları bulunur.
Bir başka seçenek olarak Chrome geliştirici araçlarının kısayolunu kullanmaktır: F12 (Windows/Linux’ta) ve Option + ⌘ + J (macOS’ta).
Chrome sayfasının alt kısmında veya sağında konsolu göreceksiniz. Konsol seçeneğini seçin ve kod performansınızı incelemeye başlayın.
Chrome’da geliştirici konsolunu açmayı öğrendiğinize göre, artık farklı tarayıcılarda geliştirici araçlarını açma süreciyle de aşina olacaksınız.
Opera Geliştirici Araçlarını Aç
Opera tarayıcısının konsolunu HTML, CSS ve JavaScript’i incelemek, düzenlemek ve hata ayıklamak için kullanabilirsiniz. Bununla çalışmaya başlamak için şu kısayolu kullanın: Ctrl+Shift+C ile Geliştirici Araçları Konsolu’nu açın veya Ctrl+Shift+I ile önce geliştirici araçlarını açıp ardından Console’u seçin.
Firefox Web Konsolunu Başlat
Mozilla konsolu, sağ üst köşedeki menüden Web Geliştirici seçeneğine tıklayarak ve ardından Tarayıcı Konsolu seçerek başlatılabilir. Ayrıca Firefox geliştirici araçları için kısayol olan Ctrl+Shift+J’yi de kullanabilirsiniz.
Safari’de Geliştirici Araçları’nı Etkinleştirme
Safari’de konsolu açmak için Geliştirici Menüsünü etkinleştirmeniz gerekir. Bunu yapmak için Safari’nin tercihlerini açın (Safari Menüsü > Tercihler) ve Gelişmiş Sekme‘yi seçin.
Ayrıca Safari’de Geliştir > JavaScript Konsolunu Göster üzerine tıklayarak geliştirici konsolunu açabilirsiniz. Ayrıca Option + ⌘ + C kısayolundan da yararlanabilirsiniz. Konsol sekmesi otomatik olarak açılacak, açmak için bir seçim yapmanıza gerek kalmaz.
Microsoft Edge Konsolunu Aç
Edge tarayıcı konsolunu açmak için açılır menüden F12 Geliştirici Araçlarına tıklayabilir veya F12 tuşuna basabilirsiniz. Ayrıca web sayfasındaki herhangi bir öğeye sağ tıklayıp Öğeyi İnceleyi seçebilirsiniz.
Internet Explorer Konsolunu Açın
IE geliştirme konsolu Edge konsolu ile aynı şekilde açılabilir. Açılır menüden F12 Geliştirici Araçları üzerine tıklayın veya sadece F12 tuşuna basın. Bu işlemi yaptığınızda Internet Explorer konsoluna başarıyla erişecek ve incelemeye başlayabileceksiniz.
Geliştirici Araçları’nın Ana Sekmeleri
Aşağıda, Geliştirici Araçları içindeki ana konsol sekmelerinin kısa bir özeti yer alıyor. Bunların tamamını Google Chrome tarayıcısı örneği üzerinden inceledik.
Elemanlar Sekmesi
The Elements paneli sayfanızın CSS ve HTML performansını incelemek isteyenler için harika bir araçtır. Sayfanın herhangi bir öğesine sağ tıklayabilir, Öğeyi İnceleyi seçebilir ve öğenin özelliklerinin kodda vurgulandığını görebilirsiniz.
Konsol
Chrome Geliştirici Araçları’ndaki Konsol sekmesi, web sayfasındaki betiklerin nasıl çalıştığını gösterir. Komut satırlarını başlatmak için bir betik motoru kullanmanıza ve betikleri yürütmek için komutlar girebileceğiniz bir araçtır. Destek ekibimiz sizden konsolunuzun ekran görüntüsünü istiyorsa, konsol sekmesinde alınmış bir görüntü gerekir.
Kaynaklar Paneli
Kaynaklar sekmesi Chrome DevTools’ta JavaScript ve CSS’i düzenlemek için kullanabilirsiniz; dosyaları görüntüleyebilir, JavaScript snippet’leri oluşturabilir ve bunları ileride kullanabilirsiniz. Ayrıca bu sekme JavaScript kodunu hata ayıklamada da yardımcı olabilir.
Ağ sekmesi
Ağ Sekmesi, bir test aracı olarak kullanılabilir; web sayfası performansını inceler ve sitenin yavaşlamasına neden olan sorunları tespit eder. Chrome’daki Ağ sekmesi, DevTools’u açtığınız anda tüm ağ isteklerini kaydetmeye başlar. İstekleri farklı özelliklere göre daha da sıralayabilirsiniz.
Performans sekmesi
Performans paneli, çalışma süresi ve yüklenme performanslarını zaman içinde kaydetmenize olanak tanır. Bu panel, ziyaretçiler site tamamen yüklendikten ve kullanıma açıldıktan sonra nasıl davrandığını gösterir. Performansı kaydetmeyi seçebilir ya da işlemin bir dizi ekran görüntüsünü yakalayabilirsiniz.
Bellek sekmesi
Bellek sekmesini kullanarak şişme, çöp toplama ve bellek sızıntıları gibi bellek sorunlarını teşhis edin ve düzeltin. Tüm bu sorunlar sayfa performansını etkiler. Bu sorunlar çözülmezse siteniz yavaşlar ve ziyaretçiler için çekiciliğini kaybeder.
Uygulama Paneli
Uygulama sekmesi ile Progressive Web Uygulamalarını hata ayıklayabilir; depolama, veritabanları ve önbellekleri inceleyip yönetebilir; Çerezleri inceleyip silebilir; Kaynakları inceleyebilirsiniz.
Güvenlik
Güvenlik sekmesi, karışık içerik sorunlarını ve sertifika problemlerini hata ayıklamak istediğinizde faydalı olabilir. Ziyaret ettiğiniz URL HTTP üzerinden talep edildiği için web sitesinin güvenli olmadığına inanılır. Modern web gereksinimlerine göre bu işlem HTTPS protokolü üzerinden yapılmalıdır. Sayfa karışık içerik içeriyorsa, bu durum kısmen korumalı oldukları ve paket dinleyicilere karşı savunmasız oldukları anlamına gelir.
Lighthouse sekmesi
Lighthouse web uygulamalarının kalitesini otomatik olarak artırmaya yarayan bir araçtır. Chrome DevTools’a doğrudan entegre edilmiştir. Performans denetimleri, erişilebilirlik, Progressive Web Apps (PWA), SEO ve daha fazlasını sunar.
Elfsight widget’larının çalışması sırasında tipik konsol uyarıları ve hatalar
Elfsight widget’larının çalışmasında bazen bir şeyler ters gidebilir. Konsolda kırmızı renkli uyarılar veya hatalar görürseniz endişelenmeyin. Neden olduğunu biliyorsanız, muhtemelen her şeyi kendiniz düzeltebilirsiniz. Aşağıda, konsolda görebileceğiniz yaygın hataların bir listesini bulacaksınız.
Tüm widget’larımızla ilgili şu iki hata var:
Widget Engellendi – hata apps.elfsight.com adresine atıfta bulunuyorsa Elfsight hesabınızda web sitesi alan adını engellemişsiniz demektir. apps.elfsight.com.
Widget bulunamadı – hesabınızdaki widget’i yanlışlıkla sildiniz olabilir. Bunu kontrol edin.
Görüldüğü gibi, sorun yok. Şimdi bazı widget’lar ve entegrasyonların çalışma süreçlerinde karşılaşılan hatalara değineceğiz.
Google Maps Yaygın Sorunlar
Google Haritalar için hatalar genellikle API anahtarında bir sorun olduğunda oluşur.
ExpiredKeyMapError – API anahtarınız süresi doldu veya tanınmıyor. Çoğu durumda yeni bir anahtar oluşturmalısınız. Bu hatayı yeni bir API anahtarı oluşturduktan hemen sonra alırsanız ya 1 ile 8 dakika beklemeniz ya da Places API’yi ayrı olarak etkinleştirmeniz gerekir.
RefererNotAllowedMapError – Referrer olarak izin verilmeyen Elfsight URL’si. Maps JavaScript API’yi yükleyen referrer olarak izin verilmemiştir. Google Cloud Platform Console’dan API anahtarınızın referrer ayarlarını kontrol edin. Widget kullanırken bizi referrer olarak eklemeniz gerekir. İşte doğru şekilde yapılacağını gösteren bir makale ile bu işlemi nasıl doğru yapacağınızı öğrenebilirsiniz.
here.”>ClientBillingNotEnabledMapError – Google Maps bileşenini kullanmak için bir Faturalandırma hesabına ihtiyacınız var. Bu hata, projenizde faturalandırmayı etkinleştirmediğiniz için meydana geldi. Çözüm, bu istemci kimliğine bağlı Google Cloud Projesi üzerinde faturalandırmayı etkinleştirmektir. Bunu buradan yapabilirsiniz.
BillingNotEnabledMapError – Google Maps’i kullanabilmek için faturalandırmayı etkinleştirmeniz gerekir.
Konsolda Yaşanan YouTube Galerisi Hataları
Elfsight YouTube Video Gallery’yi kullanırsanız, aşağıda listelenen çoğu sorundan endişe duymanıza gerek kalmaz. Ancak widget’imizde de iki genel sorun ortaya çıkabilir.
quotaExceeded – YouTube içeriklere ulaşmak ve bunları web sitelerine veya uygulamalara çekmek için kotalar kullanır. YouTube kotası aşıldığında, YouTube Galerinizin web sitesinde yanlışlıkla çalışmayı durdurduğunu ya da yavaş çalıştığını fark edeceksiniz. Çözüm şu olabilir:
- YouTube içeriğini kendiniz çekiyorsanız yeni bir API anahtarı alın;
- support@elfsight.com if you are using Elfsight YouTube Gallery, which is much easier.”>Elfsight YouTube Gallery kullanıyorsanız, destek ekibimizle support@elfsight.com adresinden iletişime geçin; bu çok daha kolaydır.
videoNotFound – Bu uyarı, YouTube videosuna bağlantı için eklediğiniz URL yanlış olduğunda ortaya çıkabilir. Bazen kullanıcılar videoyu içeren sayfanın bağlantısını yapıştırır, fakat videonun gerçekten bulunduğu konum bu değildir ve hata oluşur. Her şeyi kontrol edin ve videonun orijinal bağlantısını yapıştırın.
Facebook Akışı ve Instagram Akışı Hataları
Facebook Beslemesi veya Instagram çalışmayı durdurduysa, Geliştirici Konsolu’nda nelerin olup bittiğini inceleyebilirsiniz. Bu iki popüler uygulama Facebook API üzerinde çalıştığı için hataların aşağıdaki açıklamaları her iki uygulama için de geçerli olabilir.
err_ssl_protocol_error Facebook veya Instagram Beslemesi widget’ını sitenizde kullanırken bu hata çeşitli nedenlerden kaynaklanabilir. Sorunu çözmek için doğru tarih ve saat ayarlamayı deneyebilir, Chrome tarama verilerini temizleyebilir veya SSL durumunuzu sıfırlayabilirsiniz. Ayrıca Facebook Graph API hatalar fırlatırsa bunlar hakkında fbtrace_id kullanarak daha fazla bilgi edinebilirsiniz. Ancak yukarıdakilerin hiçbiri işe yaramazsa destek ekibimize her zaman ulaşabilirsiniz.
rest_cannot_access – genelde üçüncü taraf bir widget’in (örneğin Password Protect eklentisinin) aracımızın düzgün çalışmasını engellediğini gösterir. Böyle bir hizmeti devre dışı bırakmak işi çözer.
İstediğiniz sayfa şu anda görüntülenemiyor– bu, Facebook uygulamanızın geliştirme modunda olabileceğini gösterir. Eğer bir Elfsight Facebook Akışı kullanıcısıysanız bu hata mesajını almazsınız; ancak bu mesajı görürseniz destek ekibimizle iletişime geçin.
OAuthException Instagram’da özellikle şu anlama gelir: Giriş durumunuz veya erişim belirteci iptal edilmiş, süresi dolmuş veya bir nedenle geçersizdir. Bu durumda destek ekibimizle iletişime geçin; Elfsight geliştiricileri yeni bir erişim belirteci almanıza yardımcı olur veya varsa alt kodu inceleyeceklerdir.
En Yaygın Konsol Hataları
Deneyimli bir web geliştiricisi olarak bu hataları görmek istemediğinizden muhtemelen daha sık görmüşsünüzdür. Chrome’da tanımlanmamış bir nesnenin özelliğini okumaya çalışırken veya bir yöntemi çağırırken bu hatalar görülebilir. Bu özel hataları Chrome ve Safari Geliştirici Konsolu’nda try-catch ile test edebilirsiniz.
Profesyonel bir yazılım geliştirici değilseniz, bu kılavuzu atlayabilirsiniz.
Yakalanamayan TypeError: Özellik okunamıyor
Bu durum pek çok nedenden kaynaklanabilir; en yaygını, UI bileşenlerini render ederken durumun yanlış başlatılmasıdır. Bu hatayı düzeltmek kolaydır. En basit yol: Yapıcı içinde durumu makul varsayılan değerlerle başlatmaktır.
TypeError: ‘tanımsız’ bir nesne değildir
Safari’de, tanımlanmamış bir nesne üzerinde bir özelliği okumaya çalışırken ya da bir yöntemi çağırırken oluşan bir hatadır. Safari Geliştirici Konsolu’nda bunu test edebilirsiniz. Chrome’daki hata ile neredeyse aynıdır; ancak Safari farklı bir hata mesajı gösterir.
(bilinmiyor): Betik hatası
Bu hatayı görürseniz, önce gerçek mesajı almanız gerekir. Bunu şu adımları uygulayarak elde edebilirsiniz: Access-Control-Allow-Origin başlığını * olarak ayarlamak, kaynağın herhangi bir alan adından doğru şekilde erişilebileceği anlamına gelir. Gerekirse * yerine kendi alan adınızı kullanabilirsiniz: örneğin, Access-Control-Allow-Origin: www.example.org. Ancak birden çok alan adını yönetmek zahmetli olabilir ve CDN kullanıyorsanız önbellekleme sorunları nedeniyle buna değmeyebilir.
En sık karşılaşılan JavaScript konsol hatalarını şu şekilde çözebilirsiniz. Biz ve müşterilerimiz başka sorunlar karşılaştıkça bu listeyi güncelleyeceğiz.
Sonuç
Geliştirici Konsolu, her programcının web siteleriyle ilgili sayısız veriye erişmesini sağlayan harika bir araçtır. Açıp kullanmaya başlamak pek zor değildir; ancak biraz zaman ve çaba gerekir, sabırlı olun.
Daha önce hangi hatalarla karşılaştınız? Deneyimlerinizi aşağıdaki yorumlarda paylaşın; sizinle tartışmaktan memnun oluruz!
Ayrıca başka harika rehberlerimiz de var; örneğin web sitenize Google İşletme Yorumlarını nasıl gömmeceğinizi öğrenebilirsiniz!
