Kaynaklar paneline genel bakış

Kayce Basques

Sofia Emelianova

Chrome Geliştirici Araçları Kaynakları panelini kullanarak:

• Dosyaları görüntüleme.
• CSS ve JavaScript'i düzenleyin.
• Herhangi bir sayfada çalıştırabileceğiniz JavaScript Snippet'lerini oluşturup kaydedin. Snippet'ler yer işareti uygulamalarına benzer.
• JavaScript hatalarını ayıkla.
• Geliştirici Araçları'nda yaptığınız değişikliklerin dosya sisteminizdeki koda kaydedilmesi için bir Çalışma Alanı kurun.

Dosyaları göster

Sayfanın yüklediği tüm kaynakları görüntülemek için Sayfa bölmesini kullanın.

Sayfa bölmesinin düzenlenme biçimi:

• Yukarıdaki ekran görüntüsündeki top gibi bir üst düzey, bir HTML çerçevesini temsil eder. top uygulamasını ziyaret ettiğiniz her sayfada bulabilirsiniz. top, ana doküman çerçevesini temsil eder.
• Yukarıdaki ekran görüntüsündeki developers.google.com gibi ikinci düzey, bir kaynağı temsil eder.
• Üçüncü düzey, dördüncü düzey vb., ilgili kaynaktan yüklenen dizinleri ve kaynakları temsil eder. Örneğin, yukarıdaki ekran görüntüsünde devsite-googler-button kaynağının tam yolu developers.google.com/_static/19aa27122b/css/devsite-googler-button şeklindedir.

İçeriğini Düzenleyici bölmesinde görüntülemek için Sayfa bölmesinde bir dosyayı tıklayın. Her tür dosyayı görüntüleyebilirsiniz. Resimler için resmin önizlemesini görürsünüz.

Not: Sayfa bölmesinin yalnızca yüklenen ve dağıtılan stil sayfalarını listelediğini unutmayın.

CSS ve JavaScript'i düzenleyin

CSS ve JavaScript'i düzenlemek için Düzenleyici bölmesini kullanın. Geliştirici Araçları, yeni kodunuzu çalıştırmak için sayfayı günceller.

Düzenleyici, hata ayıklamanıza da yardımcı olur. Örneğin, söz dizimi hatalarının yanı sıra başarısız CSS @import ve url() ifadeleri ile geçersiz URL'lere sahip HTML href özellikleri gibi diğer sorunların yanındaki satır içi hata ipuçlarının altını çizer ve gösterir.

Bir öğenin background-color özelliğini düzenlerseniz değişikliğin hemen geçerli olduğunu görürsünüz.

JavaScript değişikliklerinin geçerli olması için Command+S (Mac) veya Control+S (Windows, Linux) tuşlarına basın. DevTools bir komut dosyasını yeniden çalıştırmaz. Bu nedenle, geçerli olan JavaScript değişiklikleri yalnızca işlevlerin içinde yaptığınız değişikliklerdir. Örneğin, console.log('A') nasıl çalışmaz, console.log('B') ise çalışır.

Geliştirici Araçları bu değişikliği yaptıktan sonra komut dosyasının tamamını yeniden çalıştırırsa A metni Konsol'da günlüğe kaydedilir.

Geliştirici Araçları, sayfayı yeniden yüklediğinizde CSS ve JavaScript değişikliklerinizi siler. Değişiklikleri dosya sisteminize nasıl kaydedeceğinizi öğrenmek için Çalışma alanı ayarlama bölümüne bakın.

Snippet'leri oluşturma, kaydetme ve çalıştırma

Snippet'ler, herhangi bir sayfada çalıştırabileceğiniz komut dosyalarıdır. jQuery kitaplığını bir sayfaya eklemek için Console'a sürekli olarak aşağıdaki kodu yazdığınızı varsayalım. Böylece Console'dan jQuery komutları çalıştırabilirsiniz:

let script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.2.1.min.js';
script.crossOrigin = 'anonymous';
script.integrity = 'sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=';
document.head.appendChild(script);

