Chrome Geliştirici Araçları veya Firebug ile Web Sitesi Sorunlarını Çözün

Eğer jQuery'mi takip ediyorsanız, Web İnteraktif Yapma: jQuery'e Giriş The Web Interactive Yapma: jQuery'e Giriş jQuery, neredeyse her modern web sitesinin kullandığı bir istemci tarafı komut dosyası kütüphanesidir - web sitelerini etkileşimli yapar. Bu sadece Javascript kütüphanesi değil, fakat en gelişmiş, en çok desteklenen ve en çok kullanılan… öğreticiler jQuery Eğitimi - Başlarken: Temel Bilgiler ve Seçiciler jQuery Eğitimi - Başlarken: Temel Bilgiler ve Seçiciler Geçen hafta, jQuery hakkında ne kadar önemli konuştuğumu öğrendim. herhangi bir modern web geliştirici ve neden harika. Bu hafta, sanırım bir kodla ellerimizi kirletme ve bunun nasıl olduğunu öğrenmenin vakti geldi ... şimdiye dek, bazı kod problemleriyle karşılaştınız ve bunları nasıl düzelteceğinizi bilmiyor olabilirsiniz. İşlevsel olmayan bir kod biti ile karşılaştığımızda, rahatsız edici kod satırını tespit etmek çok zordur - ve hata ayıklama ve geliştirici araçlarının geldiği yer.

Bu yüzden daha karmaşık bir jQuery kodu ile devam etmeden önce, dünyanın en popüler tarayıcısı olan Chrome'da bulunan araçları inceleyeceğimizi düşündüm. Bu araçlar yalnızca Javascript için değil, aynı zamanda herhangi bir AJAX isteğinde hata ayıklamanıza, sitenizin yüklemesi gereken kaynaklara, DOM yapısını ve bir sürü başka şeyi incelemenize yardımcı olabilir..

Firefox'a Aşk Yok?

Bugün özellikle kişisel tercihler dışında Chrome geliştirici araçlarına ve tarayıcıya yerleştirilmiş olmalarına bakacak olmama rağmen, aynı işlevsellik Firefox için Firebug IE'de Firebug Nasıl Kurulur adlı bir eklentide bulunmaktadır. Safari, Chrome ve Opera Firebug'u IE, Safari, Chrome ve Opera’ya Kurma - Arayüz neredeyse aynı, bu yüzden bu kılavuz hala geçerli olmalı.

Hata Ayıklama Araçlarını Başlatma

Bu daha kolay olamazdı. Chrome'da, sadece vurmak CTRL-SHIFT-ı (CMD ALT-I Mac’te) veya herhangi bir yere sağ tıklayıp seçin Öğeyi İncele. Aşağıdakine benzer bir şey görmelisiniz:

Hata ayıklama konsolunu başlatmanın bu iki yönteminde küçük bir fark var. Kısayol tuşu basitçe varsayılan görünümde açılacaktır, Elemanı İncele öğesi DOM ağacını sağ tıkladığınız belirli öğeye odaklayacaktır. Bu da bizi bu araçlardan elde ettiğimiz ilk harika işlevsellik parçasına getiriyor.

Öğeler ve CSS

Elementler sekme iki bölüme ayrılmıştır; Sol tarafta tam DOM ağacı var. Bu, sayfanın kaynak koduna benzer, ancak belirgin şekilde daha kullanışlıdır..

Bir başlangıç ​​için oldu çözümlenen Bir ağaç yapısında, elemanlar daraltılabilir ve genişletilebilir; böylece alt elemanlar, ebeveynler ve kardeşler sadece kaynak kodları okumaktan daha açık bir şekilde incelenebilir. İkincisi, sayfadaki Javascript'ten kaynaklanan dinamik değişiklikleri yansıtır. Örneğin, jQuery'nizin pageLoad'daki belirli öğelere bir sınıf eklemesi gerekiyorsa, bunun DOM ağacına yansıdığını, ancak sayfa kaynağını yansıtmayacağını göreceksiniz..

Ayrıca DOM’u şurada düzenleyebilir, üzerine çift tıklatarak da düzenleyebilirsiniz. Evet, saçma sapan ekran görüntüleri oluşturmak için web sitelerini dolaşmak ve düzenlemek için kullanabilirsiniz, bu nedenle basit deneme için harika.

İşte BBC haberleri anasayfasıyla dalga geçiyorum…

