WordPress Web Sitenizi Geliştirmek için Chrome Geliştirici Araçlarını Nasıl Kullanırsınız?

Chrome Geliştirici Araçları (DevTools), Google Chrome için harika bir web yazma ve hata ayıklama araçları setidir. DevTools, web sayfaları oluşturan öğelere erişim sağlar. Düzen ile ilgili sorunları gidermek, CSS'ye bakmak ve değiştirmek, JavaScript kesme noktaları ayarlamak, kodu optimizasyon için incelemek ve çok daha fazlası için DevTools'u kullanabilirsiniz. DevTools ücretsizdir ve Chrome tarayıcınızda yerleşik olarak bulunur. Yani Chrome'unuz varsa, zaten onlara sahipsiniz.

Bu yazıda, araçların ne olduğuna ve WordPress web sitenizi geliştirmek için nasıl kullanılacağına dair bir genel bakış alacağız.

Araçları Açmak

Araçları açmanın birkaç yolu vardır:

1. Chrome menüsünü seçin, Araçlar'ı seçin ve ardından Geliştirici Araçları'nı seçin.
2. Ekrandaki herhangi bir öğeye sağ tıklayın ve Öğeyi İncele'yi seçin (tercih ettiğim yöntem).
3. Ctrl + Shift + I (PC için) | Cmd + Opt + I (Mac için)

DevTools Penceresi

Araçlar penceresi iki panel içerir. Her ikisi de birlikte kullanılabilecek araçlar içerir. İşte araçlara bir göz atın.

İlki 8 grup araç içerir. Araçlar şunları içerir:

• Elementler
• Ağ
• Kaynaklar
• Zaman çizelgesi
• profiller
• Kaynaklar
• Denetimler
• Konsol

İkinci bölüm şunları içerir:

• stiller
• Hesaplanmış
• Olay Dinleyicileri
• DOM (Belge Nesne Modeli) Kesme Noktaları
• Özellikleri

Araçları görüntülemenin birkaç farklı yolu vardır. Yer açmak için pencereleri yeniden boyutlandırabilirsiniz. Ayrıca, bir tarafta araçlar, diğer tarafta web siteniz ile size bölünmüş bir ekran vermek için ekranın sağındaki pencereleri yeniden konumlandırabilirsiniz.

Elementler

Bu panel, sayfanızın HTML öğelerini temsil eden DOM ağacını gösterir ve öğelerin herhangi birini incelemenize veya düzenlemenize olanak tanır. CSS ayarlamalarını gerçek zamanlı olarak görebilirsiniz.

Düğümlere tıklayarak (oklar veya üçgenler gibi görünürler) görmeyi ve gezinmeyi kolaylaştırmak için panellerden herhangi birini açıp daraltabilirsiniz. DOM ağaç görünümü, orijinal HTML yerine ağacın mevcut durumunu gösterir (örneğin, JavaScript tarafından değiştirilmiş olabilir).

Fareyi ağaç görünümünde bir öğenin üzerine getirdiğinizde, web sayfasındaki öğe vurgulanır. Yazı tipi stili, resim boyutu vb. bilgileri size gösterecektir.

Öğelerden birine tıklarsanız, sağdaki pencere CSS'yi gösterecektir. Burada stilleri seçebilir ve yazı tiplerinde, renklerde, boyutlarda, kenar boşluklarında, kenarlıklarda, dolgularda vb. değişiklikler yapabilirsiniz.

Altbilgide kırıntıları göreceksiniz, böylece gerekirse geri dönebilirsiniz. Öğelerden herhangi birini, yalnızca üzerlerine tıklayarak ve değişikliklerinizi yazarak düzenleyebilirsiniz. Enter'a bastığınızda değişikliklerin gerçekleştiğini göreceksiniz.

Örneğin, bu görüntü şu anda 600 piksel genişliğindedir. Genişliği seçip yeni bir değer yazıp enter'a basabilirim.

Görüntü hemen yeni boyuta değişir.

Yazı tipinin stilini değiştirmek için, yazı tipini seçin ve sağdaki stiller penceresinde değiştirmek istediğiniz şeyi seçin.

