Firefox'un Web Geliştirici Araçlarını Web Sitesi Yapılarını 3B Olarak Görüntülemek İçin Kullanma

Firefox 11, Firefox'un etkileyici cephaneliğine iki yeni web geliştirici aracı ekledi. Eğim özelliği web sitesi yapılarını 3B olarak görselleştirir; Stil Düzenleyicisi anında CSS stil sayfalarını düzenleyebilir.

Eğim olarak bilinen 3B özelliği, bir web sitesinin DOM'sini görselleştirmenin bir yoludur. Mevcut Belge Denetçisi ile bütünleşir ve tarayıcınızda zengin 3D grafikler görüntülemek için WebGL'yi kullanır.

Tilt - 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 “Denetle” seçeneğini seçerek Sayfa Denetçisini açın. Müfettişi belirli bir öğede başlatmak için mevcut sayfaya sağ tıklayıp “Elemanı İncele” yi de seçebilirsiniz..

Müfettiş araç çubuğundaki “3D” düğmesine tıklayın.

3B modunu etkinleştirdikten sonra sayfanın yapısını göreceksiniz, ancak döndürene kadar düz görünecek.

Modeli sol tıklatarak döndürün, resmi sağ tıklatarak hareket ettirin ve fare tekerini kullanarak yakınlaştırıp uzaklaştırın.

Bu görünüm denetçideki diğer araçlarla entegredir. HTML veya Stil panelleri açıksa, o öğenin HTML kodunu veya CSS özelliklerini görüntülemek için hte sayfasındaki bir öğeye tıklayabilirsiniz..

Diğer 3D Özellikler

3B 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 görselleştirmeyi 3B düzenleme programı ile kullanmak için 3B model dosyası olarak dışa aktarmak istiyorsanız, Tilt 3B eklentisini yüklemeniz gerekir. Sahip olduğunuzda, Web Geliştirici menüsünde yeni bir "Eğim" seçeneği alırsınız.

İstendiğinde eski Tilt sürümünü kullanmak için İptal düğmesine tıklayın..

Pencerenin sol tarafındaki görselleştirmeyi ve dışa aktarma özelliği de dahil olmak üzere diğer seçenekleri sayfanın üstünde özelleştirmek için kontroller bulacaksınız.

CSS Stil Düzenleyicisi

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ıklatarak stil sayfasını açın veya kapatın. Stil sayfasını seçip kodu değiştirerek düzenleme.

Değişiklikler hemen sayfaya yansır. Bir stil sayfasını devre dışı bırakırsanız, sayfa stil bilgisini kaybeder. Stil sayfasını düzenlerseniz, siz yazarken düzenlemelerin sayfada göründüğünü görürsünüz..

Stil sayfalarından birinin kopyasını bilgisayarınıza kaydedebilir, varolan bir stil sayfasını bilgisayarınızdan içe aktarabilir veya Stil Düzenleyici penceresindeki 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şiklikler olduğunda fark eder. Stil Düzenleyiciyi 3B denetçisi açıkken kullandığınızda, değişiklikleriniz hemen 3B görünümünde yansıtılır. Bu, Firebug gibi web sayfalarını değiştiren üçüncü taraf uzantılarıyla da çalışır.