Kaynaklar paneline genel bakış

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Web sitenizin stil sayfaları, JavaScript dosyaları ve resimler gibi kaynaklarını görüntülemek ve düzenlemek için Kaynaklar panelini kullanın.

Genel Bakış

Kaynaklar paneli, aşağıdakileri yapmanıza olanak tanır:

Kaynaklar panelini aç

Kaynaklar panelini açmak için şu adımları izleyin:

  1. Geliştirici Araçları'nı açın.
  2. Aşağıdaki tuşlara basarak Komut menüsünü açın:
    • macOS: Komut+Üst Karakter+P
    • Windows, Linux, ChromeOS: Control+Üst Karakter+P
  3. sources yazmaya başlayın, Kaynak panelini göster'i seçin ve Enter tuşuna basın.

Alternatif olarak sağ üst köşede more_vert Diğer seçenekler > Diğer araçlar > Kaynaklar'ı seçin.

Dosyaları göster

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

Sayfa sekmesi.

Sayfa sekmesinin düzeni:

  • Üst düzey (ör. yukarıdaki ekran görüntüsünde top), bir HTML çerçevesini temsil eder. top simgesini ziyaret ettiğiniz her sayfada görürsünüz. top, ana belge çerçevesini temsil eder.
  • Yukarıdaki ekran görüntüsünde developers.google.com gibi ikinci düzey, bir kaynak temsil eder.
  • Üçüncü düzey, dördüncü düzey ve benzerleri, 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.

Sayfa sekmesinde bir dosyayı tıklayarak içeriğini Düzenleyici sekmesinde görüntüleyebilirsiniz. Her tür dosyayı görüntüleyebilirsiniz. Resimler için resmin önizlemesini görürsünüz.

Düzenleyici sekmesinde bir dosya görüntüleme.

CSS ve JavaScript'i düzenleme

CSS ve JavaScript'i düzenlemek için Düzenleyici sekmesini tıklayın. Geliştirici Araçları, sayfayı yeni kodunuzu çalıştıracak şekilde günceller.

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

Satır içi söz dizimi hatası ipucusu.

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

Düzenleyici sekmesinde CSS'yi düzenleme.

JavaScript değişikliklerinin geçerli olması için Command+S (Mac) veya Control+S (Windows, Linux) tuşlarına basın. Geliştirici Araçları bir komut dosyasını yeniden çalıştırmaz. Bu nedenle, yalnızca işlevlerin içinde yaptığınız JavaScript değişiklikleri geçerli olur. Örneğin, console.log('A')'ün çalışmadığını, console.log('B')'ün ise çalıştığını görebilirsiniz.

Düzenleyici sekmesinde JavaScript düzenleme.

Geliştirici Araçları değişikliği yaptıktan sonra komut dosyasının tamamını yeniden çalıştırırsa A metni Konsola 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ı oluşturma başlıklı makaleyi inceleyin.

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 ve Console'dan jQuery komutlarını çalıştırmak için Console'da aşağıdaki kodu tekrar tekrar yazdığınızı varsayalım:

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 içine kaydedebilir ve ihtiyacınız olduğunda birkaç düğme tıklayarak çalıştırabilirsiniz. DevTools, snippet'i dosya sisteminize kaydeder. Örneğin, jQuery kitaplığını bir sayfaya yerleştiren Snippet'i inceleyin.

jQuery kitaplığını bir sayfaya ekleyen bir snippet.

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

  • Dosyayı Snippet'ler sekmesinde açın ve alt kısımdaki işlem çubuğunda Çalıştır'ı Çalıştır düğmesi. 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 için Herhangi Bir Sayfada Kod Snippet'lerini Çalıştırma başlıklı makaleyi inceleyin.

JavaScript hatalarını ayıkla

JavaScript'inizin nerede yanlış gittiğini anlamak için console.log() kullanmak yerine, Chrome Geliştirici Araçları hata ayıklama araçlarını kullanabilirsiniz. Genel fikir, kodunuzda kasıtlı olarak duracağınız bir yer olan bir kesme noktası ayarlamak ve ardından kodunuzun yürütülmesini bir satırda bir adımla ilerletmektir.

Bir kesme noktasında duraklatma.

Kodda ilerledikçe geçerli olarak tanımlanmış tüm özellik ve değişkenlerin değerlerini görüntüleyip değiştirebilir, Konsolda JavaScript'i çalıştırabilir ve daha fazlasını 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

Chrome Geliştirici Araçları, çerçevelerin oluşturduğu gürültüyü filtreleyerek ve web uygulamaları oluştururken yararlandığınız araçları geliştirerek yalnızca sizin yazdığınız koda odaklanmanıza olanak tanır.

DevTools, size modern bir web hata ayıklama deneyimi sunmak için aşağıdakileri yapar:

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

Daha fazla bilgi için:

Çalışma alanı oluşturma

Varsayılan olarak, Kaynaklar panelinde bir dosyayı düzenlediğinizde, sayfayı yeniden yüklediğinizde bu değişiklikler kaybolur. Çalışma alanları, Geliştirici Araçları'nda yaptığınız değişiklikleri dosya sisteminize kaydetmenizi sağlar. Bu sayede, kod düzenleyici olarak DevTools'u kullanabilirsiniz.

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