Sayfa kaynaklarını görüntüleyin

Bu kılavuzda, bir web sayfasının kaynaklarını görüntülemek için Chrome Geliştirici Araçları'nı nasıl kullanacağınız açıklanmaktadır. Kaynaklar, bir sayfanın doğru şekilde görüntülenmesi için ihtiyaç duyduğu dosyalardır. Kaynaklara örnek olarak CSS, JavaScript ve HTML dosyalarının yanı sıra resimler verilebilir.

Bu kılavuzda, web geliştirme ve Chrome Geliştirici Araçları'nın temel özelliklerine aşina olduğunuz varsayılmaktadır.

Açık kaynaklar

İncelemek istediğiniz kaynağın adını biliyorsanız Komut Menüsü, kaynağı hızlı bir şekilde açmanızı sağlar.

  1. Ctrl+P veya Komut+P (Mac) tuşlarına basın. Dosya Aç iletişim kutusu açılır.

    Dosya açma iletişim kutusu

    Şekil 1. Dosya Aç iletişim kutusu

  2. Açılır menüden dosyayı seçin veya dosya adını yazmaya başlayın ve otomatik tamamlama kutusunda doğru dosya vurgulandığında Enter tuşuna basın.

    Dosya açma iletişim kutusuna dosya adı yazma

    Şekil 2. Dosya Aç iletişim kutusuna dosya adı yazma

Ağ panelinde kaynakları açma

Bir kaynağın ayrıntılarını inceleme bölümüne bakın.

Ağ panelinde bir kaynağı inceleme

Şekil 3. panelinde bir kaynağı inceleme

Ağ panelindeki kaynakları diğer panellerden gösterme

Aşağıdaki Kaynaklara göz at bölümünde, DevTools kullanıcı arayüzünün çeşitli bölümlerindeki kaynakları nasıl görüntüleyeceğiniz gösterilmektedir. Bir kaynağı panelinde incelemek isterseniz kaynağı sağ tıklayıp Ağ panelinde göster'i seçin.

Ağ panelinde göster

Şekil 4. Ağ panelinde göster seçeneği

Kaynaklara göz at

Ağ panelinde kaynaklara göz atma

Ağ etkinliğini günlüğe kaydetme başlıklı makaleyi inceleyin.

Ağ Günlüğündeki sayfa kaynakları

Şekil 5. Ağ Günlüğündeki sayfa kaynakları

Dizine göre göz atma

Bir sayfanın kaynaklarını dizine göre düzenlenmiş olarak görüntülemek için:

  1. Kaynaklar panelini açmak için Kaynaklar sekmesini tıklayın.
  2. Sayfanın kaynaklarını göstermek için Sayfa sekmesini tıklayın. Sayfa bölmesi açılır.

    Sayfa bölmesi

    Şekil 6. Sayfa bölmesi

    Şekil 6'da açıkça anlaşılmayan öğelerin dökümü aşağıda verilmiştir:

    • top, ana belgenin tarama bağlamı'dır.
    • airhorner.com bir alanı temsil eder. İç içe yerleştirilmiş tüm kaynaklar bu alandan gelir. Örneğin, comlink.global.js dosyasının tam URL'si muhtemelen https://airhorner.com/scripts/comlink.global.js şeklindedir.
    • scripts bir dizindir.
    • (index) ana HTML dokümanıdır.
    • iu3, başka bir tarama bağlamıdır. Bu bağlam büyük olasılıkla ana doküman HTML'sine yerleştirilmiş bir <iframe> öğesi tarafından oluşturulmuştur.
    • sw.js, hizmet çalışanı yürütme bağlamıdır.
  3. Düzenleyici'de görüntülemek için bir kaynağı tıklayın.

    Düzenleyici&#39;de dosya görüntüleme

    Şekil 7. Dosyaları Düzenleyici'de görüntüleme

Dosya adına göre göz atma

Sayfa bölmesi varsayılan olarak kaynakları dizine göre gruplandırır. Bu gruplandırmayı devre dışı bırakmak ve her alanın kaynaklarını düz bir liste olarak görüntülemek için:

  1. Sayfa bölmesini açın. Dizinlere göre göz atma bölümüne bakın.
  2. Diğer Seçenekler'i Diğer Seçenekler tıklayın ve Klasöre Göre Grupla'yı devre dışı bırakın.

    Klasöre göre gruplandır

    Şekil 8. Klasöre Göre Gruplandır seçeneği

    Kaynaklar dosya türüne göre düzenlenir. Kaynaklar, her dosya türünde alfabetik olarak düzenlenir.

    Klasöre Göre Gruplandır&#39;ın devre dışı bırakılmasından sonra Sayfa bölmesi

    Şekil 9. Klasöre Göre Gruplandır'ın devre dışı bırakılmasından sonra Sayfa bölmesi

Dosya türüne göre göz atma

Kaynakları dosya türüne göre gruplandırmak için:

  1. Uygulama sekmesini tıklayın. Uygulama paneli açılır. Varsayılan olarak genellikle önce Manifest bölmesi açılır.

    Uygulama paneli

    Şekil 10. Uygulama paneli

  2. Çerçeveler bölmesine gidin.

    Çerçeveler bölmesi

    Şekil 11. Çerçeveler bölmesi

  3. İlgilendiğiniz bölümleri genişletin.

  4. Görüntülemek için bir kaynağı tıklayın.

    Uygulama panelinde bir kaynağı görüntüleme

    Şekil 11. Uygulama panelinde bir kaynağı görüntüleme

Ağ panelinde dosyalara türe göre göz atma

Kaynak türüne göre filtreleme bölümüne bakın.

Ağ Günlüğünde CSS için filtreleme

Şekil 12. Ağ Günlüğünde CSS için filtreleme