Firefox'un Web Geliştirici Araçları Nasıl Kullanılır?

Firefox’un Web Geliştirici menüsü sayfaları incelemek, isteğe bağlı 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 Müfettiş 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 getirir. Tüm araçlar, Firefox’un menüsünde Web Geliştirici altında bulunur..

Sayfa Müfettişi

Belirli bir öğeyi sağ tıklayıp seçerek inceleyin denetlemek (veya basarak S). Ayrıca, müfettiş Web Geliştirici 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 vurgulanır ve sayfadaki diğer öğeler soluklaştırılır.

Yeni bir öğe seçmek istiyorsanız, simgesine tıklayın. denetlemek araç çubuğundaki düğmesine tıklayın, farenizi sayfanın üzerine getirin ve elementinizi tıklayın. Firefox, imlecinizin altındaki öğeyi vurgular.

Araç çubuğundaki ekmek kırıntılarını tıklatarak ana ve alt öğeler arasında gezinebilirsiniz.

HTML Müfettişi

Tıkla HTML Seçili öğenin HTML kodunu görüntülemek için.

HTML denetçisi, HTML etiketlerini genişletmenizi ve daraltmanızı sağlar ve böylece bir bakışta görselleştirmeyi kolaylaştırır. Sayfanın HTML’sini düz bir dosyada görmek istiyorsanız, Sayfa kaynağını görüntüle Web Geliştirici menüsünden.

CSS Müfettişi

Tıkla stil Seçilen öğeye uygulanan CSS kurallarını görmek için.

Bir CSS özellikleri paneli de var - ikisi arasında geçiş yaparak kurallar ve Özellikleri düğmeleri. Belirli özellikleri bulmanıza yardımcı olmak için, özellikler panelinde bir arama kutusu bulunur..

Öğenin CSS'sini anında Kurallar panelinden düzenleyebilirsiniz. Bir kuralı devre dışı bırakmak için onay kutularının işaretini kaldırın, bir kuralı değiştirmek için metni tıklayın veya kendi kurallarınızı bölmenin en üstündeki öğeye ekleyin. İşte, ekledim yazı tipi ağırlığı: kalın; CSS kuralı, öğenin metnini kalınlaştırmak.

JavaScript Kazı Kazan

Scratchpad ayrıca Firefox 10 ile bir güncelleme gördü ve şimdi de sözdizimi vurgulama içeriyor. Geçerli sayfada çalıştırmak için JavaScript kodunu yazabilirsiniz.

Bir kez tıkladığınızda, gerçekleştirmek Menü ve Koşmak. Kod geçerli sekmede çalışır.

Web Konsolu

Web Konsolu, kullanımdan kaldırılmış ve Firefox’un gelecekteki bir sürümünde kaldırılacak olan eski Hata Konsolunun yerini alıyor.

Konsolda, ağ isteklerinin, CSS hata mesajlarının, JavaScript hata mesajlarının ve web geliştirici mesajlarının görünürlüğünü değiştirebileceğiniz dört farklı türde mesaj görüntülenir..

Web geliştirici mesajı nedir? Window.console nesnesine basılmış bir mesajdır. Örneğin, biz koşabiliriz window.console.log (“Merhaba Dünya”); Konsoluna 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; 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, seçili olan nesneyi gizlemek istiyorsanız, koşabilirsiniz $ 0.style.display =”none” konsolda.

Konsolu ve yerleşik işlevlerini kullanma hakkında daha fazla bilgi edinmek istiyorsanız, Mozilla'nın Geliştirici Ağı web sitesindeki Web Konsolu sayfasına bakın..

Daha Fazla Araç Alın

Daha Fazla Araç Alın Bu seçenek sizi Mozilla Eklentileri web sitesindeki Web Geliştirici Araç Kutusu eklenti koleksiyonuna götürür. Firebug ve Web Geliştirici Araç Çubuğu dahil, web geliştiricileri için en iyi eklentilerden bazılarını içerir.

Firefox'u birkaç yıldır kullanıyorsanız, DOM Denetçisini hatırlayabilirsiniz. Firefox'un entegre geliştirici araçları o zamandan bu yana çok yol kat etti.