ateş böceği Tasarımcılar veya web yöneticileri olsun, web sitelerini programlayan veya optimize edenler için önemli bir araçtır. Böylece programlama veya tasarım hatalarını ortadan kaldırabilir, nasıl çalıştıklarını ve bir web sayfasının yapısının nasıl olduğunu, onu oluşturan tüm öğelerin nasıl olduğunu bilebiliriz.
Firebug eklentisini kuruyoruz
Eklentiyi yüklemek için firebug indirme web sitesine gidiyoruz ve orada indirilecek aracın en son sürümünü arıyoruz.
konsol sekmesi
Konsol ateş böceği Web'in ne yaptığı ve oluşan hataların mesajlarının görüntüleneceği yerdir. Etkileşimdeyken web'in yaptığı işlevlere veya sayfalara yapılan çağrıları, bize işlevleri, geri arama veya web servislerine yapılan çağrıları ve uygulamanın akışını kontrol ederken çalışma zamanında değiş tokuş edilen değerleri gösteren mesajları görebiliriz.
Bazı örneklere bakalım, motores.com.ar sitesine giriyoruz, sağ tıklayıp aktif ediyoruz ateş böceği.
Ayrıca alışveriş sepetine bir ürün eklerken şu parametreleri nasıl gönderdiğini görebiliriz: fonksiyon, ürün miktarı ve ürün kimliği.
Ajax işlevi çağrıldı insertItem cant 1 Id 5850326Sadece kullanıcı olarak giriş yaparsak ekleneceğini görebilsek de, aksi takdirde kayıt olmamızı isteyecektir.
Böylece uygulamanın nasıl çalıştığını ve hangi parametreyi gönderip aldığını ve hangi yanıtları verdiğini ve yanıt süresinin ne olduğunu görebiliriz, örneğin 335 milisaniye süren bir ürün eklemek için.
HTML sekmesi
web'in yapısını görmenizi ve web sayfası kodunu gerçek zamanlı olarak düzenlemenizi sağlar. Örneğin kodu değiştirebiliriz HTML web sitesinin veya css kodunun görüntülenmesi ve bu değişiklikler kalıcı olmadan doğrudan görüntülenmesi. Örneğin, Ebay web sitesine erişirsek, ana veya web içeriği bloğunun rengini değiştirmek için Firebug'u kullanabiliriz.
arka plan: kırmızı yok tekrar kaydırma 0 0;Yazmayı bitirdiğinizde orta blok kırmızıya dönecek, sayfayı güncellersek değişiklikler kaybolacak ve orijinal tasarımına dönecektir.
Google için Ebay logosunu değiştirmek için html kodunu ve css kodunu değiştirmeyi de deneyebiliriz, bu, istediğimiz bir görüntünün başka bir url'si için Ebay logo görüntüsünün url'sini değiştirerek yapılır.
Bu işlevsellik, eksiksiz bir tasarımı değiştirmek için değil, bir düzenleyiciye erişmek zorunda kalmadan küçük testler yapmak ve değişiklikleri görselleştirmek için çalışır.
CSS sekmesi
panel sekmesi CSS Oluşturduğumuz veya analiz ettiğimiz web'in sahip olduğu tüm CSS sınıflarını ve tanımlayıcılarını gösterir. Bu panelden, daha önce HTML panelinin Stiller sekmesinde yaptığımız gibi sınıflarımızı ve css cümlelerimizi değiştirebiliriz.
Komut dosyası sekmesi
Bu panel kod hatalarını ayıklamak içindir JavaScript veya jQuery. Bize bir betiğin yaptığı her şeyi, değişkenlerini, işlevlerini, kesme noktalarıyla hata ayıklamayı, bir betiğin adım adım yürütülmesini, değişken yığınını kontrol etmek için bir ekranı gösterir ve işlevlerin davranışını da görebiliriz.
DOM sekmesi
panel GÜNEŞ veya Belge Nesnesi ModuTüm çeşitli DOM özellikleri ve yöntemleri hakkında bilgi alan kişidir. DOM, bir web'in öğelerinin bir parçasıdır ve programcıların XHTML web sayfalarına erişmesine ve bunları değiştirmesine olanak tanır.
JQuery, DOM'yi verimli bir şekilde işlemek için yöntemler sağlar. Herhangi bir öğenin herhangi bir niteliğine erişebilir veya HTML kodunu bir paragraftan veya bloktan alabiliriz. Buna ek olarak, aşağıdaki gibi yöntemler sağlar. .attr(), .HTML(), Y .val () Daha sonra kullanılmak üzere DOM öğelerinden bilgi alma ve alma işlevi görürler.
Bu jQuery ve DOM örneğinde bir div'in nasıl kontrol edileceğini ve bir metnin nasıl çıkarılacağını görelim:
Jquery ve DOMBloktan metin ayıkla:
Bu bir DOM test metnidir
Etiketler HTML Öğeye css sınıfı veya kimliği ve ardından metin olabilen veya jQuery ve DOM'a izin veren başka bir özellik aracılığıyla erişilir.
Ağ sekmesi
Ağ panelinin amacı, web trafiğini ve her HTTP web isteğinin yükünü ve tüketimini izlemektir, bu rapor, her birinin sayfa tarafından yapılan bir gidiş dönüş isteğini / yanıtı temsil ettiği bir giriş listesinden oluşur.
Ağ paneli penceresi, web yüklenip kullanıldıkça bir istek listesi sunar. Listedeki her öğe, istek tarafından üretilen bilgileri gösterir ve grafiksel bir zaman çizelgesi, tüketilen baytları, yanıt için geçen süreyi, zaman içindeki yükleme aşamalarını temsil eden gösterir. Aşağıda, her istek için görüntülenen bilgilerin bir listesi bulunmaktadır:
- HTTP istek yöntemi
- HTTP yanıt kodu ve açıklaması (200.301.404, vb.)
- Çağrılan dosya adı
- Yanıtın alındığı alan adı
- Bayt cinsinden yanıt boyutu
- Yanıt vermek için geçen milisaniye cinsinden süre.
