Firefox Geliştirici Araçları Hakkında Bilmeniz Gereken Her Şey

Firefox Developer Edition, Firefox'un geliştiriciler için özel olarak hazırlanmış özel bir sürümüdür. Bir dizi uzman geliştirici aracıyla birlikte en yeni Firefox özelliklerinin tümüne sahiptir. Firefox Geliştirici Araçları hakkında bilmeniz gereken her şeyi bilmeniz için burada özellikleriyle ilgili bir kılavuz sunacağım.

Kullanıcı arayüzü

Firefox Developer Edition'ı yükledikten sonra, standart Firefox araç çubuğundan biraz farklı göründüğünü fark edeceksiniz. Firefox, araç çubuğunu tasarlarken kesinlikle daha geliştirici merkezli bir yaklaşım benimsedi, görünüşünü daralttı ve varsayılan olarak çok daha fazla düğmeyle süslendi.

Firefox Geliştirici Araçları için varsayılan tema karanlıktır ve bu muhtemelen kullanıcı testinin bir sonucudur. Ancak karanlık temayı sevmiyorsanız, her zaman Menü > Özelleştir seçeneğine giderek geliştirici sürümü temasını kapatabilirsiniz.

Araçlar Oluşturma

Firefox Developer Edition, web siteleri ve web uygulamaları yazanlar için tasarlanmış bir dizi oluşturma aracıyla birlikte gelir. Aşağıda, bu bilgileri aramanıza gerek kalmaması için araçların ve faydalarının bir özetini sağladım.

Çalışma defteri

Bu araç, web geliştiricilerine JavaScript koduyla deneme yapma fırsatı verir. Scratchpad tarafından sağlanan ortamda, mevcut sayfayla etkileşime giren kodun sonuçlarını yazabilir, çalıştırabilir ve inceleyebilirsiniz.

Scratchpad'i açmak için Shift F4'e basın veya Web Developer menüsüne gidin ve Scratchpad'e tıklayın. Bu, kodunuzu yazabileceğiniz pencereyi açacaktır. Bitirdikten sonra Yürüt > Çalıştır'a tıklayın ve kod geçerli sekmede çalışacaktır.

Stil Editörü

Stil Düzenleyici, web geliştiricilerinin ilişkili sayfayla birlikte tüm stil sayfalarını görüntülemesini ve düzenlemesini sağlar. Ayrıca sıfırdan yeni stil sayfaları oluşturabilecek ve bunları bir sayfaya uygulayabilecek, ayrıca mevcut stil sayfalarını içe aktarabilecek ve bunları geçerli sayfaya uygulayabileceksiniz.

Stil Düzenleyiciyi açmak için Web Geliştirici menüsüne gidin ve Stil Düzenleyici'ye tıklayın. Firefox Geliştirici Araç Kutusu, Stil Düzenleyici kullanıma hazır olarak tarayıcının altında görünecektir.

Gölgelendirici Düzenleyici

Firefox'ta Shader Editor'ı kullanmak basittir. Geliştiriciler, WebGL tarafından kullanılan parça gölgelendiricilerini ve tepe noktasını tam olarak görüntüleyebilir ve düzenleyebilir. Ve bilmeyenler için çok hızlı bir şekilde, WebGL hem 2D hem de 3D grafikleri doğrudan Firefox tarayıcısı üzerinden oluşturmak için JavaScript'i (bir API aracılığıyla) akıllıca kullanır ve eklenti kullanımı gerektirmez.

Shader Editor'ı kullanmak için önce onu etkinleştirmeniz gerekir. Bunu yapmak için Araç Kutusu ayarlarına gidin ve ardından 'Shader Editor' yanındaki kutuyu işaretleyin. Shader Editor daha sonra Firefox araç çubuğunda görüntülenecektir. Üzerine tıklayın ve açabileceksiniz.

Web Ses Editörü

Web Audio Editor API, geliştiricilerin ses bağlamı oluşturmasını sağlar. Geliştiricilerin aşağıdakileri sağlayan ses düğümleri oluşturması gerekir:

• Ses kaynakları
• Dönüşüm gerçekleştiren düğümler
• Ses akışı için seçilen hedefi temsil eden notlar.

