Chrome Geliştirici Araçları Hakkında Detaylı Rehber

Chrome geliştirici araçları ile SEO performansınızı artırmanız ölçümlemede ve değerlendirmede kullanabileceğiniz araçlardan biridir. Sayfamız içerisinde kullanılmayan JS dosyalarını veya CSS dosyalarını, kullanılan başlıkların hangi etiket olduğunu ve site performansımızı görmemiz için Chrome Geliştirici Araçlarından faydalanabilirsiniz.

Chrome Geliştirici Aracı Nedir?

Chrome’un Geliştirici Aracı web sitelerinin sayfaların içeriğini /kaynaklarını incelemenizi sağlar. Yazılım geliştiricileri için büyük önem sağlamaktadır. HTML, CSS ve JavaScript kodlarını inceleyebilir ayrıca sayfaların yüklenen asset’lerini ve bu asset’lerin yüklenme sürelerini görebiliriz. Chrome Geliştiricisi web sitesi kodlarının düzenleyebilmemizi ve canlı olarak yaptığımız değişiklikleri görebilmemizi sağlar.

Chrome Geliştirici Aracı Nasıl Açılır?

4 farklı yöntem ile geliştirici araçlarını açabilirsiniz. Bunlar;

1. Tarayıcı Seçenekleri-> Daha Fazla Araç-> Geliştirici Araçları (Menu-> More Tools-> Developer Tools)
2. CTRL + SHIFT + I tuş kombinasyonu kullanarak macOS için: ⌘ + ⌥ + I
3. F12 ‘e basarak
4. Bağlam menüsü ile: Web sayfasında Sağ tıkladıktan sonra (Mac için Ctrl-click), açılan menüden Inspect Element (İncele) seçeneğini seçin.

Chrome Geliştirici Aracında Sayfalar ve Stiller Nasıl İncelenir ?

Chrome DevTools, Google Chrome içerisinde bulunan web geliştirici aracıdır. DevTools, sayfaları düzenlemeye Css de hataları ayıklamaya değişiklik yapmaya ve düzenlemeye , JavaScript hatalarını ayıklamaya  sorunları çözmemize ve Performans analizine yardımcı olur.

Bir Stili Canlı Düzenleme

Yazılı kodların üstüne gelindiğinde kutucuklar çıkar ve bu kutucuklardaki tiki kaldırırsak o kodun devre dışı kalmasını sağlarız ve site üzerindeki etkisini görebiliriz.

Yükleme ve Çalışma Zamanı Performansını İyileştirmenin Yolları

Başarılı işlerimizi hemen incelemek ister misin?

1. Adım: Siteyi denetleyin

Sitenin yük performansını iyileştirmek istiyorsanız önce denetim yapmalısınız. Böylece yaptığınız değişikliklerin etkisini görebilirsiniz.

Metin sıkıştırmayı etkinleştirmek

Metin sıkıştırmayı etkinleştirmek sayfanın performansını iyileştirmek için çok önemlidir.

Bir kaynağın HTTP başlıklarını inceleyerek de sıkıştırmayı kontrol edebilirsiniz:

1. 1. Click Denetimler
   2. Bir denetim gerçekleştir’itıklayın.
   3. Ayarları eskisi gibi bırakın.

4. Denetimi çalıştır’ı tıklayın .

Metin sıkıştırmayı etkinleştirdikten sonra genel performans puanınız artmış olmalı, yani siteniz daha hızlı hale gelmiştir.

İkonlar ve Görevleri

Öge Seçim Aracı: Web sitesi üzerindeki bir ögenin özelliklerini görüntülemek için kullanılır. Aracı seçip özelliklerini görmek istediğiniz ögeye tıklayınız.

Görüntüleme Değiştirme Aracı: Bir web sitesinin farklı cihazlarda ve farklı ekran boyutlarında nasıl göründüğünü gösteren araçtır.

Bir web sitesinin responsive yani ekrana göre uyarlanabilir olup olmadığını anlayabilirsiniz. Kısayol tuş kombinasyonu ise Ctrl + Shift + M dir.

Chrome Tarayıcıları İçin Tam ve Hızlı Talimatlar

JavaScript Nasıl Devre Dışı Bırakılır?

Chrome Geliştirici ayarlarını açtıktan sonra geliştirici araçlarının sağ üst köşesindeki ⋮ düğmesine tıklayınız ve açılan pencerede More Tools seçeneğinden Settings seçeneğine tıklamamız gerekmektedir.

Ardından ayarlar penceresini aşağıya kaydırarak Debugger alt başlığı altında Disable JavaScript’i ‘devre dışı bırakmak’ butonunu görüyoruz ve onay kutusuna tıklamalıyız.

