Bu kılavuzda, bir web sayfasının kaynaklarını görüntülemek için Chrome Geliştirici Araçları'nın nasıl kullanılacağı öğ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ı'na dair temel bilgilere sahip olduğunuz varsayılır.
Açık kaynaklar
İncelemek istediğiniz kaynağın adını bildiğinizde Komut Menüsü, kaynağı hızlı bir şekilde açmanızı sağlar.
Ctrl+P veya Command+P (Mac) tuşlarına basın. Dosya 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ıktan sonra Enter tuşuna basın.
2. Şekil. Dosya Aç iletişim kutusunda dosya adı yazma
Ağ panelinde kaynakları açma
Bir kaynağın ayrıntılarını inceleme başlıklı makaleyi inceleyin.
3. Şekil. Ağ panelinde bir kaynağı inceleme
Diğer panellerdeki kaynakları Ağ panelinde göster
Aşağıdaki Kaynaklara göz at bölümünde, Geliştirici Araçları 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ğ panelinde göster seçeneği
Kaynaklara göz at
Ağ panelindeki kaynaklara göz at
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
Bir sayfanın kaynaklarını dizine göre düzenlenmiş şekilde 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
Şekil 6'da belirgin olmayan öğelerin dökümü aşağıda verilmiştir:
- top, ana doküman tarama bağlamıdır.
- airhorner.com bir alan adını temsil eder. Altında iç içe yerleştirilmiş tüm kaynaklar söz konusu 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.
- (dizin), ana HTML dokümanıdır.
- iu3 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. Düzenleyici'de dosya görüntüleme
Dosya adına göre göz atın
Varsayılan olarak Sayfa bölmesi, kaynakları dizine göre gruplandırır. Bu gruplandırmayı devre dışı bırakmak ve her bir alanın kaynaklarını düz bir liste olarak görüntülemek için:
- Sayfa bölmesini açın. Dizine göre göz atma başlıklı makaleye göz atı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üzenlenir. Her dosya türü içinde kaynaklar alfabetik olarak düzenlenir.
9. Şekil. Klasöre Göre Grupla özelliğini devre dışı bıraktıktan sonra Sayfa bölmesi
Dosya türüne göre göz atın
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.
10. Şekil. Uygulama paneli
Çerçeveler bölmesine ilerleyin.
Ş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. 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.
Şekil 12. Ağ Günlüğünde CSS filtreleme