Chrome Geliştirici Araçları veya Firebug ile Web Sitesi Sorunlarını Anlama

İlan

Eğer benim jQuery Web'i Etkileşimli Hale Getirme: jQuery'ye GirişjQuery, neredeyse her modern web sitesinin kullandığı bir istemci tarafı komut dosyası kitaplığıdır - web sitelerini etkileşimli hale getirir. Tek Javascript kütüphanesi değil, ancak en gelişmiş, en desteklenen ve en çok kullanılan ... Daha fazla oku öğreticiler jQuery Eğitimi - Başlarken: Temel Bilgiler ve SeçicilerGeçen hafta, jQuery'nin herhangi bir modern web geliştiricisi için ne kadar önemli olduğunu ve neden harika olduğunu anlattım. Bu hafta, sanırım ellerimizi bir kodla kirletip nasıl öğrendiğimizi ... Daha fazla oku şimdiye kadar, bazı kod sorunlarıyla zaten karşılaşmış olabilirsiniz ve bunları nasıl çözeceğinizi bilmiyor olabilirsiniz. İşlevsel olmayan bir kod parçasıyla karşılaştığınızda, rahatsız edici kod satırını belirlemek çok zordur - hata ayıklama ve geliştirici araçlarının devreye girdiği yer burasıdır.

Daha karmaşık bir jQuery koduyla devam etmeden önce dünyanın en popüler tarayıcısı 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, sitenizin yüklemesi için gereken kaynaklarda, DOM yapısında ve diğer birçok öğede hata ayıklamanıza yardımcı olabilir.

Firefox'a Aşk Yok mu?

Bugün kişisel geliştirici dışında Chrome geliştirici araçlarına özellikle değineceğim ve tarayıcıda yerleşik oldukları gerçeği, aynı işlev Firefox için bir eklentide mevcuttur aranan kundakçı Firebug'u IE, Safari, Chrome ve Opera'ya Yükleme Daha fazla oku - arayüz neredeyse aynı olduğundan, bu kılavuz hala geçerli olmalıdır.

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

Bu daha kolay olamazdı. Chrome'da, CTRL-SHIFT-I(CMD ALT-I Mac'te) veya herhangi bir yere sağ tıklayın ve Elemanı İnceleyin. Aşağıdakine benzer bir şey görmelisiniz:

Hata ayıklama konsolunu başlatmanın bu iki yönteminde küçük bir fark vardır. Kısayol tuşu, varsayılan bir görünümde açarken, Öğeyi Denetle DOM ağacını sağ tıklattığınız öğeye odaklar. Bu da bizi bu araçlardan aldığımız ilk harika işlevsellik üzerine getiriyor.

Öğeler ve CSS

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

Başlangıç ​​olarak, çözümlü Böylece, elemanlar daraltılabilir ve genişletilebilir, böylece alt öğeleri, ebeveynleri ve kardeşleri sadece kaynak kodunu okumaktan daha açık bir şekilde inceleyebilirsiniz. İkinci olarak, Javascript'ten kaynaklanan sayfadaki 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ğına yansımadığını görürsünüz.

DOM'u orada çift tıklayarak da düzenleyebilirsiniz. Evet, aptal ekran görüntüleri yapmak için web sitelerini oynamak ve düzenlemek için bunu kullanabilirsiniz, bu nedenle basit deneme için harikadır.

İşte BBC haber ana sayfasıyla uğraşıyorum ...

Sağ tarafta, daha üst düzey kurallar tarafından geçersiz kılınmış olanlar da dahil olmak üzere geçerli öğeye uygulanan tüm CSS kuralları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ın işaretini kaldırabilirsiniz.

"Hesaplanan stiller" in kaldırılması, uygulanmakta olan her CSS kuralının bir özetini gösterir. En sağdaki satır numarası ve dosya bağlantısı sizi doğrudan yüklendiği kaynak dosyasına atlayacaktır, ancak bazı durumlarda simge durumuna küçültülmüş bir dosya olabilir (bu nedenle her şey tek bir satırdadır).

Unutmayın ki burada yaptığınız değişikliklerin hiçbiri kaydedilmeyecek, böylece sayfayı bir sonraki yenilemenizde normale dönecektir. CSS ile oynuyorsanız, istediğiniz sonucu aldığınızda neyi değiştirdiğinizi tam olarak not ettiğinizden emin olun.

Hata Konsolu

Bu harika araçları günlük kullanımımla ilgili ikinci en önemli sekme, listedeki son sekme olan hata ve hata ayıklama konsolu. Başlangıç ​​olarak, tüm Javascript hataları burada gösterilecektir. JQuery ile ilk başladığınızda, “$ Undefined” veya “JQuery tanımsız” - başlıktaki jQuery bağlantısını unuttuğunuz anlamına gelen yaygın bir hata. Şifresini çözemediğiniz bir hata görürseniz, bunu bir Google arama kutusuna kopyalamanız yeterlidir ve muhtemelen aynı sorunu yaşayan diğer birçok kişiyi bulacaksınız.

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 birinde bulunuyorsa, genellikle sizi doğrudan suçluya yönlendirebilir - hata daha belirsizse, tamamen okunamayan jQuery kaynak kodunu gösterebilir.

Söylemek yeterli, konsol, bir şeyin doğru çalışmadığını kontrol etmeniz gereken ilk şey, çünkü muhtemelen bir hata yazdırdı.

Konsolun diğer kullanımı, kendi özel hata ayıklama ifadelerinizin çıktısını almaktır. Betiğin belirli bir noktaya ulaştığını bildirmek gibi biraz metin gönderebilirsiniz:

console.log ("Tamam, şimdi yapmaya çalışıyorum kodunda bu bit var ...");

Veya tüm nesneleri ve değişkenleri şu kadar basit çıktılar:

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 bunu kullanabilirsiniz.

Ağ

Bugün size göstermek istediğim geliştirici araç setindeki son araç Ağ sekmesi. Bu sekmenin çalışması için, ona odaklanmanız ve sayfayı yenilemeniz gerekir; ardından sayfanın istediği istekleri alır reklam için, Javascript, CSS, resimler - her şey - yapar ve size bu etkileşim hakkında bilgi dökümü verir, dahil olmak üzere:

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

Tek bir dosyayı tıklatmak, tarayıcınız ve sunucu arasındaki etkileşim hakkında daha da ayrıntılı bilgiler getirir. Benim için, bu özellikle AJAX isteklerinde hata ayıklarken yararlıdır - tam olarak ne tür verilerin olduğunu görebilirsiniz isteği ve alıcı sunucu tarafı komut dosyası tarafından verilen yanıtın tam çıktısını gönderdi.

özet

Umarım tomurcuklanan geliştiricileri bazı ek araçlarla silahlandırmış olurum. Bu gönderiyi yararlı bulduysanız, bir payı gerçekten takdir ediyorum, çünkü içimdeki tüm sıcak ve bulanık hissettiriyor ve bana daha fazla yazmamı istediğinizi söylüyor. Ayrıca yorumları ve geri bildirimleri de memnuniyetle karşılıyorum - özellikle, web geliştiricisi olarak başka hangi araçları kullanıyorsunuz? Emrinizde bir cep telefonu Firefox eklentisi var mı?