Hatta sayfanızın düzenini değiştirmek için öğeleri sürükleyip yeni konumlara bırakabilirsiniz.

Sadece div'i sürükleyerek son yorumları son gönderilerin üzerine taşıyorum.

Sağ tıklama size yeni bir dizi özellik sunar. Çeşitli öğe durumlarını görebilir, HTML olarak değiştirebilir, sonları ayarlayabilir, CSS yolunu kopyalayabilir ve çok daha fazlasını yapabilirsiniz. Ayrıca bir düğüme sağ tıklayıp silebilirsiniz. O kadar kolay ki neredeyse korkutucu.

Bu aracı resim boyutlarını bulmak ve kod parçacıklarını incelemek için kullandım.

Ağ

Ağ paneli, web sitenizden hangi kaynakların istendiğini ve indirildiğini gösterir. Gerçek zamanlı olarak grafiklendirilir. Hangi öğelerin indirilmesinin en uzun sürdüğünü görmek, sayfanızı optimize etmek için hangi sorunların düzeltilmesi gerektiği konusunda size fikir verir.

Şelale gibi farklı görünümleri ve grafik türlerini filtreleyebilir ve gösterebilirsiniz. Ağ etkinliğini kaydedebilir ve daha sonra analiz edebilmek için kaydedebilirsiniz.

Kaynakların ayrıntılarını görüntüleyebilirsiniz. Ayrıntılar şunları içerir:

• HTTP istek ve yanıt başlıkları – bu istek URL'sini, HTTP yöntemini, yanıt durum kodlarını görüntüler ve HTTP yanıtı ve istek başlıklarını değerleriyle ve sorgu dizesi parametreleriyle listeler.
• Kaynak önizlemesi – görüntü ve JSON kaynakları için bir önizleme gösterir.
• HTTP yanıtı – bu, kaynağın biçimlendirilmemiş içeriğini gösterir.
• Tanımlama bilgisi adları ve değerleri – bu, kaynağın HTTP istek ve yanıt başlıklarında iletilen tanımlama bilgilerini gösterir ve tanımlama bilgilerini temizler.
• WebSocket mesajları – bu, bir WebSocket bağlantısı üzerinden gönderilen veya alınan mesajları gösterir.
• Kaynak ağı zamanlaması - bu, kaynağın yüklenmesiyle ilgili ağ aşamalarına harcanan zamanın bir grafiğini gösterir.

Şelale görünümü, isteğin başlangıcından öğenin son baytı teslim edilene kadar her öğenin yüklenmesi için geçen süreyi görmenin harika bir yoludur. Hangi öğelerin en çok zaman aldığını görerek, nerede ayarlamalar yapacağınızı daha iyi anlayabilirsiniz.

Gelecekteki analizler için ağ verilerini kaydedebilirsiniz.

Kaynaklar

JavaScript ve yüklenen sayfanın parçası olan komut dosyaları gibi kodunuzu görmek ve hatalarını ayıklamak için kaynaklar panelini kullanabilirsiniz. Duraklatabilir, devam ettirebilir, kodda adım adım ilerleyebilir ve istisnalarda duraklatabilirsiniz. Adım atabilmeniz, adım atabilmeniz, adım atabilmeniz ve kırılma noktalarını değiştirebilmeniz için temel kod yürütme özelliklerini içerir. JavaScript, DOM güncellemeleri ve ağ çağrılarında hata ayıklamak için kesme noktalarını kullanabilirsiniz. Herhangi bir ifadenin doğru veya yanlış olarak dönebileceği koşullu kesme noktaları da ayarlayabilirsiniz. Kesme noktası, koşul karşılanırsa kodu duraklatacaktır.

Küçültülmüş kodun okunmasını kolaylaştıran güzel bir yazdırma özelliği var. Bu ayrıca kesme noktalarınızı nereye yerleştireceğinizi görmeyi kolaylaştırır. Bu, ihtiyacınız olduğu gibi işe yaramazsa, kaynak harita adı verilen JSON tabanlı bir haritalama biçimi kullanabilirsiniz. Kaynak haritalar, bu özelliği yerleşik olarak içeren bir küçültücü tarafından oluşturulur.