Web Audio Editor, bir sayfanın ses özelliklerini inceleyecek ve bir grafikte görsel bir temsilini sağlayacaktır. Bu, geliştiricilerin işlevselliği ve çalışmayı incelemesine ve tüm düğümlerin düzgün şekilde bağlanıp bağlanmadığını kontrol etmesine olanak tanır. Geliştiriciler, AudioParam düğüm özelliklerinin yanı sıra diğer özellikleri de düzenleyebilir ve inceleyebilir.

Shader Editor gibi, Web Audio Editor da manuel olarak etkinleştirilmelidir ve varsayılan bir ayar değildir. Etkinleştirmek kolaydır: Geliştirici Aracı Ayarlarına geri dönün ve ardından 'Web Sesi'nin yanındaki kutuyu işaretleyin. Ardından, Firefox Araç Kutusu araç çubuğunda ek bir sekme gösterisi olduğunu göreceksiniz. Basitçe bu sekmeye tıklayın ve bir ses bağlamı oluşturabileceğiniz bir sayfa yüklenecektir.

Hata Ayıklama Araçları

Firefox'un hata ayıklama araçları, web sitelerini ve web uygulamalarını incelemek, keşfetmek ve hata ayıklamak için tasarlanmıştır. Aşağıda bu araçlardan bazılarının temel özelliklerini ve faydalarını özetledim.

Sayfa Denetçisi

Sayfa Denetçisi aracı, geliştiricilerin bir web sayfasının HTML ve CSS kodlamasını incelemesine ve düzenlemesine olanak tanır. Geliştiriciler, bu aracı kullanarak yerel olarak yüklenen sürüm veya uzak bir hedef aracılığıyla sayfaları araştırabilir.

Sayfa Denetçisini açmak kolaydır. Seçtiğiniz bir öğe varsa, öğeye sağ tıklayıp ardından 'Elemanı İncele'yi seçebilirsiniz. Alternatif olarak, Web Geliştirici Menüsüne gidebilir ve ardından Müfettiş seçeneğine tıklayabilirsiniz. Sayfa Denetçisi daha sonra tarayıcınızın altında görünecektir.

Web Konsolu

Bu araç, ağ istekleri, JavaScript, CSS, güvenlik hataları ve uyarıları, hata uyarıları ve bilgi mesajları gibi bir web sayfasıyla ilişkili tüm bilgileri günlüğe kaydeder. Ayrıca JavaScript kullanarak bir web sayfasıyla etkileşime girmenizi sağlar.

Web Konsolu, başlangıçta Firefox Geliştirici Araçları'nın bir parçası olan eski Hata Konsolu'nun yerini alacak şekilde tasarlanmıştır. Hata Konsolu birden çok sayfadan oluşan büyük bir hata listesi sağlarken, Web Konsolu yalnızca belirli bir web sayfasıyla ilişkili bilgileri gösterecek ve bu nedenle onu daha kullanışlı hale getirecektir.

Web Konsolunu açmak için Firefox Menüsünde Web Geliştirici alt menüsüne gidin ve 'Web Konsolu'nu tıklayın. Ayrıca Ctrl Shift K kısayolunu da kullanabilirsiniz. Araç kutusu daha sonra 'Konsol' etkinleştirilmiş olarak tarayıcının altında görünecektir.

hata ayıklayıcı

Firefox Hata Ayıklayıcı aracı, web geliştiricilerine JavaScript kodunuzu inceleme ve değiştirme fırsatı verir. Hataları belirlemek için de kullanılabilir. Hata Ayıklayıcı'yı kullanarak, Firefox'ta yerel olarak veya bir Firefox OS cihazında veya Android için Firefox'ta uzaktan kodda hata ayıklayabilirsiniz.

Hata ayıklayıcıyı açmak için ana Firefox menüsünde Web Geliştirici alt menüsüne gidin ve 'Hata Ayıklayıcı'yı tıklayın. Alternatif olarak Ctrl Shift S tuşuna basabilirsiniz ve araç kutusu, Hata Ayıklayıcı etkin ve kullanıma hazır olarak tarayıcınızın altında görünecektir.