• Ok işaretlerine tıklayarak → kodun uzun hallerini görebiliriz.
• Stiller bölmesinde değiştirmek istediğimiz kodu bulup üzerine çift tıklayın istediğiniz değeri girin ve canlı olarak değişimi görebilirsiniz. Bu değişiklikler kalıcı değildir, sayfayı yeniden yüklediğinizde kaybolur.
• Computed: Bu sekme size sayfanın tüm CSS kodlarını gösterir düzenlemenize imkân tanır.

Chrome Geliştirici Araçlarında JavaScript Dosyalarının Yolunu Nasıl Bulabiliriz?

• İlk yapmamız gereken Chrome Geliştirici Aracını açmak Ctrl + Shıft + I kombinasyonu ile.
• Sources (kaynaklar paneli) ne tıklayalım.
• Page panelinde site ile ilgili her şey resim kod gibi bulabiliriz. Değişiklik yapmak istediğiniz kısmı seçip çift tıklamanız yeterlidir.
• Sağ kısma değişikli yapabileceğiniz Panel açılacaktır JavaScript kodlarını artık görebiliyorsunuz.
• İstediğiniz değişikliği uygulayabilirsiniz. JavaScript dosya yolunu da burada görebilirsiniz.

Yerel Değişiklikleri Görüntüleyin

Sayfamızda yaptığınız düzenlemelerin tamamını görmek için:

Gelen Stiller bölümünde değiştirilmiş (changed) olan dosyaya tıklayın. Böylece DevTools kaynak paneline gidersiniz.

Dosyaya sağ tıklayın ve ardından Yer Değişikliklerini seçin.

Yapılan değişiklikleri incelemek için:

Değişiklerde öncesi ve sonrası görüntülemek için ikinci düzey ögeleri genişletin. Pembe arka plana sahip çizgi kaldırılmayı belirtir. Yeşil arka plana sahip çizgi ise eklemeyi belirtir.

Chrome Geliştirici Araçlarında Site Hızını Nasıl Optimize Edersiniz ?

Resimleri Yeniden Boyutlandırın

Görüntülerin boyutlarını azaltmak görüntülerin yüklenme sürelerinde düşüş meydana getirir bu da resimlerin site üzerinde daha hızlı yüklenip açılmalarını sağlar.

Değiştir const dir = ‘big’ile const dir = ‘small’. Bu dizin, yeniden boyutlandırılan aynı görüntülerin kopyalarını içerir.

Daha az ana iş parçacığı çalışması yapın.
Ana iş parçacığı, tarayıcının HTML, CSS ve JavaScript’i ayrıştırma ve çalıştırma gibi iş çoğunluğunun yapıldığı yerdir. Ana iş parçacığının ne yaptığını analiz ederek gereksiz işleri ertelemek veya kaldırmak için Performans Paneli kullanılır.

• Click Performans sekmesini.
• Çekim Ayarları‘na tıklayın.
• Set Ağı için 3G’yi Yavaş ve CPU için 6x yavaşlama.  Mobil cihazlar tipik olarak dizüstü veya masaüstü bilgisayarlardan daha fazla donanım kısıtlamasına sahiptir. Bu nedenle bu ayarlar sayfanın daha az güçlü bir cihaz kullanıyormuşsunuz gibi yüklenmesini sağlar.
• Yeniden Yükle‘ye tıklayın . DevTools sayfayı yeniden yükler ve ardından sayfayı yüklemek için yapması gereken her şeyin bir görselleştirmesini oluşturur.

Hata Ayıklama

debug(getData);

Belirtilen işlev kod yazıldığında çağrıldığında Hata ayıklayıcı açılır ve kod ile ilerlemeye hata ayıklamaya izin verir.

Ağ Sekmesi: Hem yüklenirken hem de sonrasında sayfanın HTTP trafiğini izlemenize olanak tanıyan yerleşik bir proxy algılayıcısıdır.

Denetimler Sekmesi: Sayfayı yüklenirken analiz etmemizi sağlar, sayfa yüklenme süresini kısaltmak için öneriler ve optimizasyonlar sunar.

Konsol Sekmesi: Sayfanın kod hatalarını algılar ve çalıştırmak için kod yazıp yapılışını görmemize yarar.

Source Kaynaklar Paneli: JavaScript hatalarını ayıklamaya ve kullanılmayan JavaScriptleri bulmaya yarar.

Kaynaklar Paneli: Sayfamızda yerel olarak yapılan değişiklikleri görmemizi sağlar.

Network Ağ Paneli: Kaynakların beklendiği gibi indirildiğini veya yüklendiğin görmemizi sağlar. Kaynağın HTTP üst bilgileri içeriği boyutu gibi özelliklerini gösterir.

Bellek Paneli: Bellek kullanımını görmemize ve sızıntıları izlemeye yarar.

Chrome geliştirici araçları hiçbir editör kullanmadan bir web sitesinin yapı taşlarını inceleyebildiğimiz bir araçtır. Sizlerin de ücretli ya da ücretsiz analiz yaptığınız araçlar var mı? Eğer varsa yorum olarak bizlerle paylaşabilirsiniz.