Bunun yerine, bu kodu bir Snippet'e kaydedebilir ve ihtiyacınız olduğunda birkaç düğmeyi tıklayarak çalıştırabilirsiniz. Geliştirici Araçları, Snippet'i dosya sisteminize kaydeder. Örneğin, jQuery kitaplığını bir sayfaya ekleyen bir Snippet'i inceleyin.

Snippet çalıştırmak için:

• Snippet'ler bölmesinde dosyayı açın ve alttaki işlem çubuğunda Çalıştır'ı tıklayın.
• Komut Menüsü'nü açın, > karakterini silin, ! yazın, Snippet'inizin adını yazın ve Enter tuşuna basın.

Daha fazla bilgi edinmek için Herhangi Bir Sayfadan Kod Snippet'lerini Çalıştırma konusuna bakın.

JavaScript hatalarını ayıkla

JavaScript'inizin hangi noktada yanlış gittiğini anlamak için console.log() kullanmak yerine, bunun yerine Chrome Geliştirici Araçları hata ayıklama araçlarını kullanabilirsiniz. Temel fikir, kodunuzda kasten durma noktası olan bir ayrılma noktası belirlemek ve sonra her defasında bir satır olacak şekilde kodunuzun yürütülmesine adım atmaktır.

Kodda adım adım ilerlerken, hâlihazırda tanımlı olan tüm özelliklerin ve değişkenlerin değerlerini görüntüleyebilir ve değiştirebilir, Konsol'da JavaScript çalıştırabilir ve daha pek çok işlem yapabilirsiniz.

Geliştirici Araçları'nda hata ayıklamayla ilgili temel bilgileri öğrenmek için JavaScript Hatalarını Ayıklamaya Başlama bölümüne bakın.

Yalnızca kodunuza odaklanın

Not: Aşağıdaki özellikler Chrome 106 sürümünde kullanılabilir.

Chrome Geliştirici Araçları, çerçeveler tarafından oluşturulan gürültüyü filtreleyerek yalnızca sizin yazdığınız koda odaklanmanıza ve web uygulamaları oluştururken yararlandığınız araçlar oluşturmanıza olanak tanır.

Geliştirici Araçları, size modern web hata ayıklama deneyimi sunmak için aşağıdakileri yapar:

• Yazılan ve dağıtılan kodu ayırır. Kodunuzu daha hızlı bulmanıza yardımcı olmak için Kaynaklar paneli, oluşturduğunuz kodu gruplandırılmış ve küçültülmüş koddan ayırır.
• Bilinen üçüncü taraf kodu yok sayar:
  • Kaynaklar paneli, Sayfa bölmesindeki dosya ağacından bu tür kaynakları gizler.
  • Console, bu tür kareleri yığın izlemelerden gizler.
  • Dosya Aç menüsü bu tür dosyaları arama sonuçlarında gizler.

Ayrıca, çerçeveler tarafından destekleniyorsa hata ayıklayıcıdaki Çağrı Grubu ve Konsol'daki yığın izlemeler, eşzamansız işlemlerin tam geçmişini gösterir.

Daha fazla bilgi edinmek için aşağıdaki makaleleri inceleyin:

• Chrome Geliştirici Araçları'nda modern web hata ayıklama
• Örnek Olay: Geliştirici Araçları ile Better Angular Hata Ayıklama

Çalışma Alanı kurma

Varsayılan olarak, Kaynaklar panelinde bir dosyayı düzenlediğinizde bu değişiklikler sayfayı yeniden yüklediğinizde kaybolur. Çalışma alanları, Geliştirici Araçları'nda yaptığınız değişiklikleri dosya sisteminize kaydedebilmenizi sağlar. Temel olarak bu, kod düzenleyiciniz olarak Geliştirici Araçları'nı kullanmanıza olanak tanır.

Başlamak için Çalışma Alanlarıyla Dosyaları Düzenleme başlıklı makaleyi inceleyin.