Firefox’un Web Developer menüsü, sayfaları incelemek, rastgele JavaScript kodunu çalıştırmak ve HTTP isteklerini ve diğer mesajları görüntülemek için araçlar içerir. Firefox 10 yepyeni bir Denetçi aracı ekledi ve Scratchpad'i güncelledi.
Firefox’un yeni web geliştirici özellikleri, Firebug ve Web Geliştirici Araç Çubuğu gibi harika web geliştirici eklentileriyle birlikte Firefox'u web geliştiricileri için ideal bir tarayıcı haline getiriyor. Tüm araçlar Firefox’un menüsünde Web Developer altında mevcuttur.
Sayfa Denetçisi
Belirli bir öğeyi sağ tıklayıp seçerek inceleyin İncele (veya basarak Q ). Ayrıca şunu da başlatabilirsiniz: Müfettiş Web Developer menüsünden.
Ekranın altında, denetçiyi kontrol etmek için kullanabileceğiniz bir araç çubuğu göreceksiniz. Seçtiğiniz öğe vurgulanacak ve sayfadaki diğer öğeler soluklaştırılacaktır.
Yeni bir öğe seçmek istiyorsanız, İncele Araç çubuğundaki düğmesine tıklayın, farenizi sayfanın üzerine getirin ve öğenizi tıklayın. Firefox, imlecinizin altındaki öğeyi vurgular.
Araç çubuğundaki içerik haritalarını tıklayarak üst ve alt öğeler arasında gezinebilirsiniz.
HTML Denetçisi
Tıkla HTML Seçili öğenin HTML kodunu görüntülemek için düğmesine basın.
HTML denetçisi, HTML etiketlerini bir bakışta görselleştirmenizi kolaylaştırarak genişletmenize ve daraltmanıza olanak tanır. Sayfanın HTML'sini düz bir dosyada görmek istiyorsanız, şunu seçebilirsiniz: Sayfa kaynağını görüntüle Web Developer menüsünden.
CSS Inspector
Tıkla Tarzı Seçili öğeye uygulanan CSS kurallarını görmek için düğmesine basın.
Ayrıca bir CSS özellikleri paneli de vardır - ikisinin arasında geçiş yapmak için Kurallar ve Özellikleri düğmeler. Belirli özellikleri bulmanıza yardımcı olmak için, özellikler paneli bir arama kutusu içerir.
Öğenin CSS'sini anında Kurallar panelinden düzenleyebilirsiniz. Bir kuralı devre dışı bırakmak için onay kutularından herhangi birinin 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. Buraya ekledim yazı tipi ağırlığı: kalın; CSS kuralı, öğenin metnini kalın hale getirir.
JavaScript Scratchpad
Scratchpad ayrıca Firefox 10 ile bir güncelleme gördü ve şimdi sözdizimi vurgulaması içeriyor. Mevcut sayfada çalıştırmak için JavaScript kodunu yazabilirsiniz.
Sahip olduğunuzda, Yürüt menü ve seçin Çalıştırmak. Kod, geçerli sekmede çalışır.
Web Konsolu
Web Konsolu, kullanımdan kaldırılan ve Firefox'un gelecekteki bir sürümünde kaldırılacak olan eski Hata Konsolu'nun yerini almaktadır.
Konsol, görünürlüğünü değiştirebileceğiniz dört farklı türde mesaj görüntüler - ağ istekleri, CSS hata mesajları, JavaScript hata mesajları ve web geliştirici mesajları.
Web geliştiricisinin mesajı nedir? Window.console nesnesine yazdırılan bir mesajdır. Örneğin, çalıştırabiliriz window.console.log ("Merhaba Dünya"); Konsola bir geliştirici mesajı yazdırmak için Scratchpad'deki JavaScript kodu. Web geliştiricileri, hata ayıklamaya yardımcı olmak için bu mesajları JavaScript kodlarına entegre edebilir.
Sayfayı yenileyin ve oluşturulan ağ isteklerini ve diğer mesajları göreceksiniz.
Mesajları filtrelemek için arama kutusunu kullanın; Daha fazla ayrıntı görmek istiyorsanız bir isteği tıklayın.
Firefox 10'dan itibaren, Web Konsolu, Sayfa Denetçisi ile birlikte çalışabilir. $ 0 değişkeni, denetçide seçili olan nesneyi temsil eder. Örneğin, şu anda seçili olan nesneyi gizlemek istiyorsanız, $ 0.style.display = "yok" konsolda.
Konsolu ve yerleşik işlevlerini kullanma hakkında daha fazla bilgi edinmekle ilgileniyorsanız, Web Konsolu sayfası Mozilla’nın Geliştirici Ağı web sitesinde.
Daha Fazla Araç Alın
Daha Fazla Araç Alın seçeneği sizi Mozilla Eklentileri web sitesindeki Web Geliştiricisinin Araç Kutusu eklenti koleksiyonuna götürür. Bazılarını içerir web geliştiricileri için en iyi eklentiler Firebug ve Web Geliştirici Araç Çubuğu dahil.
Firefox'u birkaç yıldır kullanıyorsanız, DOM Inspector'ı hatırlayabilirsiniz. Firefox’un entegre geliştirici araçları o zamandan beri uzun bir yol kat etti.