Ağ İzleyicisi

Ağ İzleyicisi, Firefox tarafından yapılan tüm farklı ağ isteklerini, her isteğin ne kadar sürdüğünü ve her isteğin ayrıntılarını size göstermek için tasarlanmıştır. Aracı etkinleştirmek için Web Geliştirici Menüsü > Ağ'a gidin. İstekleri görmek için sayfayı yenilemeniz gerekecek.

Ağ İzleyicisi'nde isteklerin zaman çizelgesini görüntüleyebilir ve içeriği türe göre filtreleyebilirsiniz. Tarayıcının web sitenizin farklı bölümlerini indirmesinin ne kadar sürdüğünü görmek için kullanabileceğiniz bir performans analiz aracı da vardır. Bu aracı çalıştırmak için, Ağ İzleyicisi'nin altındaki araç çubuğundaki kronometre simgesine tıklamanız yeterlidir.

Depolama Denetçisi

Bir web sayfasının kullanabileceği farklı depolama türleri hakkında bilgi edinmek istiyorsanız, Depolama Denetçisi aracını etkinleştirmeniz gerekir. Şu anda olduğu gibi, Depolama Denetçisi, Tanımlama Bilgilerini, Yerel Depolamayı, Oturum Depolamasını ve IndexedDB'yi incelemek için kullanılabilir.

Depolama Denetçisi, salt okunur bir depolama görünümü sağlar. Ancak Firefox, geliştiricilerin gelecekte depolama içeriklerini düzenleyebilmeleri için aracı geliştirmeye çalıştığını söyledi.

Storage Inspector'ı açmak için Web Developer Alt Menüsüne gidin ve Storage Inspector'a tıklayın. Alternatif olarak klavye kısayolunu kullanmak için Shift + F9 tuşlarına basabilirsiniz.

Geliştirici Araç Çubuğu

Geliştirici Araç Çubuğu, bir dizi Firefox Geliştirici Aracına web geliştirici komut satırı erişimi sağlamak için tasarlanmıştır. Burada bulabileceğiniz Firefox tarafından ayarlanan komutları kullanmanın yanı sıra Scratchpad'i kullanarak kendi komutlarınızı da ekleyebilirsiniz. Bunlar, diğer kişilerin de kullanabilmesi için eklentilere dönüştürülebilir.

Shift + F2 tuşlarına basarak Geliştirici Araç Çubuğunu açın. Alternatif olarak, Web Geliştirici Menüsüne gidebilir ve Geliştirici Araç Çubuğuna tıklayabilirsiniz.

Diğer Hata Ayıklama Araçları – 3D Görünüm, Damlalık, iFrames

Firefox Geliştirici Araçları paketinde bulunan diğer hata ayıklama araçları şunları içerir:

• 3B görünüm: Bu, iç içe geçmiş HTML bloklarınızın ve içeriğin 3B görünümünü sağlar
• Göz Damlalığı: Bu, sayfadan belirli bir rengi seçip panoya kopyalamanızı sağlar)
• iFrame'leri Seçme: Bu, geliştirici araçlarınızı bir belge içindeki belirli iFrame'lere yönlendirmenize olanak tanır.

Mobil Araçlar

Firefox oluşturma ve hata ayıklama araçlarına ek olarak, geliştiricilerin mobil geliştirmeler için kullanabileceği bir dizi mobil araç da vardır. Bunları aşağıda tam olarak inceleyeceğim.

Uygulama Yöneticisi

Bu araç, geliştiricilerin Firefox OS cihazlarında HTML5 uygulamalarını test etmesine, dağıtmasına ve hata ayıklamasına olanak tanır. Aynı zamanda bir simülatör görevi görür, böylece test doğrudan Firefox masaüstü tarayıcısından yapılabilir.

Uygulama Yöneticisi, geliştiricilerin yerel uygulamaları ve harici olarak barındırılan uygulamaları yönetebileceği bir Uygulama paneliyle birlikte sunulur; OS sürümü ve yüklü uygulamalar gibi bağlı bir cihaz hakkında bilgi sağlayan bir Cihaz paneli; ve çalışan uygulamada kullanılabilen bir dizi Firefox Geliştirici Araçları olan Araç Kutuları.