Zaman çizelgesi

Zaman Çizelgesi paneli, sayfa yükleme ve kullanım için zamanın nerede harcandığını gösterir. Zaman çizelgesindeki her olayı boyayacak ve çizecektir. JavaScript, hesaplama stilleri ve yeniden boyama gibi kaynakları gösterecektir. Olayları kaydedebilir ve adım adım analiz edebilirsiniz. Üç mod vardır:

• Etkinlikler – türüne göre düzenlenen tüm etkinliklerin listesi. Bu, hangi görevlerin en çok zaman aldığını gösterir.
• Çerçeveler – bu, web sitenizin oluşturma performansının her bir çerçevesinde yapılması gereken işi gösterir. Örneğin, siteniz saniyede 60 kare hızında görüntüleniyorsa, size saniyenin 1/60'ında yapılan işi gösterecektir. Buna komut dosyalarının yüklenmesi, mizanpajın boyanması, olayların ele alınması vb. dahildir. Bunu, sayfa yüklemedeki herhangi bir anormal etkinliği görüntülemek için kullanabilirsiniz.
• Bellek – bu, zaman içindeki bellek kullanımınızı gösterir. Size bellekte tutulan tüm belgeleri, düğümleri ve olay dinleyicilerini gösterir. Bu, bellek sızıntılarına neyin neden olduğunu bulmaya yardımcı olur.

profiller

Burada web sayfalarının ve uygulamaların yürütme süresini ve bellek kullanımını profilleyebilirsiniz. Bu size kaynakların nerede kullanıldığını gösterir. Bu, kodunuzu optimize etmek için iyi bir araçtır.

Üç Profil türü kaydedecektir:

• JavaScript CPU Profili Topla – bu, JavaScript işlevlerinizin yürütme süresini gösterir.
• Yığın Anlık Görüntü Al – bu, JavaScript nesnelerinizin bellek kullanımını ve dağıtımını gösterir.
• Yığın Tahsislerini Kaydet - bu, zaman içindeki bellek sızıntılarını göstermek için nesne tahsislerinizi kaydeder.

Kaynaklar

Kaynakları incelemek için bu paneli kullanabilirsiniz. Size IndexedDB, web SQL veritabanı, uygulama önbellek tanımlama bilgileri, yerel ve oturum depolama ve daha fazlası hakkında bilgi gösterecektir. Yazı tipleri, resimler ve stil sayfaları gibi görsel kaynaklarınızı da inceleyebilirsiniz.

IndexedDB sekmesi, IndexedDB veritabanlarınızı ve nesne depolarınızı incelemenize ve kayıtları görüntülemenize ve silmenize olanak tanır.

SQL komutlarını çalıştırabilir ve sonuçları tablo biçiminde görüntüleyebilirsiniz. Siz komutları yazarken size tablo adları, komutlar ve yan tümceler için ipuçları verecektir.

Tanımlama bilgileri sekmesi, bir HTTP veya JavaScript tarafından oluşturulan tanımlama bilgileri hakkında bilgi gösterir. Bunları tek tek veya gruplar halinde silebilirsiniz.

Chrome, uygulama kaynaklarını önbelleğe alır. Uygulama önbelleği sekmesi, bu kaynakların durumunu görüntülemenizi sağlar. Ayrıca size kaynağın URL'sini, olduğu kaynağın türünü ve boyutunu gösterecektir.

yerel ve oturum depolama paneli, depolama API'si ile oluşturulan yerel ve oturum depolama anahtarı/değer çiftlerini görüntülemenize, oluşturmanıza, silmenize ve düzenlemenize olanak tanır.

Denetimler

Denetim paneli, sayfayı yüklenirken analiz eder ve sayfa yüklemesini optimize etmek için düzeltmeler önerir. Bilgileri iki kategoriye ayıran iki denetimi vardır: Ağ Kullanımı ve Web Sayfası Performansı. Her iki denetimi veya yalnızca istediğinizi çalıştırabilirsiniz. Denetimleri sayfanın mevcut durumunda çalıştırabilir veya sayfayı yeniden yükleyebilir ve yüklendiğinde denetleyebilirsiniz.

