13Sep
Firefox'un Web Developer menüsü, sayfaları incelemek, rasgele JavaScript kodu çalıştırmak ve HTTP isteklerini ve diğer mesajları görüntülemek için araçlar içerir. Firefox 10, tamamen yeni bir Müfettiş aracı ve güncellenmiş Scratchpad'i ekledi.
Firefox'un yeni web geliştirici özellikleri, Firebug ve Web Developer Araç Çubuğu gibi müthiş web geliştirici eklentileri ile birlikte Firefox'u web geliştiricileri için ideal bir tarayıcı yapıyor. Tüm araçlar Firefox'un menüsünde Web Developer'da mevcuttur.
Sayfa Denetleyicisi
Belirli bir öğeyi sağ tıklatarak ve 'yi inceleyerek( veya Q tuşlarına basarak) belirli bir öğeyi muayene edin. Müfettişi 'yi Web Developer menüsünden de başlatabilirsiniz.
Ekranın alt kısmında, denetleyiciyi denetlemek için kullanabileceğiniz bir araç çubuğu görürsünüz. Seçtiğiniz öğe vurgulanır ve sayfadaki diğer öğeler soluklukla gösterilir.
Yeni bir öğe seçmek isterseniz, araç çubuğundaki Inspect düğmesini tıklatın, farenizi sayfanın üzerine getirin ve öğenizi tıklatın. Firefox, imlecinizin altındaki öğeyi vurgular.
Araç çubuğunda kırpıntıları tıklatarak üst öğe ile alt öğeler arasında gezinebilirsiniz.
HTML Müfettişi
Şu anda seçilen öğenin HTML kodunu görüntülemek için HTML düğmesini tıklayın.
HTML denetçisi, HTML etiketlerini genişletip daraltmanızı ve böylece bir bakışta görselleştirmeyi kolaylaştırır. Sayfanın HTML'sini düz bir dosyada görmek isterseniz, Web Developer menüsünden View Page Source 'yi seçebilirsiniz.
CSS Müfettişi
Seçili öğeye uygulanan CSS kurallarını görmek için Stil düğmesini tıklayın.
Bir CSS özellikleri paneli de var - Kuralları ve Özellikler düğmelerini tıklatarak ikisi arasında geçiş yapabilirsiniz. Belirli özellikleri bulmanıza yardımcı olmak için özellikler panelinde bir arama kutusu bulunur.
Kütük panelinden öğenin CSS'sini anında düzenleyebilirsiniz. Bir kuralı devre dışı bırakmak için herhangi bir onay kutusunun işaretini kaldırın, bir kuralı değiştirmek için metni tıklayın veya bölmenin üst kısmındaki öğeye kendi kurallarınızı ekleyin. Burada, font-weight: bold; CSS kuralı, elemanın metnini kalın yapıyor.
JavaScript Scratchpad
Scratchpad ayrıca Firefox 10 ile bir güncelleme gördü ve şimdi sözdizimi vurgulamayı içeriyor. Geçerli sayfada çalışmak için JavaScript kodunu yazabilirsiniz.
Verdikten sonra, 'yi tıklatın 'yi çalıştırın ve Çalıştır'ı seçin. Kod geçerli sekmede çalışıyor.
Web Konsolu
Web Konsolu, kullanılmayan ve önümüzdeki Firefox sürümünde kaldırılacak eski Hata Konsolu'nun yerini alıyor.
Konsol, ağ istekleri, CSS hata mesajları, JavaScript hata mesajları ve web geliştirici mesajlarının görünürlüğünü değiştirebileceğiniz dört farklı ileti türü görüntüler.
Web geliştirici mesajı nedir? Window.console nesnesine yazdırılan bir mesajdır.Örneğin, window.console.log( "Merhaba Dünya") çalıştırabiliriz; Konsola bir geliştirici mesajı basmak için Scratchpad'de JavaScript kodu. Web geliştiricileri hata ayıklamaya yardımcı olması için bu mesajları kendi JavaScript kodlarına entegre edebilir.
Sayfayı yenileyin ve oluşturulan ağ isteklerini ve diğer iletileri görürsünüz.
Mesajları filtrelemek için arama kutusunu kullanın;daha fazla ayrıntı görmek isterseniz bir isteği tıklayın.
Firefox 10'dan itibaren, Web Konsolu Sayfa Müfettişiyle birlikte çalışabilir.$ 0 değişkeni, denetmende seçili olan nesneyi temsil eder.Örneğin, şu anda seçili olan nesneyi gizlemek isterseniz, konsoldan $ 0.style.display = "none" çalıştırabilirsiniz.
Konsol ve yerleşik işlevleri kullanma hakkında daha fazla bilgi edinmek isterseniz, Mozilla'nın Geliştirici Ağı web sitesindeki Web Konsolu sayfasına bakın.
Daha Fazla Araç Alın
Diğer Araçları Al seçeneği, Mozilla Eklentileri web sitesinde Web Developer's Toolbox eklentisine götürür. Firebug ve Web Developer Araç Çubuğu da dahil olmak üzere web geliştiricileri için en iyi eklentileri içerir.
Firefox'u birkaç yıl kullandıysanız, DOM Müfettişini hatırlayabilirsiniz. Firefox'un entegre geliştirici araçları o zamandan beri uzun bir yol kat etti.