Firefox 11, iki yeni web geliştirici aracı ekledi Firefox’un zaten etkileyici cephaneliği . Eğme özelliği, web sitesi yapılarını 3B olarak görselleştirir, Stil Düzenleyici ise CSS stil sayfalarını anında düzenleyebilir.
Tilt olarak bilinen 3D özelliği, bir web sitesinin DOM'u görselleştirmenin bir yoludur. Mevcut Belge Denetçisi ile entegre olur ve tarayıcınızda zengin 3B grafikleri görüntülemek için WebGL'yi kullanır.
Eğme - 3D Web Sitesi Görselleştirme
Tilt'e Firefox’un Sayfa Denetçisi içinden erişebilirsiniz. Başlamak için, Web Geliştirici menüsünden "İncele" yi seçerek Sayfa Denetçisini açın. Denetçiyi belirli bir öğede başlatmak için geçerli sayfaya sağ tıklayıp "Öğeyi İncele" yi de seçebilirsiniz.
Denetçi araç çubuğundaki "3D" düğmesini tıklayın.
3D modunu etkinleştirdikten sonra sayfanın yapısını göreceksiniz, ancak siz döndürene kadar düz görünecektir.
Modeli sol tıklayarak döndürün, sağ tıklayarak görüntüyü hareket ettirin ve fare tekerleğini kullanarak yakınlaştırıp uzaklaştırın.
Bu görünüm, denetçideki diğer araçlarla entegre edilmiştir. Açık HTML veya Stil panelleriniz varsa, hte sayfasındaki bir öğeyi tıklatıp o öğenin HTML kodunu veya CSS özelliklerini görüntüleyebilirsiniz.
Daha Fazla 3D Özellik
3D görselleştirme özelliği, Tilt uzantısına dayanıyordu, ancak Tilt uzantısının tüm özelliklerine sahip değil. Renkleri özelleştirmek veya hatta görselleştirmeyi bir 3B düzenleme programıyla kullanmak üzere bir 3B model dosyası olarak dışa aktarmak istiyorsanız, Eğimli 3D eklentisi . Sahip olduğunuzda, Web Geliştirici menüsünde yeni bir "Eğme" seçeneği göreceksiniz.
İstendiğinde, Tilt'in eski sürümünü kullanmak için İptal düğmesini tıklayın.
Sayfanın üst kısmında, pencerenin sol tarafında görselleştirmeyi özelleştirmek için kontroller ve dışa aktarma özelliği dahil olmak üzere diğer seçenekleri bulacaksınız.
CSS Stil Düzenleyici
Bir sayfanın CSS stil sayfalarını görüntülemek ve düzenlemek için Web Geliştirici menüsünden Stil Düzenleyici'yi açın.
Stil düzenleyici, geçerli sayfadaki stil sayfalarını listeler. Stil sayfasının adının solundaki göz simgesini tıklayarak bir stil sayfasını açın veya kapatın. Bir stil sayfasını seçip kodu değiştirerek düzenleyin.
Değişiklikler hemen sayfaya yansıtılır. Bir stil sayfasını kapatırsanız, sayfa stil bilgilerini kaybeder. Bir stil sayfasını düzenlerseniz, yazarken düzenlemelerin sayfada göründüğünü görürsünüz.
Stil sayfalarından birinin bir kopyasını bilgisayarınıza kaydedebilir, bilgisayarınızdan mevcut bir stil sayfasını içe aktarabilir veya Stil Editörü penceresinde Kaydet, İçe Aktar veya Yeni bağlantılarla yeni, boş bir stil sayfası ekleyebilirsiniz.
3B görselleştirme özelliği, geçerli sayfadaki değişiklikleri izler ve değişiklik olduğunda bunu bildirir. Stil Düzenleyiciyi 3B denetçisi açık olarak kullandığınızda, değişiklikleriniz hemen 3B görünümde yansıtılacaktır. Bu, Firebug gibi web sayfalarını değiştiren üçüncü taraf uzantılarla da çalışır.