Google PageSpeed ​​Insights kadar ayrıntıya girmez, ancak düşük asılı meyveyi düzeltmek için size yeterli bilgi verir. PageSpeed ​​Insights'tan geçtikten sonra sayfam iyi durumdaydı, ancak sitem hakkında Insights'ın vermediği bazı bilgiler verdi.

Konsol

Konsol hata ayıklama için kullanılır. Tanılamaları günlüğe kaydedebilir, komutlar girebilir, JavaScript'i değerlendirebilir, JavaScript profilleri oluşturabilirsiniz, vb. Komut satırı aracılığıyla konsola bilgi yazabilirsiniz. Komut satırını kullanarak DOM'daki öğeleri seçmek ve incelemek, olayları izlemek ve profil oluşturucuyu durdurmak ve başlatmak için işlevleri kullanabilirsiniz.

Cihaz Modu

En sevdiğim özelliklerden biri Cihaz Modu. Buna menüdeki Elements'in solundaki küçük düğme ile erişebilirsiniz. Cihaz Modu, 23 farklı popüler mobil cihaz (Kindle Fire, birkaç iPhone, birkaç Galaksi, dizüstü bilgisayar, vb.) arasından seçim yapmanıza ve web sitenizin o cihazda nasıl göründüğünü ve tepki verdiğini görmenize olanak tanır.

Kendi özel ekran boyutunuzu oluşturmak için ekranı da sürükleyebilirsiniz. İmleç parmak ucunuzu taklit eder, böylece ekran fare ile tıpkı parmağınızla olduğu gibi tepki verir. Ayrıca ayarlar ekranında kendi özel cihazlarınızı da oluşturabilirsiniz.

Ayrıca ağ türünü (3G, 4G, Wi-Fi, vb.) seçebilirsiniz, böylece sitenin farklı ağlar ve hızlar üzerinden nasıl göründüğünü ve tepki verdiğini analiz edebilirsiniz.

Çekmece

Ekranın altında çekmeceyi bulacaksınız. Bu, araç çubuğunun sağ tarafındaki >_ düğmesi ile açılıp kapatılabilir. Çekmece şunları içerir:

• Konsol – konsol komut satırı. Bu, diğer panelleri kullanırken konsolu kullanılabilir hale getirir.
• Ara - herhangi bir kaynak bulun. Büyük/küçük harf yok saymayı ve normal ifadeleri aramayı seçebilirsiniz.
• Öykünme – cihaz modu için araçlar ve ayarlar. İvmeölçer ve coğrafi konum koordinatları gibi özellikleri içerir.
• İşleme – fps metre, birleştirilmiş katmanlı kenarlıklar vb. gibi işleme özelliklerini gösterir. Bunun en iyi yanı, olası darboğazları göstermesidir.

Bazı paneller bu araçlara erişim içermediğinden, bu araçların çekmecede olması yararlıdır.

Son düşünceler

Chrome Geliştirici Araçları (DevTools), web sitenizi geliştirmenize yardımcı olacak harika bir web yazma ve hata ayıklama araçları setidir. Sitenizin düzenini değiştirmek, bellek sızıntılarını gidermek, sayfa yükleme sorunlarını gidermek, web sitenizi hemen hemen her mobil cihazda ve ekran boyutunda görüntülemek ve çok daha fazlası için öğeleri hızlı bir şekilde sürükleyip bırakabilirsiniz. Bu genel bakış, bu araçların ne kadar güçlü olduğunun yüzeyini çiziyor. Bununla ilgili en iyi şey, zaten Google Chrome'da yerleşik olmasıdır, bu nedenle hiçbir şey indirmeniz gerekmez.

senden haber almak isterim Chrome Geliştirici Araçları kullanıyor musunuz? Favori özellikleriniz neler? En çok ne kullanıyorsun? Araçları kullanma konusunda herhangi bir ipucunuz var mı? Yorumlarda bize bundan bahsedin.