WebIDE

Bu mobil araç, geliştiricilerin web uygulamalarını Firefox OS Simülatörü veya bir Firefox OS cihazı aracılığıyla oluşturmasına, düzenlemesine, yürütmesine ve hatalarını ayıklamasına olanak tanır. Bunu, Android için Firefox ve Android için Chrome gibi diğer tarayıcılarla Firefox Geliştirici Araçlarına bağlanmak için kullanabilirsiniz.

Diğer Mobil Araçlar

Diğer mobil araçlar şunları içerir:

• Android için Firefox için Uzaktan Hata Ayıklama
• Firefox OS Simülatörü: Bu, bir Firefox OS cihazını simüle eder ancak masaüstünde çalışır
• Duyarlı Tasarım Görünümü: Bu, web sitenizin veya web uygulamanızın farklı ekran boyutlarına sahip farklı cihazlarda nasıl göründüğünü görüntülemenizi sağlar.

Performans Araçları

Performans, web geliştirmede kritik öneme sahiptir; bu nedenle Firefox, web geliştiricilerine, web siteleri ve web uygulamalarıyla ilgili herhangi bir performans sorununu teşhis etmek ve düzeltmek için kullanılabilecek bir dizi araç sağlar.

Performans Aracı

Performans aracı, Firefox'un orijinal JavaScript örnekleme profil oluşturucusunun yerini aldı. Hala örnekleme profilinin güncellenmiş bir versiyonunu içerir; ancak aynı zamanda bir kare hızı zaman çizelgesine de sahiptir. Gelecekte daha fazla özellik bekleniyor.

Performans aracı, profiller oluşturmak, analiz etmek ve örneklemek için kullanılabilir.

JavaScript Profil Oluşturucu

JavaScript Profiler, geliştiricilerin JavaScript kodlarındaki sorunları bulmalarına yardımcı olmak için tasarlanmıştır. Bunu, mevcut JavaScript çağrı yığınını örnekleyerek ve bununla ilgili istatistikler sağlayarak yapar.

Yanıp Sönen Boya Aracı

Bu araç, web sayfanızın bir girdiye yanıt olarak tarayıcının yeniden boyaması gereken bölümünü vurgulayacaktır. Web geliştiricilerinin, web sitelerinin tarayıcıyı gereğinden fazla yeniden boyamasını sağlayıp sağlamadığını anlamalarını sağlar. Yeniden boyamaların performansınız üzerinde olumsuz bir etkisi olabileceğini unutmayın, bu nedenle gereksiz yeniden boyamaları ortadan kaldırmak ve web sitenizin performansını artırmak için bu aracı kullanmak iyi bir fikirdir.

Ayrı Geliştirici Profili

Firefox sürümleri arasında geçiş yapmak gerçek bir acı olacaktır. İyi haber şu ki, Firefox Developer Edition, yüklediğiniz diğer Firefox sürümleri için tamamen ayrı bir profil kullanıyor.

Geliştirici Sürüm Notları

Mevcut ve herhangi bir tarihi Firefox Developer Edition sürümleriyle ilgili notları okumak isteyen geliştiriciler, bu bağlantıyı ziyaret ederek bunu yapabilirler.

Toplama

Yeni veya deneyimli bir web geliştiricisiyseniz, ayrıntılı ve çeşitli Firefox Geliştirici Araçlarından büyük ölçüde yararlanacaksınız. Araçlar, kod oluşturmaktan HTML'de hata ayıklamaya kadar, bir web sitesi veya web uygulaması geliştirmek için gereken çok çeşitli eylemleri gerçekleştirmenize olanak tanır. Mobil araçlar özellikle son gelen yararına (2015 ^21. Nisan) Google'ın algoritması güncelleme için duyarlı web siteleri oluşturmak isteyenler için de son derece faydalıdır.

Firefox Geliştirici Araçları hakkında daha fazla bilgi için Mozilla Developer web sitesine gidin ve geliştirici topluluğuna katılın. Firefox Developer Edition'ı indirmek ve kullanmak ücretsizdir.