WordPress geliştirme için krom geliştirme araçlarını kullanmak
Forumda gördüğüm en yaygın sorulardan biri ve insanlarla bire konuşurken “Nasıl biliyorsun?” Belirli unsurların hangi stil kurallarına sahip olduğunu nasıl anlarsınız? Onun için hangi sınıfa uygulandığını tam olarak nasıl biliyorsunuz? Komut dosyasının düzgün yüklenmediğini nasıl bilebilirsiniz? JavaScript hatası var mı? Ajax’ın çağrısının geri dönüşünü nasıl anlarsınız? Vb. Cevabım bir Chrome geliştiricisi! Tüm büyük tarayıcıların varsayılan bir geliştiricisi vardır, bu da web siteleri hakkında çok fazla bilgi verebilir. Bu makalede Chrome geliştiricileri görüyoruz, ancak fikirler genellikle tüm büyük tarayıcılara uygulanabilir.
Kromunuz açıksa, Açık Görünüm> Geliştirici> Geliştirici Araçları veya Mac’te Command + Shift + C’ye veya geliştirici araçlarını açmak için Windows’ta Control + Shift + C tuşuna basın. Hadi çatlayalım! Her bir HTML/CSS bilgilerinin temel öğelerinin kontrol edilmesi, Element ve Eleman Müfettişi bölümüdür. Bu aracı çalıştırdığınızda başlangıç ekrandır (aşağıda). Soldaki sayfanın HTML yapısını ve sağdaki CSS kurallarını göreceksiniz. Varsayılan olarak, müfettiş açılacaktır. Bu, yukarıdaki çubuğun sol üst kısmında bir büyüteç simgesi kullanılarak açılabilir/kapatılabilir. Müfettiş, imleci sayfadaki öğeye yönlendirmenize ve seçmek için tıklamanıza olanak tanır. Müfettişin solundaki HTML ekranı öğeye atlayacak, CSS kuralları bunun için tüm kuralları gösterecektir.
Tüm kuralları görün – neyi ve hangi seçmenlerin kullanıldığını gören kuralları gör
Hızlı bir stil çizgisi ekleyin
Element Stiline Genel Bakış Elemanı görürken, cihaz penceresinin sağ tarafına bakın. Eleman stilinin genel bir resmini elde etmek için yukarıdaki hesaplanan sekmeye geçin.
Soldaki resim hangi örnekleri göreceğinizi gösterir. Tam görünümde genişletmek için tıklayın. Üstte kutu modelini görsel olarak gösterir ve aşağıda tüm özellikleri görebilirsiniz. Mülk ve değer tam kaskadın sonucudur, yani tüm kurallarınızın sonucunu gösterirler. Her özelliğin yanındaki siyah oku tıklayarak, katkıda bulunan tüm kuralları görebilirsiniz. Belirli bir mülkün nihai değerini bulmak istiyorsanız veya öğenin boyutları hakkında iyi bir fikir edinmek istiyorsanız bu kullanışlı bir ekrandır. Bununla birlikte, ana stil görünüm yerine bu ekrana atıfta bulunmaya devam etmeniz gerekiyorsa, stil kurallarınızın çok karmaşık olduğunu gösterebilir. Bu zor bir kural değil ama bu birkaç projede fark ettiğim bir şey. Varsayılan ekran kurallarını görün ve ekle, size bu öğeye uygulanan tüm kuralları gösteren Styles sekmesidir. Yukarıda gösterilen ikinci seviye gölgelik durumunda, tüm kenarla ilişkili genel bir yazı tipi ağırlığı olduğunu göreceksiniz. -Style H2, 500 ve 34px/40px yazı tipi boyutu ağırlık vererek bu özel öğeye bir stil eklemek için kullanılır. Bu ekran öğesi çok kullanışlıdır, çünkü kurallarınızı ne kadar karmaşık hale getirmenize izin vermenizi sağlar ve aynı zamanda sizi ne kadar iyi hale getirmenize izin verir. Yerde değiştirin ve ekleyin. Her seçmende mülk veya herhangi bir değere tıklayabilir ve hatta her seçmende yeni kurallar yapabilirsiniz. Yukarıdaki boş stil kullanarak element seçmenleri kullanarak, diğerlerine gelecek bir stil hattı bile ekleyebilirsiniz. Bu ekranı sık sık üç şey bulmak için kullanıyorum: stil kurallarım neden işe yaramıyor, hedef öğeleri hedeflemek için hangi seçmenleri kullanmam gerekiyor ve değiştirilmiş CSS ile hangi öğelerin görüleceği.
Element.Style’ın yanında iki simge var. Artı simgesi, yeni stil kuralları, seçmenler ve hepsini de eklemenize olanak tanır. Diğer simgeler, aktif durumu kontrol etmenizi, odaklanmanızı, imleci yönlendirmenizi ve ziyaret etmenizi sağlayan yeni bir parça açar. Bunu kontrol ederek durumu görebilir ve onun için özel kurallar yazabilirsiniz. JavaScript Geliştirici Tool ile çalışmak, JavaScript için çok güçlü özellikler sunar ve bu konudaki fikre biraz benzer. JavaScript’in özellik oluşturmak kolay olmasının nedeni, istemci taraflarının çoğunun, Chrome’un ihtiyaç duyduğu her şeye erişmesidir. Konsol konsolu, JavaScript hata ayıklama ihtiyaçlarının çoğu için başlangıç noktasıdır. Size sadece JavaScript ile ilgili değil, her türlü bilgiyi verebilir. Yukarıdaki ekran görüntüsünde Chrome Geliştirici Konsolu bazı iyi öneriler (mavi) ve iki kırmızı problem görebiliriz. Mesaj, sorunun nerede olduğunu bulmayı kolaylaştıran orijinal dosyanın yanında görüntülenir. JavaScript’inizi birleştirip küçülüyorsanız, bir kaynak haritası yapmayı unutmayın, böylece birçok kodda çarpıcı olmayan bir çizgi yerine gerçek sorunun nerede olduğunu görebilirsiniz. Veya ürünü üretene kadar bir komut dosyası minifikasyonu ile bekleyebilirsiniz.
Mesajın solundaki oku tıklarsanız, sorun hakkında daha fazla bilgi alırsınız. 404 hataları için oku tıklayarak, sorunun aslında global.js olduğunu ancak jquery.js’de göründüğünü görüyoruz. Dosyayı tıklamak sizi Dosyaya götürür, Amazing! Hata Ayıklama Komut Dosyaları Bazen komut dosyalarımız çalışmaz ve nedeni çok net değildir. Hata ayıklama komut dosyaları sorunları bulmamıza ve kolayca çözmemize olanak tanır. Her zamanki yol, kesme noktalarını kullanmaktır. Konsept oldukça basit ama araç bize o kadar çok özellik sunuyor ki, yolunuzu bulmanın oldukça zor. Breakpoint temelde kod yürütmeyi durduracak kasıtlı olarak durdurulmanın bir işaretidir. Çeşitli kontrolleri kullanarak, kırılma noktasına ne olacağını kontrol edebilir (hangi değişken değerler kullanılır, vb.) Ve hazır olduğunuzda yürütmeye devam edebilirsiniz. İlk durağınız, Command + P’yi (Windows kullanıcıları için Control + P) kullanarak dosyaları açabileceğiniz bir kaynak paneldir. Sol taraftaki komut dosyasını açar, sağdaki cihaz akışı kontrol etmek için kullanılabilir.
Soldaki satır numarasını tıklayarak kesme noktasını ayarlayabilirsiniz. Bu sağdaki kesme noktasında görünecektir. Daha sonra, belirtilen noktada duracak komut dosyasını tekrar çalıştırabilirsiniz. JavaScript’imizde Breakpoint Koşullu bir kırılma noktası ekleyebilir ve bu bölümü diğer tüm hata ayıklama büyüsü türleri için kullanabilirsiniz. Google Chrome’un javascript hata ayıklama hakkındaki belgelerini okumanızı şiddetle tavsiye ederim, bu çok yararlı! Ağ Bölümü Ağ bölümü, talep ve yüklenen varlıklar hakkında çok fazla veri sağlar. Bu, talep durumu, tip, boyut, yükleme süresi, yükleme programı vb. Burada öğrenebileceğiniz birçok şey var. Aşağıdakiler için kullanıyorum: Kötü istekler sorununu çöz
Yüklenmenin tıkanıklık zamanı bulmak
Ajax istek verilerini kontrol edin
Geliştirici geliştiricisinin ağ kısımları, her bir madde için talep, talep, statü ve tür yöntemini gösterir. Yöntemleri ve türleri geliştirmek için alışılmadık bir durumdur, ancak durum çok önemlidir. Tabii ki kırmızı işaretlenecek 404 hatasına dikkat etmelisiniz. Durumu tıklayarak, listeyi duruma göre sıralayabilirsiniz. Tekrar tıklarsanız, sıralanması için 404 hatası üste yakın olmalıdır. Ayrıca aktarımı ve olağandışı şeyleri denetlemelisiniz. Yükleme süresi tıkanıklığı
Bu ekranın tüm sağ tarafı, yükleme süresinin yatay çubuk diyagramını gösterir. Doğru görünümü elde etmek için tam ekranda görmeniz gerekebilir. Normalden daha uzun bir kök görürseniz, çok dikkat edin, belki bir şeyler olur! Bekleme süresi, DNS arama, nakliye süresi vb. Gibi birçok bilgi almak için imleci çubuğa yönlendirebilirsiniz. Bu bilgileri kullanarak, yavaş hizmetlerden, hatta kendi web sitenizdeki yavaş kodlardan kurtulabilirsiniz. Bu Ajax isteğini kontrol etmek, geliştiricinin en sevdiğim kısmıdır, Ajax ile çalışmasını çok daha kolay hale getirir. Ajax isteği Ağ sekmesinde görüntülenir, yalnızca Ajax isteklerini görüntülemek için yukarıdaki XHR filtresini tıklayabilirsiniz. Bu sürekli olarak görüntülenecektir. Sayfayı yükler ve AJAX aracılığıyla bir şey yaparsanız, istek doğrudan eklenir. Başlığı, önizleme, yanıt, çerez ve zaman ayarını görüntülemek için isteği tıklayabilirsiniz. Zamanımın çoğunu yanıt ve başlıkta geçirdim. Bir örneğe bakalım. Dustin Curtis web sitesini yükleyin – oldukça iyi okuma – ve XHR isteğine bakın. Bunun gibi bir şey göreceksiniz:XHR Kudos isteği, SVBtle ağındaki makaleler için verebileceğiniz bir şeydir. Bu talebin bu sayfada yayınlanacak kudosları çektiği açıktır. İlk makaleyi içeriyorsanız, makalenin yanıtta görüntülenen kudos sayısına sahip olduğunu göreceksiniz. Şimdi, geliştirici pencerenizin açık kalmasına izin verin ve imleci kudos tesisine yönlendirin. Kudos verildikten sonra yeni bir Ajax isteği göreceksiniz. Bu istek gerçek değeri yeni döndürdü, bu JavaScript’i Kudos’un başarıyla kabul edildiğini gösterebilir. Şimdi, dikkatinizi başlığa çevirin. İstekle birlikte gönderilen verileri gösteren Form Veri bölümünü görebilirsiniz. Bu bilgiler, yanıtla birlikte, Ajax çağrı probleminizi yankılar, uyarılar, kayıt konsolları ve tüm bu kötü şeyler kullanmadan çözmek için ihtiyacınız olan tüm verileri verir. Duyarlılık Testi Duyarlılık test etmeden hangi geliştirici cihazlarının tamamlanacağı? Chrome, bunu idare etmek için en iyi arayüzlerden birine sahiptir. Görmek:
WPMU dev etkin ve yukarıdaki iPhone 5 kontrolü tüm harikaların gerçekleşmesini sağlar. İPhone 5 veya Google Nexus S gibi belirli popüler cihazları seçebilir veya özel boyutlar ayarlayabilirsiniz. Harika olan şey, Chrome’un kullanıcı aracısını sizin için de tahrif etmesidir, bu nedenle sadece aynı sayfayı daha ince yapmak yerine, web sitesini belirtilen cihaz tarafından gerçekten yayınlanan düşünmeyi sağlar. Sahtekarlık yapmak için yenilemeniz gerektiğini unutmayın. Ağ bağlantınızı otomatik olarak sınırlamayı da seçebilirsiniz. Bu, ağ hızının iyi olmadığı bir durumda test edilmesine yardımcı olur – sitenizi 50KB/s GPRS bağlantısında ne kadar can sıkıcı kullandığını görebilirsiniz. Soldaki küçük adım simgesi, sorgu arasında hızlı bir şekilde geçebilmeniz için belirttiğiniz medya kuyruğunu gösteren menüyü açacaktır. Bence bu oldukça şaşırtıcı! Bu sayfa denetimi, sadece gözlerimin önünde gizlenmiş olduğu için çok geç gittiğim bir özelliktir. Hiçbir şey göstermez ve site denetimini çalıştırma seçeneği, özellikle geniş bir ekranda çok görünür değildir. Altta bir göz atın ve yeniden yükleme sayfalarıyla site denetimini çalıştırın. Kendi kişisel asistanınıza sahip olmak gibi! Hızdan kullanılmayan CSS kurallarına kadar birçok şeyi analiz eder ve size yapacak birçok şey verir.
Geliştirici aracımın denetim sayfası, tüm web siteleri veya yalnızca bir eklenti olsun, yeni bir ürün yaptığımda bu aracı kullanıyor. Ne zaman dikkatsiz olduğumu ya da bir şeyi unuttum bana bilgi verdi. Sonuç Chrome geliştiricileri çok iyidir ve web sitenizi daha iyi hale getirmek için çok fazla bilgi sunar. Bu aynı zamanda zayıf yönlerinden biri – ilk bakışta hemen kayboldunuz. Bu aracı tanımak geliştirme için büyük bir varlıktır ve öğrenmek için zaman ayıracağınızdan emin olabilirsiniz. Daha fazla bahsettiğim özelliklere ek olarak etrafa bakın. Daha fazlasına ihtiyacınız olduğunu düşünüyorsanız, daha fazlasını ekleyen Chrome uzantısını bulabileceğiniz uzatma galerisini ziyaret edin. Safari veya Firefox gibi farklı bir tarayıcı kullanıyorsanız, kendi geliştirici araçları da var. Çoğu aynı özellikleri farklı kullanıcı arayüzleri aracılığıyla sunar. Sunulan uzatma miktarı nedeniyle kişisel olarak Chrome veya Firefox’u tercih ediyorum. Chrome geliştiricisi kullanıyor musunuz? Bize aşağıdaki yorumlarda anlatın. Etiket: Tarayıcı kodlamak geliştirici
