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 öğretilmektedir. Kaynaklar, bir sayfanın doğru 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ı ile ilgili temel bilgilere sahip olduğunuz varsayılmaktadır.
Kaynakları aç
İncelemek istediğiniz kaynağın adını bildiğinizde, Komut Menüsü kaynağı hızlı bir şekilde açmanızı sağlar.
Ctrl+P ya da Command+P (Mac) tuşlarına basın. Dosyayı Aç iletişim kutusu açılır.
Şekil 1. Dosya Aç iletişim kutusu
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.
2. Şekil. Dosya Aç iletişim kutusuna dosya adı yazma
Kaynakları Ağ panelinde aç
Kaynak ayrıntılarını inceleme başlıklı makaleye bakın.
3. Şekil. Ağ panelinde bir kaynağı inceleme
Diğer panellerdeki Ağ panelinde kaynakları göster
Aşağıdaki Kaynaklara göz at bölümünde, Geliştirici Araçları kullanıcı arayüzünün çeşitli bölümlerindeki kaynakları nasıl görüntüleyeceğiniz gösterilmektedir. Bir kaynağı Ağ panelinde incelemek isterseniz kaynağı sağ tıklayın ve Ağ panelinde göster'i seçin.
4. Şekil. Ağda göster seçeneği
Kaynaklara göz at
Ağ panelindeki kaynaklara göz atın
Ağ etkinliğini günlüğe kaydetme başlıklı makaleyi inceleyin.
5. Şekil. Ağ Günlüğü'ndeki sayfa kaynakları
Dizine göre göz at
Sayfa kaynaklarını dizine göre düzenlenmiş olarak görüntülemek için:
- Kaynaklar panelini açmak için Kaynaklar sekmesini tıklayın.
Sayfanın kaynaklarını görmek için Sayfa sekmesini tıklayın. Sayfa bölmesi açılır.
6. Şekil. Sayfa bölmesi
6. Şekil'deki açık olmayan öğelerin dökümünü burada bulabilirsiniz:
- top, ana doküman göz atma bağlamıdır.
- airhorner.com bir alanı temsil eder. Bu alan altında iç içe yerleştirilen tüm kaynaklar ilgili alandan gelir.
Örneğin, comlink.global.js dosyasının tam URL'si büyük olasılıkla
https://airhorner.com/scripts/comlink.global.jsolur. - scripts bir dizindir.
- (dizin), ana HTML dokümanıdır.
- iu3 ise başka bir göz atma bağlamıdır. Bu bağlam muhtemelen ana doküman HTML'sine yerleştirilmiş bir
<iframe>öğesi tarafından oluşturulmuştur. - sw.js bir hizmet çalışanı yürütme bağlamıdır.
Düzenleyici'de görüntülemek için bir kaynağı tıklayın.
7. Şekil. Bir dosyayı Düzenleyici'de görüntüleme
Dosya adına göre göz at
Sayfa bölmesi varsayılan olarak kaynakları dizine göre gruplandırır. Bu gruplamayı devre dışı bırakmak ve her alanın kaynaklarını düz liste olarak görüntülemek için:
- Sayfa bölmesini açın. Dizine göre göz atma konusuna bakın.
Diğer Seçenekler'i
tıklayın ve Klasöre Göre Grupla'yı devre dışı bırakın.
8. Şekil. Klasöre Göre Grupla seçeneği
Kaynaklar dosya türüne göre düzenlenmiştir. Her bir dosya türünde kaynaklar alfabetik olarak düzenlenmiştir.
9. Şekil. Klasöre Göre Gruplandır'ı devre dışı bıraktıktan sonra Sayfa bölmesi
Dosya türüne göre göz at
Kaynakları dosya türlerine göre gruplandırmak için:
Application (Uygulama) sekmesini tıklayın. Uygulama paneli açılır. Varsayılan olarak Manifest bölmesi genellikle önce açılır.
Şekil 10. Uygulama paneli
Çerçeveler bölmesine gidin.
Şekil 11. Çerçeveler bölmesi
İlgilendiğiniz bölümleri genişletin.
Görüntülemek için bir kaynağı tıklayın.
Şekil 11. Bir kaynağı Uygulama panelinde görüntüleme
Ağ panelinde dosyalara türe göre göz atın
Kaynak türüne göre filtreleme bölümünü inceleyin.
Şekil 12. Ağ Günlüğünde CSS filtrelemesi