Chrome Geliştirici Araçları Rehberi

Chrome geliştirici araçları rehberi ile e ticaret ve web sitesi arama motoru optimizasyonu için çok önemli olan site hızı faktörünü ileri seviyeye taşımaya çalışacağız. Seo performansınızı ölçümlemeniz ve değerlendirmeniz için tüm detaylara dikkat etmeniz gerekir.

Kullanılmayan javascript ve css dosyalarını görebilmek haliyle tüm html,css gibi etiketlerin varlık sebebini anlayabilmek için gerekli araçlar ve bunları daha iyi nasıl kullanabiliriz birlikte bakalım.

Chrome Geliştirici Aracı Nedir?

Web sitelerinin içeriğini ve kaynaklarını anlamamızı sağlar böylelikle html, css, javascript ve site assets(varlıklar) incelememizi ve optimizasyonu yapabilmemiz için içerisinde araçlar yer alır. En önemli özelliği yapılan değişiklikleri canlı olarak görebiliriz.

Chrome Geliştirici Araçları Nasıl Açılır?

Farklı yöntemler ile açabiliriz inceleyelim.

• Ctrl + Shift + I tuş kombinasyonunu kullanabiliriz.
• Chrome menüsünün sağ üst kısmında bulunan 3 noktaya ardından diğer araçlar kısmına ve en son geliştirici araçlarına tıklayabiliriz.
• f12 tuşuna basabiliriz.
• Ekranda boş bir yere sağ tık yapıp ardından incele diyerek açabiliriz.

Sayfalar ve Stiller Nasıl İncelenir

Devtools sayesinde Html, css, javascript hatalarını görebilmeyi ve hata ayıklaması, sorunları çözmeye ve performansı artırmayı sağlar. Yazılı stil kodları üzerinde kontrol kutularını göreceksiniz, bu kontrol kutularını işaretsiz hale getirerek canlı olarak etkilerini görebilirsiniz. Bu kodun devre dışı kalmasını sağlar böylelikle tüm değerleri değiştirip tasarım anlamında daha iyiye ulaşabilirsiniz.

Yükleme ve Çalışma Zamanı Performansı

Performansımızı ölçelim ve ardından hemen ne tür geliştirmeler yaparak iyileştirmeler yapacağımıza karar verelim.

Sitenizi Denetleyin

Sitenizin yük performansını test etmelisiniz. Metin sıkıştırmayı etkinleştirerek işe başlayabilirsiniz. Kontrolünü sağlamak için F12 tuşuna basarak chrome geliştirici araçlarını açın. Üst menüdeki tablar arasında audits(denetimler) tıklayın ardından bir denetim başlatın ve sonuçları görün.

Öğe ve İkon Özelliklerini Seçmek

Öğe seçim aracı: Özel olarak bir öğenin özelliklerini görebilmeyi sağlar. Aracı seçerek öğeye tıklamanız yeterli.

Görüntüleme Değiştirme Aracı: Farklı boyutlarda ki ekranlarda web sitesinin görünümünü inceleyebiliriz. Ctrl + Shift + M tuş kombinasyonunu kullanarak ulaşabilirsiniz. Bir web sitesinin responsive yani ekrana göre uyarlanır olup olmadıığını anlamak için kullanabilirsiniz.

Chrome Geliştirici Araçları Talimatlar

Chrome tarayıcımızda geliştirici araçlarını tıkladıktan sonra sağ üst köşesinde bulunan 3 noktaya tıklayıp daha fazla araç more tools diyelim. Ayarlar kısmına taşınmış ise ayarlar simgesine tıklandıktan sonra preferences (tercihler) ardından debugger (hata ayıklayıcı ) kısmında disable javascript diyebiliriz. Bu şekilde sadece css kodlarına hakimm olarak bir çalışma yapabiliriz.

• Görsel anlamda ok işaretleri ile kodların geniş hallerini görebiliriz.
• Kod üzerine gelip çift tıklayarak kod üzerinde değişiklikler yaparak canlı değerleri görebilirsiniz.
• Computed: Bu kısım sayfanızda kullanılan tüm css kodlarını gösterir.

Geliştirici Araçlarında Javascript Dosyalarının Yolu

Sources(Kaynaklar) panelini açalım. Panelde resim dosyası gibi bir çok css, js bulabiliriz. Javascript yolunu görebiliriz.

Yapılan Değişiklikleri Görüntüleyin

Herhangi bir stil parçasının kontrol kutusunu kaldırarak stil bölümünde yaptığınız değişikliklerin yansıdığı changed bölümünü deneyebilirsiniz.

Değişikliklerle alakalı 2.kısmı genişleterek detaylı bilgi edinin.

Chrome Geliştirici Araçları Kullanarak Site Optimize Etme

Resim, css, javascript ve benzeri dosyaları optimize ederek sitemizi hızlandırabiliriz.

Resimleri Optimize Etme

Resimleri optimize edebilmek için online siteler mevcut. Bu siteleri kullanarak optimize ettiğiniz resimler site açılış hızınızı önemli derecede artırır.

Performans panelini kullanarak test yapın ardından lighthouse içerisinde raporunuzu inceleyerek gerekli adımları yerine getirin.

Ağ sekmesi: Sayfanın http trafiğini görmenizi sağlar.

Denetimler sekmesi: Sayfa yüklenirken analiz edebilmenizi sağlar.

Konsol sekmesi: Kod yazım ve benzeri hataları görmenizi sağlar.

Source(Kaynaklar): Javascript kullanılmayan kod bloklarını ve hatalarını görmemizi sağlar.

Kaynaklar: Yerel olarak yapılan değişiklikleri görebilmemizi sağlar.

Chrome geliştirici araçları ekstra herhangi bir araç kullanımına gerek kalmadan web sitenizde bir çok geliştirme imkanı sunar.

Bilgisayıyorum sizlere çok daha iyi bilgi sunmak için sizlerin desteğine ihtiyaç duyuyor. Aklınıza takılan soruları lütfen yorum kısmına ekleyin.