Sağ tarafta, geçerli öğeye uygulanan ve daha yüksek dereceli kurallar tarafından geçersiz kılınmış olanlar da dahil olmak üzere herhangi bir CSS kuralını görüntüleyebilirsiniz (bunlar arasında bir çizgi vardır):

Bunları ayarlayabilir veya ne olacağını görmek için belirli bir kuralı kaldırabilirsiniz..

Açma “hesaplanan stiller” şu anda uygulanmakta olan her CSS kuralının bir özetini gösterecektir. En sağdaki satır numarası ve dosya bağlantısı sizi doğrudan yüklendiği kaynak dosyaya atlayacaktır, ancak bazı durumlarda simge durumuna küçültülmüş bir dosya olabilir (yani her şey bir satırdadır).

Aklında tut Burada yaptığınız değişikliklerin hiçbiri kaydedilmeyecek, bu yüzden sayfayı yenilediğinizde tekrar normale dönecek. CSS ile oynuyorsanız, istediğiniz sonucu aldığınızda tam olarak neleri değiştirdiğinizi not ettiğinizden emin olun..

Hata Konsolu

Bu harika araçların günlük kullanımına göre en önemli ikinci sekme, listedeki son sekme olan hata ve hata ayıklama konsolu. Başlamak için, Javascript hataları burada gösterilecektir. JQuery ile ilk kez başladığınızda, birkaç örneği bulabilirsiniz. “$ tanımsız” veya “jQuery tanımsız” - Genel bir hata, başlıktaki jQuery bağlantısına unuttuğunuz anlamına gelir. Eğer çözemediğiniz bir hata görürseniz, onu bir Google arama kutusuna kopyalayın; aynı problemi yaşayan birçok kişiyi büyük olasılıkla bulabilirsiniz..

Hata ayrıca hatanın ilk oluştuğu tam kod satırına da işaret edecektir; doğrudan bu satıra ve kod bölümüne atlamak için buna tıklayın. Bu, kendi komut dosyalarınızdan birindeyse, sizi doğrudan suçluya saptayabilir - hata yine de daha belirsizse, tamamen okunamayan jQuery kaynak kodunu gösterebilir..

Konsolun bir şeyin doğru çalışmadığını kontrol etmeniz gereken ilk şey olduğu söylenebilir..

Konsolun diğer kullanımı kendi özel hata ayıklama ifadelerinizi yazdırmaktır. Senaryoyu belli bir noktaya ulaştığını kendinize bildirmek gibi bir miktar metin gönderebilirsiniz:

console.log ("Bu bit kodunda ok, şimdi çalışıyorum ...");

Veya bütün nesneleri ve değişkenleri aşağıdaki gibi basit hale getirebilirsiniz:

console.log (myVar);

Şimdi bazı öğeleri seçmek için bazı temel jQuery kullanarak deneyin, sonra nasıl göründüklerini görmek için onları çıktı. Örneğin, seçicilerinizin ne bulduğunu kontrol etmek için kullanabilirsiniz..

Ağ

Geliştirici araç setinde bugün size göstermek istediğim son araç Ağ sekmesi. Bu sekmenin çalışması için, ona odaklanmanız ve sayfayı yenilemeniz gerekir - sonra sayfanın yaptığı, reklam, Javascript, CSS, görseller - her şey için - tüm istekleri yakalar ve size bilgi verir. Bu etkileşimle ilgili olarak:

• dosya adı.
• istek türü (GET veya POST).
• sunucunun geri gönderdiği yanıt kodu (200 Tamam, 304 Değiştirilmedi, vb.).
• Dosya boyutu.
• zamanlama.

Tek bir dosyaya tıkladığınızda, tarayıcınız ile sunucu arasındaki etkileşim hakkında daha ayrıntılı bilgi bulabilirsiniz. Benim için bu, AJAX isteklerinde hata ayıklama yaparken özellikle kullanışlıdır - istekle tam olarak ne tür veri gönderildiğini ve alıcı taraftaki komut dosyası tarafından verilen yanıtın tam çıktısını görebilirsiniz.

özet

Umarım, tomurcuklanan geliştiricilere bazı ek araçlarla silahlandım. Bu yazıyı yararlı bulduysanız, bir payı gerçekten takdir ediyorum, çünkü içimdeki sıcak ve bulanık hissetmemi sağlıyor ve daha çok yazmamı istediğinizi söylüyor. Ayrıca yorum ve geribildirimlerimi de memnuniyetle karşılarım - özellikle, web geliştiricisi olarak başka hangi araçları kullanıyorsunuz? Elinizde bir Firefox eklentisi var mı??